Compressive Images for the Responsive Web

[W]hen considering a jpeg image’s file size, the level of compression makes more of a difference than its physical dimensions. In other words, given two identical images that are displayed at the same size on a website, one can be dramatically smaller than the other in file size if it is both highly compressed and dramatically larger in dimensions than it is displayed.

http://filamentgroup.com/lab/rwd_img_compression/

If you want to display an image at 400 pixels width and 300 pixels height, saving it with those dimensions and displaying at 100% size, with a typical 90% quality jpeg compression from Photoshop, weighs 95kb.

The same image, however, saved with the dimensions 1024x768px and scaled down by the browser, with a 0 (zero!) quality jpeg compression from Photoshop, weighs 44kb!

And will then scale very well, without compression issues…

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