pauldewouters Picturefill doesn’t address bandwidth, but it its current state the Picture element would hand over 1x/2x determination to the browser via srcset. Hope that makes sense.
Pretty damn useful. I have been to looking for something that tackled this issue.
Only nitpick I have is that the script should check to see if the src attribute matched the data-src before it set the value. I had Firebug open as I was resizing the browser and saw a lot of useless requests.
Copy & paste the code below to embed this comment.
skeg64
My experience with SVG is that it’s not as rosy and well-supported as most of these kinds of articles make out.
Want your SVG to be flexible in a responsive design? You will run into sizing problems in iOS Safari.
Want to make your SVG a clickable link? The most reliable way is to absolutely position an anchor tag over it – which is not the most semantic.
Want to use an SVG background with “background-size: cover”? Want to use an SVG as a border-image? Browsers handle these very inconsistently, if at all.
In my opinion, these bugs are the reason that SVG isn’t more widely used, not web developers unwillingness to use it.
Dave – Regarding SVG exports from Illustrator, I’ve always done a 2-step process:
First, simplify the artwork in Illustrator as much as possible, that means un-grouping, merging shapes, removing extra points, etc. Time consuming depending on the graphic, but worth it.
THEN you can do an SVG export, but be sure to open it up in a text editor and do another cleanup pass for anything that looks strange.
Copy & paste the code below to embed this comment.
Lee Griffin
It’s a nice article, but I feel it doesn’t deal with the issue that was actually questioned in the first place…that of people with devices that are out of sync with their environment’s bandwidth. We can’t focus on front-end solutions if we ignore that someone may have a large device on a small network speed, or a small device on a high speed WiFi.
“I have written more about it here.”:http://niaccurshi.blogspot.co.uk/2012/09/responsive-images-no-solution-yet.html
What are your feelings about this technique? “Adaptive Images by Matt Wilcox”:http://adaptive-images.com/
From what I see, it has a significant PRO of being able to work on existing sites without having to change any markup. So this could be used to upgrade existing sites without having to spend a lot of time working on them. Also, you only have to have one version of the image and the script takes care of the multiple sizes for you.
The CONs of course are that it requires PHP and uses the server fairly heavily. I’m not sure how this would impact page load times. But it sounds like a very interesting solution.
Copy & paste the code below to embed this comment.
jaikdean
Fantastic assessment of the current situation and some useful avenues to explore.
As an aside, if you run that threeamigos.png image through ImageOptim (a handy OS X wrapper for PNGOUT, OptiPNG and AdvPNG to losslessly brute force PNG filesize down) it saves another 10KB and comes down to 74KB.
Copy & paste the code below to embed this comment.
Dave Rupert
@skeg64 SVG is trickier than it seems. But basic, “no-frills” embedding is more-or-less supported across modern browsers. But you should totally write a blog post with a support chart, or put it out on a site somewhere, submit it to https://github.com/h5bp/lazyweb-requests
@splatcollision You should blog about that! The internet needs more education, less Top 5 posts. I think the “Art of Massage and SVG” would be a great blog post title! :)
@John Bertucci That’s due to the source (TIFF) file’s resolution. I wanted to work with totally uncompressed images as a source just to eliminate the resolution variable there. If I can find time, I’ll do 72ppi versions and see what the difference there is.
@ryangiglio I like Adaptive Images, I totally do. And for existing sites, like you mentioned, with years of content behind it (like Chris Coyier’s CSS-Tricks), I think it’s a great solution. I’ve heard the following is hearsay that there are CDN issues with that, which won’t work for high-scale sites. That said, Matt Wilcox is a smart guy and very involved in the RWDimages process.
Although I agree with most of the article, the ‘three amigos’ example SVG you posted is rather misleading and as luminarious and splatcollision pointed out far from what it could be.
You see, what you guys did is take whatever .ai you had and export it from Illustrator as is. Also because the source was rather poluted with dozens of overlapping paths and points the output ended up being huge as well.
I’ve been spending rather painful amounts of time recently diving into SVG optimisation and here’s what I learnt:
1. merge your shapes and make as many compound masks as you can to reduce the amount of SVG tags.
2. before saving: Object > Path > Simplify (even @ 99 precision you can kill a lot of points)
3. when saving, reduce decimal points from 3 to 1.
4! Reuse, reuse, reuse. Learn your SVG before you start using it. Just by cloning and transforming your corner shapes rather than redrawing them, I went down to 290KB. Now if you do the same for some other shapes—e.g. those circular frames— you can drop another chunk of redundant data.
5. Optimise output by removing unnecessary garbage, tags, whitespace, styles, etc.
6. Minify.
7. Always serve it gzipped – either automatically or manually as .svgz file.
To prove these points – here’s a very rough optimisation result I achieved mostly with regex and Illustrator automation, hence few bits and pieces may differ: https://dl.dropbox.com/u/27213/threeamigos-lite.svg. When you serve it gzipped it’s only 72KB. If You reorganised the whole file I imagine you could easily get down to 50KB.
I hope that helps anyone who wants do dive into SVGs.
I started my site when I was in Nepal, so I had no choice but to use extremely small file sizes, as anything else would take too long to upload and the internet connection would cut out before it finished. Now that I’m back in Europe, I’ve actually continued using only small-sized and highly compressed photos, mainly out of a realization that many people the world over would never get to see most of the photos were they too large.
I wouldn’t mind having larger images though, so I’ll have to try a few of your workarounds and see if they work for me.
Umm.. I have a JavaScript solution that really does prevent the image from downloading prior to selection, and it let’s you use the picture elements (or img srcset syntax) without the need for div’s etc (although it does require noscript).
https://github.com/davidmarkclements/Respondu
Just thought you’d like to know..
It does have a few dirty little secrets, but if you want to avoid the double download, you gotta do what you gotta do.
Best regards,
Dave
p.s. it’s a work in progress, but it does work across all modern browsers
SVG has been an awful long time in coming and, while I’m very much in favour of it and have been using it in web-based stuff since about 2006 I can tell you that it is far from optimised. Performance in most browsers apart from Opera was dreadful until a few years ago and you need either plugins or compatibility libraries (Raphael et al.) for Internet Explorer which I think is only adding support with version 10. Printing was often almost impossible. Also, as it’s XML-based it’s inherently inefficient – I’d love to see a JSON version which would be both smaller and faster to parse. Support of the format between authoring tools is also terrible. Try working with the same file in say Illustrator, Omnigraffle, Inkscape and DrawPlus. Nevertheless, it really is the bees knees for logos, claims, etc. and can’t be beaten for anything that gets printed – this is the big lacuna in your article: almost everything you say also applies to print media.
But I hate all the front-end only kludges for dealing with different pixel-densities. Backend-support preferably in the file-formats is essential. The “prefetching” behaviour of browsers could easily be modified by the browser makers or even put in the users’ hands. If you want small bitmaps of great quality – take a look at webp. I think mod_pagespeed now supports it if the browser does. It’s the best diet you can put your photos on.
Dave, I wonder if 99% of SVGs are exported from Illustrator as that format is quite popular with wikipedia nowadays, so whenever, say a blogger or private website owner, uses their pictures, chances are it’s a SVG, as this is handy because of the license, mostly creative commons. Private owners should outnumber web designers by far and most of wikipedia’s SVGs should be creations of open source software.
27 Reader Comments
Back to the ArticleDave Rupert
pauldewouters Picturefill doesn’t address bandwidth, but it its current state the Picture element would hand over 1x/2x determination to the browser viasrcset. Hope that makes sense.powrsurg
Pretty damn useful. I have been to looking for something that tackled this issue.
Only nitpick I have is that the script should check to see if the src attribute matched the data-src before it set the value. I had Firebug open as I was resizing the browser and saw a lot of useless requests.
skeg64
My experience with SVG is that it’s not as rosy and well-supported as most of these kinds of articles make out.
Want your SVG to be flexible in a responsive design? You will run into sizing problems in iOS Safari.
Want to make your SVG a clickable link? The most reliable way is to absolutely position an anchor tag over it – which is not the most semantic.
Want to use an SVG background with “background-size: cover”? Want to use an SVG as a border-image? Browsers handle these very inconsistently, if at all.
In my opinion, these bugs are the reason that SVG isn’t more widely used, not web developers unwillingness to use it.
splatcollision
Dave – Regarding SVG exports from Illustrator, I’ve always done a 2-step process:
First, simplify the artwork in Illustrator as much as possible, that means un-grouping, merging shapes, removing extra points, etc. Time consuming depending on the graphic, but worth it.
THEN you can do an SVG export, but be sure to open it up in a text editor and do another cleanup pass for anything that looks strange.
Lee Griffin
It’s a nice article, but I feel it doesn’t deal with the issue that was actually questioned in the first place…that of people with devices that are out of sync with their environment’s bandwidth. We can’t focus on front-end solutions if we ignore that someone may have a large device on a small network speed, or a small device on a high speed WiFi.
“I have written more about it here.”:http://niaccurshi.blogspot.co.uk/2012/09/responsive-images-no-solution-yet.html
John Bertucci
I’m curious, I downloaded the jpg’s from the POTUS example and they’re all set to 300 DPI and not 72 DPI.
I’m curious if there’s a reasoning behind that?
ryangiglio
What are your feelings about this technique? “Adaptive Images by Matt Wilcox”:http://adaptive-images.com/
From what I see, it has a significant PRO of being able to work on existing sites without having to change any markup. So this could be used to upgrade existing sites without having to spend a lot of time working on them. Also, you only have to have one version of the image and the script takes care of the multiple sizes for you.
The CONs of course are that it requires PHP and uses the server fairly heavily. I’m not sure how this would impact page load times. But it sounds like a very interesting solution.
jaikdean
Fantastic assessment of the current situation and some useful avenues to explore.
As an aside, if you run that threeamigos.png image through ImageOptim (a handy OS X wrapper for PNGOUT, OptiPNG and AdvPNG to losslessly brute force PNG filesize down) it saves another 10KB and comes down to 74KB.
Dave Rupert
@skeg64 SVG is trickier than it seems. But basic, “no-frills” embedding is more-or-less supported across modern browsers. But you should totally write a blog post with a support chart, or put it out on a site somewhere, submit it to https://github.com/h5bp/lazyweb-requests
@splatcollision You should blog about that! The internet needs more education, less Top 5 posts. I think the “Art of Massage and SVG” would be a great blog post title! :)
@John Bertucci That’s due to the source (TIFF) file’s resolution. I wanted to work with totally uncompressed images as a source just to eliminate the resolution variable there. If I can find time, I’ll do 72ppi versions and see what the difference there is.
@ryangiglio I like Adaptive Images, I totally do. And for existing sites, like you mentioned, with years of content behind it (like Chris Coyier’s CSS-Tricks), I think it’s a great solution. I’ve heard the following is hearsay that there are CDN issues with that, which won’t work for high-scale sites. That said, Matt Wilcox is a smart guy and very involved in the RWDimages process.
@jaikdean Bonus savings!
criography
Hey Dave,
Although I agree with most of the article, the ‘three amigos’ example SVG you posted is rather misleading and as
luminarious andsplatcollision pointed out far from what it could be.You see, what you guys did is take whatever .ai you had and export it from Illustrator as is. Also because the source was rather poluted with dozens of overlapping paths and points the output ended up being huge as well.
I’ve been spending rather painful amounts of time recently diving into SVG optimisation and here’s what I learnt:
1. merge your shapes and make as many compound masks as you can to reduce the amount of SVG tags.
2. before saving: Object > Path > Simplify (even @ 99 precision you can kill a lot of points)
3. when saving, reduce decimal points from 3 to 1.
4! Reuse, reuse, reuse. Learn your SVG before you start using it. Just by cloning and transforming your corner shapes rather than redrawing them, I went down to 290KB. Now if you do the same for some other shapes—e.g. those circular frames— you can drop another chunk of redundant data.
5. Optimise output by removing unnecessary garbage, tags, whitespace, styles, etc.
6. Minify.
7. Always serve it gzipped – either automatically or manually as .svgz file.
To prove these points – here’s a very rough optimisation result I achieved mostly with regex and Illustrator automation, hence few bits and pieces may differ: https://dl.dropbox.com/u/27213/threeamigos-lite.svg. When you serve it gzipped it’s only 72KB. If You reorganised the whole file I imagine you could easily get down to 50KB.
I hope that helps anyone who wants do dive into SVGs.
Daniel @ Funny Travel Stories
I started my site when I was in Nepal, so I had no choice but to use extremely small file sizes, as anything else would take too long to upload and the internet connection would cut out before it finished. Now that I’m back in Europe, I’ve actually continued using only small-sized and highly compressed photos, mainly out of a realization that many people the world over would never get to see most of the photos were they too large.
I wouldn’t mind having larger images though, so I’ll have to try a few of your workarounds and see if they work for me.
davidmarkclements
Hi Dave,
Umm.. I have a JavaScript solution that really does prevent the image from downloading prior to selection, and it let’s you use the picture elements (or img srcset syntax) without the need for div’s etc (although it does require noscript).
https://github.com/davidmarkclements/Respondu
Just thought you’d like to know..
It does have a few dirty little secrets, but if you want to avoid the double download, you gotta do what you gotta do.
Best regards,
Dave
p.s. it’s a work in progress, but it does work across all modern browsers
Charlie Clark
SVG has been an awful long time in coming and, while I’m very much in favour of it and have been using it in web-based stuff since about 2006 I can tell you that it is far from optimised. Performance in most browsers apart from Opera was dreadful until a few years ago and you need either plugins or compatibility libraries (Raphael et al.) for Internet Explorer which I think is only adding support with version 10. Printing was often almost impossible. Also, as it’s XML-based it’s inherently inefficient – I’d love to see a JSON version which would be both smaller and faster to parse. Support of the format between authoring tools is also terrible. Try working with the same file in say Illustrator, Omnigraffle, Inkscape and DrawPlus. Nevertheless, it really is the bees knees for logos, claims, etc. and can’t be beaten for anything that gets printed – this is the big lacuna in your article: almost everything you say also applies to print media.
But I hate all the front-end only kludges for dealing with different pixel-densities. Backend-support preferably in the file-formats is essential. The “prefetching” behaviour of browsers could easily be modified by the browser makers or even put in the users’ hands. If you want small bitmaps of great quality – take a look at webp. I think mod_pagespeed now supports it if the browser does. It’s the best diet you can put your photos on.
Mykola1
re 12:41 pm on September 25, 2012 by Dave Rupert
Dave, I wonder if 99% of SVGs are exported from Illustrator as that format is quite popular with wikipedia nowadays, so whenever, say a blogger or private website owner, uses their pictures, chances are it’s a SVG, as this is handy because of the license, mostly creative commons. Private owners should outnumber web designers by far and most of wikipedia’s SVGs should be creations of open source software.
Top Web Design Company
I like your SVG suggestion. I think it provides the simplest solution.
Janghou
You’re SVG threeamigos.svg isn’t 400kb, but 140kb.
It can be served compressed like html, it’s xml after all, or even better, pre-compressed as svgz.
jeandorosh
Oh Lordie… Everything i knew was wrong))))
The more i learn – the more i see i know nothing)