Speed Up Your Website with Better Image Optimization in Photoshop

Author Avatar

Author

David Leggett

Published

July 14th, 2009

Popularity

Category

Blog

Visual Design

Related Topics

34 Comments

Speed Up Website Load Time With Better Image Optimization in Photoshop

Using Photoshop’s Save for Web Feature, it’s possible to drastically decrease file sizes while keeping decent image quality, allowing for faster downloading online.

We’ve spoken at length about minimizing load time for faster user experiences and why it’s important to do so, and today I’m going to shed some light on how to optimize images in Photoshop for better web performance.

Keeping image size to a minimum is an important part of keeping your sites visual weight low. By understanding a bit about image compression, and how to optimize images for web, it’s possible to significantly cut down on image size while improving image quality.

Save For Web and Devices in Photoshop

The first key to better image optimization is adjusting choosing how you save images for the web from Photoshop. If you’re used to the typical “Save” or “Save As…” functions, it’s time to learn a new trick:

“File > Save for Web & Devices…” is what you should start using when saving images for the web. Working from this tool gives extra you much more control over image control, with previews of how an image will look after compressed. There are even fine tuning controls for advanced users.

Speed up your sites load time by saving images for the web in Photoshop

You should almost never use the typical “Save” or “Save As” option in Photoshop when an image is being used on the web. Instead, be sure to “Save for the Web” to get better control over image compression.

There are three formats we’ll be discussing in this article, and they are the three you’ll find yourself most commonly using:

.jpg – Lossy Format, great for photographs
.png (8-bit) – Lossless Compression type, limited color range
.gif – Lossless with limited color range like .png 8, but .png is usually the better choice.

There will be instances when you’ll need to use 24-bit .png (ie: it’s the only commonly supported filetype with an alpha channel for image transparency on the web), but for the purposes of this artice we will not be discussing it. It will almost always be larger than any other format given that it’s a lossless compression type that supports a wider color range.

.jpg Compression

The .jpg image format is best suited for images that have a wide range of colors where there aren’t sharp transitions or fine edges. Because of it’s compression algorithm, it works very well for Photographs. It’s possible to significantly reduce the file sizes of photographs using JPG while keeping image quality very high. Take the image below for example: There is hardly any percievable difference between the image saved at maximum quality (a close representation to the original image) and the .jpg saved at “High” (or 60%) quality. Even so, the image is nearly 1/4th the original size!

On the left is Maximum Image Quality using Save For Web in Adobe Photoshop (74.9 KB). In the middle is the same image saved at High Quality—though there is little noticeable difference at a quick glance, the file size is reduced to 19.6 KB! On right right is the same image saved at low quality, with very noticeable artifacts (6.29 KB).

With .jpg compression you have the ability to pretty freely adjust the quality in exchange for file size. With photographs, you’ll probably find 60-70% quality to work just fine. If there is text in the image, you may notice more artifacts given the sharp edges, and may have to bump up the quality.

.gif and .png Compression

The .gif and 8-bit .png image formats are better suited for images with limited color ranges (they can display up to 256 colors), where there are large areas of uniform color. In these instances, .png and .gif will usually produce a close-to-perfect representation of the original image while saving at a higher rate than .jpg. Typical uses of these formats include interface items, icons, and images where text needs to be represented accurately.

More often than not, the 8-bit .png format will compress better than .gif. Both formats support transparent pixels (Not to be confused with alpha transparency which is supported by 24-bit .png).

.gif and 8 bit .png both use lossless compression, but are restricted to a limited number of colors. These compression types will be much higher in quality, and will be far less in file size so long as the image is limited in color and there are large areas of the same color. These formats are usually great for interfaces and text where a lossy file compression like .jpg would require to be saved at much higher quality to achieve the same look (meaning larger files).

Image File Size really Adds Up

Compressing one image might cut down a little on overall page size, but if you make it a common practice to optimize images all around your website, you’ll end up saving heaps of bandwidth serving smaller files. By serving smaller files, you can make pages load faster, and make the user experience feel much more snappy.

Page load time is a huge factor in retaining users. In one recent online poll, 51% indicated that slow load times were the number one element that drove them away from a web page. Optimizing images isn’t the only way to speed up your website, but it’s a great way to start.

Join the UX Booth Community

19827 Subscribers 6459 Followers

Latest Resources

5 negative perceptions about Information Architects and how to defeat them
Information Architects often struggle to stay relevant to business clients and internal project teams due to their academic approach to achiev…
Changing User Experiences in Mass Consumer Environments
In this video I look at changing the experiences users/customers have in mass consumer environments (i.e. fast food restaurants) and the decis…
A Design Is Only As Deep As It Is Usable
There are well-known proverbs that imply (or state outright) that beauty is superficial and limited in what it can accomplish.

Submit a resource

UX Booth Community

Get Paid to Write

Contribute to UX Booth

Contribute

Contribute a guest post to UX Booth and let the community know what's important to you!

34 Comments

Nik July 14, 2009
Reply
Apologies if this appears twice but it seems to have swallowed my previous comment:
Despite common wisdom many of the clean, simple images commonly used on the web (for example the ubiquitous gradient) actually compress better as 24 bit .png than 8 bit because of 1). the way that the lossless compression algorithms work and 2.) the overhead that a colour index adds.
A 32×32 pixel image of a gradient, with 32 unique colours is 116 bytes as a 24 bit png when compressed using the most efficient technique, as shown by using pngcrush via the -brute argument and with all extraneous information removed, i.e. the gAMA chunks etc. Performing the same operation with the same image saved in 8 bits results in a 189 byte file. Even if we reduce the bit depth considerably, and use a 16×16 pixel gradient, hence only 16 unique colours, leaving only 5 bits in the colour table as opposed to 8, the 24 bit version is 100 bytes compared to 134 for the 5 bit version.
More complex images such as your paint bucket above compress better in 8 bit than 24 bit, but it is worth knowing that a large proportion of layout images compress better as 24.
I have never seen a .gif compress smaller than a .png, under any circumstances, so from a practical standpoint there is no point in using them at all, unless you require animation.
Hirvesh July 14, 2009
Reply
Nice tips, however an external image optimization tool might also help in optimizing the images :) Here’s a post I wrote about it:
http://codefusionlab.blogspot.com/2009/07/16-impressive-image-optimization-tools.html
Nicholas Z. Cardot July 14, 2009
Reply
Nice article. I use different formats based on what I am saving. I also have a plugin for Wordpress that smushes it a little bit more after I upload it to my site.
Rahul Jadhav July 14, 2009
Reply
Thanks for this informative post. I am trying hard to reduce the loading time for my blog. Will try as you have said :)
Martijn van Vreeden July 14, 2009
Reply
Such an easy quick-win. I’m surprised about the amount of sites ignoring this issue. If your not a whizz with Photoshop or want to compress in bulk, there are tons of free tools out there to do this.
Great post!
mimojito (aka Efren) July 14, 2009
Reply
I find that using the “Save As…” function instead of “Save for Web & Devices…” function provides the best image quality for all file compressions mentioned above. I will admit that the file size tends to be slightly larger; however, the warm tones keep their hex values well whilst SW&D seems to cool the colors down a bit.
Ultimately, for me, I tend to want to keep the vibrancy of the colors as close to the original as possible and am willing to sacrifice a slightly higher load time versus not getting the desired emotional effect that the original piece had intended.
Marcell July 14, 2009
Reply
Yeah whenever I create a website I try to call all of my images internally, and focus on image sizes. If your website loads fast then people when continue to come.
Thanks for the great post!
David Leggett July 14, 2009
Reply
@mimojito (aka Efren): The compression really can be much better using Save for Web, but ultimately it’s up to you. If you’re not willing to sacrifice quality, then saving by some other means might work out better. Usually, for the web at least, the quality exchange for speed won’t be noticed by users (though the speed at which your website loads will).
@Nik: Thanks for all of your great input :) I’ve had .gif’s perform better than .png from time to time, though I’m no compression expert and couldn’t make sense of why or how it happens…
You should of course never use Save for Web if you’re planning to print your images though!
Liam July 14, 2009
Reply
Always wondered why saving normally would produce a much larger jpg then save for web, with no noticeable quality differences. Why not use the save for web algorithm on the normal save?
Shawn July 14, 2009
Reply
Nice article! It’s always a battle reducing file sizes yet keeping the quality. Now if only everyone had broadband.
David Leggett July 14, 2009
Reply
@Liam: You’ll want to consider other formats and higher quality saves when you’re working on some projects (ie: print, portfolio, etc). For the web, load time is a significant factor in how a user experiences a site, and they’ll probably not notice the differences anyways so long as you have decent quality saves.
ninique July 14, 2009
Reply
@Liam Because it’s lossy. It may not show when you look at it at normal size but if you zoom in, you’ll notice the slight loss in quality. . . so if you save an image as jpg and need to reedit it. . . .well you’ll loose even more quality. This already happens if you repetitively save as jpg, even at highest quality. But if you lower it even slightly and save repetitively, it’ll show even more.
Ken Pendergast July 14, 2009
Reply
I have always used portable network graphics (.png) when I could. Adobe/Macromedia Fireworks used png or still does as its native file format.
Robin July 14, 2009
Reply
Nice explanation. And as much as I love Photoshop, there’s actually a better way to save out for the web if you have Adobe CS: use Fireworks. The compression is actually much better than Photoshop and smaller byte size. Also? a way to gracefully degrade PNGs for IE6: http://schoberg.net/2009/07/degradable-png-transparency-for-ie6/
Jesse’s got a great article on how this works.
Jemaleddin July 14, 2009
Reply
Something a lot of people don’t consider is that browser have to decode and convert compressed images into bitmaps in order to display them. This means that even if you convert a relatively large image into a small .jpg, it’s still going to take up quite a bit of RAM for the person viewing the page. For those on less capable devices (iPhones, for instance) this can be a huge problem.
Webdesigner July 15, 2009
Reply
Sorry, but any web designer how doesn’t know how to use photoshops inbuild web-optimization should stop the business and start selling shoes like Al Bundy :).
Anyway, great article!
Petrina Case Atudio July 15, 2009
Reply
Thank you for the details.
The quickest way I have used lately is just upload to PicNnik, hit optimize photo, click on ‘reduce file size’ and save. It is slick. No they do not pay me to say that.
Would appreciate any comments and what you think.
Best,
Petrina
Zamshed Farhan July 16, 2009
Reply
Very Nice ….. and Very helpfulllllll…
Rob July 16, 2009
Reply
If you are using Wordpress their is a plugin that does some basic reduction. Sorry, I forgot it’s name. I use PS
David Leggett July 16, 2009
Reply
@Rob: There are a few I’ve heard of, but none of the ones I’ve tested seem to work very well. When they do work, they often don’t compress images much more (usually 2-5% or something). This leads me to believe that savvy compressing in Photoshop from the start is a good alternative to these plugins – but hey, every bit helps for sure! Thanks for the suggestion Rob.
Conrad Chu July 22, 2009
Reply
Hi folks,
You might want to checkout http://www.punypng.com which is an image compression tool that I wrote. It’s competitive to the best tools on the web as well as on your desktop, and supports all the latest in image compression technologies.
Dimitris August 1, 2009
Reply
Nice post, but nothing special for medium level designers here. Knowing how basic compression image types work is a “must have” before going further.
Big Bright August 3, 2009
Reply
Love this project
Sereyboth August 4, 2009
Reply
Why don`t you see
http://ysereyboth.blogspot.com/2009/08/best-photoshop-tutorial-at-tutorial9net.html
Nardyello August 8, 2009
Reply
Valuable information! Thank you for sharing! :D
ramesh (Web Designer) August 17, 2009
Reply
This tutorial is really useful for every designer, as it explains complex design concepts in to a simple and eautiful manner, thank you for th e Author.
Michael Garmahis September 17, 2009
Reply
Check out ultimate guide How to Optimize Images for Web with all tools and techniques for PNG, JPEG and GIF optimization in one place. Free Photoshop action for download is included.
Budgetstockphoto September 19, 2009
Reply
Saving for the does work very well for thumbnails and preview images but one of the reason it makes file sizes so tiny is that it strips out all the metadata and colour profiles from the image, that’s fine for an icon, but if you spent time adding your own copyright data, captions, title etc so that people can locate you as the author (orphaned works act etc) this will all be stripped from the image. Remember to go back and add your copyright in the image properties (you can do it in bulk using Bridge) if you want to keep track of your image use.
neha December 21, 2009
Reply
Thanks for this great information. i’ll try as you said to reduce loading time of my site:
http://moogle.in
nitesh January 19, 2010
Reply
thanks for such an informative post. :)
Keevin March 11, 2010
Reply
Problem I have when saving for web is that my colors will change slightly. When saving I’m saving the normal way I don’t get this problem. How can this be?
Dafydd April 24, 2010
Reply
Great article. There’s a bit of an oopsie you may want to fix though; and you’re going to kick yourself! The comparison of gif/png/jpg of the three paint buckets is shown as a single png file. Any graphical differences between the file formats are instantly lost when it’s converted to png to be displayed on the blog. Instead you need three images – one gif, one png, one jpg.
Nikhil July 28, 2010
Reply
Wow!!! Nice tips Man!!! It helps my croppings effective.
- Thanks a lot :)
Career Outlook August 14, 2010
Reply
Very Useful post, I am new to designing and I found its a very useful post to me.

Trackbacks

The community is the lifeblood of UX Booth. If you enjoyed this post, please consider sharing it via a social site, or leaving a comment below. Thanks.

UX Booth