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 ArticleDaniel @ 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)