Feb 26, 2010

HTML Sprites - silver bullet against small images

Last builds of WEBO Site SpeedUp include amazing client side optimization approach - CSS Sprites for HTML images. Let's review underneath logic and all related techniques.

CSS Sprites - why HTML?

Actually we are speaking about combining images to a larger one which can be positioned with CSS property background-position. It's impossible to convert raw HTML images to CSS Sprite (to be correct - it's possible but leads a lot of restrictions and drawbacks, i.e. we will have to drop a huge part of images' functionality and properties).

So before any actual operations with images in HTML code (like <img src="..." />) we should prepare them. How? We should convert all images to 'fake' ones - transparent stubs which have initial image as a background, and the same width and height.

Converting HTML images to CSS images

Well. To reduce amount of data (we are going to speed up website, not to increase its load speed) we should choose very efficient approaches to insert transparent stubs. And we have 2 choices:

  • Insert call to 1x1 transparent GIF image (yeah, bad known spacer.gif which was used a lot several years ago to make table layout). Its size is only 43 bytes (but 1 more HTTP request).
  • For modern browsers we can use 82-bytes data:URI chunk (which represents this image - data:image/gif;base64,R...Ow==. A bt more data (with gzip usage - about 100 bytes for 1 HTML document, or nothing). But minus 1 HTTP request (cool!).

To provide the best practices here we can combine both approaches - for IE7 and lower use the first one, for all the other browsers - the second one.

Playing with HTML Sprites

It seems now we have all parts for HTML Sprites logic and can reveal it.

  1. First of all - parse initial HTML code to find all images, get their sizes (and skip some large ones).
  2. Then create an array of CSS rules based on given HTML images - just background image (plus no-repeat and zero background position), width and height.
  3. Then just combine all images in 1 CSS Sprite (using existent CSS Sprites logic over current set of CSS rules).
  4. Finally (with a number of CSS classes) replace initial HTML images with stubs with calculated styles.

All this looks very simple. But what are drawbacks?

Troubles and solutions

As far as we need to check size for any image (just to get its dimensions an skip it if it's very large) - we will have a lot of I/O requests with any HTML document. So this can significantly increase server side load time. That's bad. But we can cache calculated dimensions for known images (such dimensions are being changed very rarely) - and skip all future recalculations.

But with every HTML document (with cached calculated dimensions) we have one more expensive CPU operation - CSS background positions calculation (even with completed CSS Sprite we need to get actual positions of given images inside it). But good news here is that we can also cache such calculations (to a set of CSS rules for given HTML image).

Also we must have per-page or per-website modes. Just because you can have thousands of small images through the whole website - but you don't want your visitors to download them all at once.

With all such approaches HTML Sprites technique works both on a high-end servers and weak VDS/shared hosting. And reduces by 20-30% number of HTTP requests for every your web page. That's really amazing. And it's ready to use - just download WEBO Site SpeedUp or update to the latest version.

23 comments:

  1. Simply a smiling visitor here to share the love (:, btw outstanding design . "Audacity, more audacity and always audacity." by Georges Jacques Danton. webflow experts

    ReplyDelete
  2. Job scope at significant scale lies for forensic science experts at crime laboratories rub by city, county or state governments. The other region exactly where an individual looking for a career in forensic science can secure job are Federal agencies including the Departments of Justice, Federal Bureau of Investigation, Secret Service, Drug Enforcement Administration, Bureau of Alcohol, Tobacco and Firearms, Postal Inspection Service and other crucial departments, private labs and university laboratories is also a location of work for Forensic Science technician. web design agency new york

    ReplyDelete
  3. good day, your site is really unquie. Anways, i do appreciate your work new york website design company

    ReplyDelete
  4. Using writers’ exercises such as “chunking”. They use many websites that contain several creative writing exercises. Writers read an exercise, and do it. web design agency new york

    ReplyDelete
  5. I {don’t|do not} even know how I ended up here, but I thought this post was {good|great}. I {don’t|do not} know who you are but {definitely|certainly} {you are|you’re} going to a famous blogger if you {are not|aren’t} already Cheers!… Heya i’m for the first time here. I found this board and I find It really useful & it helped me out much. I hope to give something back and aid others like you helped me…. new york website design company

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete
  7. Just a fast hello and also to thank you for discussing your ideas on this web page. I wound up inside your blog right after researching physical fitness connected issues on Yahoo… guess I lost track of what I had been performing! Anyway I’ll be back once once more inside the long term to examine out your blogposts down the road. Thanks! branding sf

    ReplyDelete
  8. Oh my goodness! a great write-up dude. Thanks a ton Nevertheless I am experiencing issue with ur rss . Do not know why Can not sign up to it. Is there anyone obtaining identical rss problem? Anybody who knows kindly respond. Thnkx branding san francisco

    ReplyDelete
  9. I like this post, enjoyed this one appreciate it for putting up. interface design agency san francisco

    ReplyDelete
  10. An impressive share, I merely with all this onto a colleague who was simply performing a small analysis within this. And then he the fact is bought me breakfast simply because I uncovered it for him.. smile. So well then, i’ll reword that: Thnx to the treat! But yeah Thnkx for spending plenty of time go over this, I’m strongly regarding this and love reading regarding this topic. If possible, as you become expertise, does one mind updating your blog with a lot more details? It truly is highly ideal for me. Massive thumb up in this post! web designer los angeles

    ReplyDelete
  11. I can’t really help but admire your blog, your blog is so adorable and nice ,  los angeles web agency

    ReplyDelete
  12. using wooden wall decors at home is a great alternative to using those expensive metal wall decors,, web design agencies los angeles

    ReplyDelete
  13. The author covered some curious points here. I came across this by using Yahoo and I must confess that I am currently subscribed for your blog, it is quite great web design

    ReplyDelete
  14. his is the excellent blog page for anyone who wants to know about this theme. You recognize a lot its virtually difficult to argue with you (not that I really would want…HaHa). You absolutely put a fresh spin on a subject matter thats been published about for many years. Wonderful things, just excellent! website design company

    ReplyDelete
  15. cleaning supplies should have earth friendly organic ingredients so that they do not harm the environment** top web design companies

    ReplyDelete
  16. On the off chance that words generally can't do a picture justice, at that point visual fashioners are among the most productive authors we know. Professional graphic design

    ReplyDelete
  17. The main objective of the user interface is to make the user's interaction easy, fun, effective and efficient as possible, in terms of accomplishing end user goals. User Interface development is the part of Front end development. User interface design requires a quality understanding of user needs which mainly focuses on the needs of the platform and its user expectations. Hire UI Developer Freelancer

    ReplyDelete

  18. Hi to every one, since I am truly keen of reading this webpage’s post to be updated on a regular basis.
    It consists of pleasant stuff.

    my web page; 풀싸롱
    (jk)


    ReplyDelete
  19. Great post! I am actually getting ready to across this information, is very helpful my friend. Also great blog here with all of the valuable information you have. Keep up the good work you are doing here. fivem mlo

    ReplyDelete
  20. This comment has been removed by the author.

    ReplyDelete
  21. In the event that you are anticipating getting this kind of speculation yet you as of now have a previous individual retirement account you can turn it over to valuable metals.
    how does a gold and silver ira work

    ReplyDelete
  22. HTML Sprites are indeed a game-changer for optimizing websites with small images! They dramatically reduce HTTP requests, enhancing site speed and performance. Plus, they simplify maintenance. If you're curious about how they work in action, see info here . It's a smart strategy for any web developer looking to streamline their site's efficiency

    ReplyDelete