Get Retina Ready, The Retro Way

retinaThe first step to becoming buzzword compliant is to remove the buzz and unpack what is real from the hype.

To be retina ready is to make the images on your website look good on devices which have a higher pixel density. That’s all.  How do you increase the pixel density of a 50×50 icon, say? Just save your original graphic as a 100px square and use CSS to cause the browser to resize it to 50px.

Could that cause the kilobytes of your images on your homepage to double, hurting your page performance? No, not double; although there will be an increase in weight if you persist in saving JPEG’s at the same level of quality. I’ve found, however, that increasing the pixel density allows me to double up the compression on JPEG, so the resulting image file sizes are actually smaller.

In the end, getting “retina ready” may have been a good thing, because it causes us to re-examine some old defaults that made sense five years ago. And, bonus: when your CSS fixes the image dimensions using percentages or em’s instead of pixels, wham your new, smaller, more beautiful images are responsive now.

That was easy.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: