Ranting about Hi-Res images
Why is it so complicated to put responsive images in the interwebs nowadays?
I recently caught myself avoiding to put any illustrations or photos at my current website projects. Why? Because of hi-res or so called retina displays. Most of the web still surfs with good old standard more/less 72 dots per inch, but some devices just do more pixels per inch. So forget about pixel perfect design. Everything is supposed to be sharper and more beautiful. In reality i see lots of interpolated, unsharp pixel-images.
So what to do now?
Scale in the browser
This is what i do most of the time, i just have a larger image and let the browser do the heavy lifting and scale it down to the width of the parental container. This technique works for HTML images (width: 100% –height will be calculated) and CSS images (background-size:cover – for example). Only one image instance is harmed and i even don't have to care about pixel perfection or resolution at all. Progressive jpegs can help here to save bandwidth. But the big downside is that the browser needs to the heavy lifting and render the sub pixels, this can really slow down the performance.
Multiple image versions
Seriously? No! I might consider it, with a standard <picture> element supporting multiple resolutions, but nowadays with different implementations for CSS and HTML images and Javascript polyfills? No way, i am just too lazy.
SVG
Yes, vector graphics are scalable by definition and have a great browser support. Vector images also support the current flat design trend: only simple shapes, no textures, no complex stuff. And on top of that SVG really sucks browser performance.
Icon Fonts
I can also put my very flat one color graphics in a font and then use the font instead. Performance is better, possibilities are even more limited and this is a really dirty hack.
