Hultenius.

+Clients
  • Content count

    30
  • Joined

  • Last visited


About Hultenius.

  • Rank
    IPB Newbie

IPS Marketplace

  • Resources Contributor Total file submissions: 1

Hultenius.'s Activity

  1. Hultenius. added a post in a topic: Suggestion: Using CSS Sprites for Icons   

    The beta version has been submitted to IPS Marketplace. It will hopefully be approved soon.
    Download page:

    Don't forget to report bugs in support thread! :)

    Oh! And here are some configurations for the default skin. Just don't look at the configuration code for advanced images, you might get a headache ;)

    Sprite: Main - Normal images

    public/style_images/master/feed.png public/style_images/master/help.png public/style_images/master/loginmethods/facebook.png public/style_images/master/loginmethods/twitter.png # Global footer public/style_images/master/stats_time.png public/style_images/master/stats_server.png public/style_images/master/stats_database.png public/style_images/master/stats_compression.png # Sidebar public/style_images/master/sidebar_close.png public/style_images/master/comment_new.png public/style_images/master/sidebar_open.png public/style_images/master/comments.png public/style_images/master/user_comment.png public/style_images/master/locked_replies.png public/style_images/master/lock_small_gold.gif public/style_images/master/transmit_blue.png public/style_images/master/bell.png # Forum icons public/style_images/master/last_post.png # Topic icons public/style_images/master/t_read.png public/style_images/master/t_read_dot.png public/style_images/master/t_unread.png public/style_images/master/t_unread_dot.png public/style_images/master/t_hot_read.png public/style_images/master/t_hot_read_dot.png public/style_images/master/t_hot_unread.png public/style_images/master/t_hot_unread_dot.png public/style_images/master/t_poll_read.png public/style_images/master/t_poll_read_dot.png public/style_images/master/t_poll_unread.png public/style_images/master/t_poll_unread_dot.png public/style_images/master/t_closed.png public/style_images/master/t_moved.png # Topic row icons public/style_images/master/topicpreview.png public/style_images/master/attachicon.gif public/style_images/master/textfield_rename.png public/style_images/master/award_delete.png public/style_images/master/lock.png public/style_images/master/lock_open.png public/style_images/master/award.png public/style_images/master/bullet_error.png public/style_images/master/transmit_small.png public/style_images/master/pm_nonew.png # Button images public/style_images/master/page_white_add.png # PM public/style_images/master/bin.png public/style_images/master/folder.png public/style_images/master/folder_add.png public/style_images/master/folder_edit.png public/style_images/master/folder_page.png public/style_images/master/email_go.png public/style_images/master/note_add.png public/style_images/master/pm_new.png public/style_images/master/pm_nonew.png # Unsorted public/style_images/master/dropdown.png public/style_images/master/new_post.png public/style_images/master/delete.png public/style_images/master/close_popup.png public/style_images/master/user_add.png public/style_images/master/user_delete.png public/style_images/master/user_popup.png public/style_images/master/opts_arrow.png public/style_images/master/email_open.png public/style_images/master/page_topic_magnify.png public/style_images/master/user_off.png public/style_images/master/report.png public/style_images/master/cross.png public/style_images/master/date.png public/style_images/master/user.png public/style_images/master/spammer_off.png public/style_images/master/profile/male.png public/style_images/master/warn_add.gif public/style_images/master/warn_minus.gif public/style_extra/cprofile_icons/profile_msn.gif public/style_images/master/user_edit.png public/style_images/master/user_green.png

    Sprite: Main - Advanced images


    Sprite: Topic view - Normal images

    Sprite: Topic view - Advanced images


  2. Hultenius. added a file in Performance   

    IPB CSS Sprites v0.99 BETA
    Introduction

    IPB CSS Sprites is an application for Invision Power Board that allows you to create and use CSS sprites on your board. The configuration process is very easy, all you have to do is to list all images that you want in the CSS sprites and push a button, the application takes care of the rest. If you use the standard skin things get even easier since you will be provided with a finished and optimized configuration.


    Features

    [*]Faster loading time The total loading time (not render time) for new visits will be vastly improved. [*]Decreased server load Since fewer HTTP requests means less work for the web server, using CSS sprites will vastly decrease server load for busy boards. [*]Slightly better SEO Google loves fast loading websites and use the speed as a small factor in their ranking algorithm. [*]Slightly faster rendering All images that are included in a CSS sprite have fixed width and height. This will help the browser to render pages slightly faster. [*]Instant hover effect Your buttons will not flicker when you move your mouse over them.
    Requirements

    IPB 3.1.x
    PHP 5.2 or newer
    PHP extensions: cURL, GD2


    Installation

    [*]Transfer the files to your IPB installation. [*]Log in to ACP, click on "Manage Applications & Modules" and install "CSS Sprites" (bottom of the page). [*]If some files/folders are not writable (you get a message), make them writeable (chmod 777). You might want to change the permission back to 644 for publicOutput.php after the installation if you care about security. But please note that you wont be able to use the auto-install hook feature if this file is not writable. [*]Configure the sprites. Optimized configurations for the standard skin (IPB 3.1.x) can be found here. Known issues - Custom sprites cannot be created, yet - PNG-images of type grayscale-alpha are not supported - Animated images are not supported - Only one skin can be use css sprites - Old sprite images are not removed, fixed in 1.0






















    • 223 downloads
    • 0 comments
  3. Hultenius. added a post in a topic: Suggestion: Using CSS Sprites for Icons   

    The application is ready for a beta release, but it might be a good idea to test it on a fresh install first :rolleyes:
  4. Hultenius. added a post in a topic: Suggestion: Using CSS Sprites for Icons   

    Sorry guys, I've been extremely busy lately and haven't touched the code for two months or so.

    But, I also have some good news. The project is not dead, the software will be released - for FREE! It will be released under GPL, so anyone else can continue to develop it.

    I plan to release it next sunday, 9th of january.
  5. Hultenius. added a post in a topic: Suggestion: Using CSS Sprites for Icons   

    I've tried the software on a live forum for a week now and the results are satisfying. The number of (useless) HTTP-requests and downloaded images are down with 40-50%. Using CSS sprites will probably decrease server load quite a bit on busy boards. The graph below shows some statistics for the last few days. Shouldn't be that hard to figure out when the software was installed... :rolleyes:


    Green bars: HTTP-requests
    Blue bars: Downloaded images
    Turquoise bars: Downloaded pages (roughly 1/6 are actual page views, the rest are dynamic JS/CSS files and search engines)

    Decreasing the server load is not the only benefit, you will also see [url=" loading times (not to confuse with render time!) and slightly better SEO (extremely small gain, but an improvement nonetheless). There are also some positive side-effects, like instant hover effect on buttons.

    The software is mostly done by now, just need to write some basic documentation, clean up the code and create a simple order homepage. I will also make sure it works with upcoming IPB 3.1.3. Just wait 1-2 more weeks!
  6. Hultenius. added a comment on a blog entry: IPS Product Line Release Schedule   

    I feel... relieved :)
    Now I can stop guessing.
  7. Hultenius. added a post in a topic: Suggestion: Using CSS Sprites for Icons   


    For "normal" images with the good ol' <img>-tag, things are really easy. I'm working on a "suggester" right now that downloads pages as a guest/googlebot and gives suggestions.
    Should be easy enough for everyone and works with all skins.



    You won't get all images, but getting 50% of the images is still better than nothing. And you can always add more manually.

    CSS-images on the other hand are hard/time consuming to eliminate. I've added advanced settings so you can indeed eliminate almost all CSS-images, but it requires knowledge and time. You need to right align, left align, add margins, and sometimes repeat images. You also need to add image specific CSS-code. But the benefits can be worth it.
  8. Hultenius. added a post in a topic: Suggestion: Using CSS Sprites for Icons   

    I'm planning to release this as an IPB application. It will come with a fair price tag, somewhere around
  9. Hultenius. added a post in a topic: Suggestion: Using CSS Sprites for Icons   


    It depends on how you implement CSS sprites. You are in for trouble if you have to edit the skin files, that would be a nightmare. But there is a better solution!

    Look at my implementation above. It is more of an output filter. All you have to do is to list all images you want in the CSS sprite, and push a button! If you change an image, just push the button again and everything will be fine. Super-easy! You will never touch the skin files. As a bonus, this method also add width and height parameters to the <img>-tags, completing the DOM-tree and slightly improves the rendering time.
  10. Hultenius. added a post in a topic: Suggestion: Using CSS Sprites for Icons   

    I continued the project since nobody seemed interested, and the first test results are in. I used webpagetest.org to perform the tests (Verizon FiOS 20 Mbit/s, IE7, ping time around 100 ms). Yes, 20 Mbit/s is a bit high, but better than 1.5 Mbit/s.

    Using normal images:


    Using CSS sprite images: (and combining some css/js requests)


    Much better! I will enable this mod on my board next week to capture some statistics.

    Oh, and here are the CSS sprite images. Completely generated of course.


  11. Hultenius. added a post in a topic: Suggestion: Using CSS Sprites for Icons   

    This would be a very cool feature for IPB 3.2.

    I actually tried to code a solution for automated CSS sprites some days ago that would work something like this:

    1. Generate an combined image
    Loop thru all common style images and build a big/combined image using GD2. Individual image locations in the combined image are saved to a database table.

    2. Overwrite HTML <img> tags on the fly
    Add an output filter to publicOutput.php where all <img="image" other stuff /> are replaced with:


    <img="1pixel-dummy-image" style="background:url('combined-image.png') -{IMAGE-OFFSET-X}px -{IMAGE-OFFSET-Y}px; width: {IMAGE-WIDTH}px; height: {IMAGE-HEIGHT}px;'" other stuff />
    Unfortunately my time is limited so this little project will probably die. Let's hope someone else could code this instead. I'm also willing to pay for a solution.