Near and dear to my heart is the topic of "web image
optimization". But the poet in me would rather call it "judicious
beauty".
In web jargon, all of the image files (and others CSS,
HTML, etc) that go into making a web page, when their file sizes are
summed together, is called the "pageweight". It's usually expressed in
"K"s. Such as 100K. But today's web, 1MB has become the new average
pageweight. In my opinion, heavy pages are sloppy design practice. But
pages have been getting heavier and heavier since the web was born. And
most of that is image files.
If you put too much beauty
(decoration) into a site, it becomes bloated and heavy. It then takes
too long to load the page in the browser. If it takes longer than 10
seconds, the page will most likely be abandoned before people even see
how beautiful it is. Speed is the first barrier visitors must cross. The
expectation today is under a 2-second load time.
Web images are
usually JPEG and GIF images. More and more PNG images are starting to
appear. I'm not a fan of PNG unless you really know how to properly
prepare them as they do not necessarily produce smaller image files.
The
JPEG and GIFs should be optimized. Using "smushit" by Yahoo Yslow addon
for either Firefox or Chrome are best. But they do not always produce
the best file sizes. This I know from much experimentation.
Your
best procedure is to use either Photoshop "save for web..." function or
the same function in The Gimp. The Gimp requires installing extra
addons to get "save for web". It's very easy to do and I've found it
gives great results. After doing this, then run the now compressed
images through Yslow Smushit and see if there is any further
improvement. You'll find that about a third of the files cannot be
compressed any more. Yslow smush.it converts to PNGs best. It will
reduce files by 10 to 30% typically. It automatically converts and
renames GIF and JPEGs by appending a .PNG extension to the original file
name. That way you won't accidentally overwrite your original.
How much compression is best?
The
answer to this depends upon how dominant the image is on the page.
Generally a compression setting for JPEGs of 70 is best. There is no
visible difference to the human eye (except on magnified inspection.)
For really small images like thumbnails, push the compression to 50. And
for large backgrounds try and get down to 30 or less.
The nature
of the image will produce surprisingly different results. For example
an image of blue sky with fluffy clouds that is full screen can be
compressed dramatically because of the lack of no hard edges. Knowing
these kind of things can help you develop a "strategy" to balance beauty
versus speed. Experimentation is a fast teacher.
Helpful Links:
Four Reasons Why to Optimize Web Graphics
Response Times: The 3 Important Limits
Lastly,
it's shown site visitor do not care as much about image quality as you
the creative talent do. So alway leaning to the side of "smaller and
lighter" is best. Slow loading pages are much more irritating than you'd ever guess. Some people actually list slow pages as the MOST
frustrating part of their day.
IBM and Apple recommend pageweights of 20K to 25K for mobile pages. That is tiny. It can be done.
For an example of what can be done in just 25K, visit my experimental website http://www.pagepipe.com/
No comments:
Post a Comment