Speed Up Your Website with Better Image Optimization in Photoshop

With Photoshop, are you really paying attention to how you're saving images for the web? Optimizing images can drastically decrease load times when done properly!

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!

JPG Compression Quality Comparison

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 vs .png vs .jpg compression

.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.

About the Author

David Leggett

David Leggett is a designer, developer, and builder of things. He currently resides as Director of Marketing and Design at Python Safety.

Related Articles

46 Comments

  • Nik 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.

  • Nicholas Z. Cardot 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 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 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) 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 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 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 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 Reply

    Nice article! It’s always a battle reducing file sizes yet keeping the quality. Now if only everyone had broadband.

  • David Leggett 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 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 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 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 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 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!

    • Ashish Reply

      Hard to say, but very true!
      I totally agree with you.

  • Petrina Case Atudio 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

  • Rob 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 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 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 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.

  • Nardyello Reply

    Valuable information! Thank you for sharing! :D

  • ramesh (Web Designer) 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.

  • Budgetstockphoto 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 Reply

    Thanks for this great information. i’ll try as you said to reduce loading time of my site:
    http://moogle.in

  • nitesh Reply

    thanks for such an informative post. :)

  • Keevin 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 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 Reply

    Wow!!! Nice tips Man!!! It helps my croppings effective.

    - Thanks a lot :)

  • Career Outlook Reply

    Very Useful post, I am new to designing and I found its a very useful post to me.

  • Web Design Help Reply

    Most web design and blog posting need this really. Thanks for the help.

  • WebMedia SEO Reply

    It’s a common fallacy held by many that the higher the resolution and or file size the better the quality of image. It not only applies to web images but images from digital cameras and the use they are to be put to once taken.

    It might be assumed that with the problem might have been more acute in the early days of the web before broadband was the de-facto access technology but that is also a fallacy particularly in the field of SEO.

    Google’s whole premise is search relevance and searcher satisfaction and to all intents and purposes appears to be pretty good at achieving that goal.

    As such they have indicated that page load times are factored in to the search algorithm and contribute to page rank position.

    And, with their recent announcement of the introduction of a new image format, WebP, which is said to losslessly reduce file sizes by another 25% or more, may well play an even bigger part in achieving page 1 rankings in Google.

    Time will tell as browser manufacturers take up the challenge and begin to support the new proposed format.

  • Mukund Reply

    Wonderful article! I use Yahoo Smushed Images on my blog. They help in reducing the image size without affecting the quality of the image. For more tips on increasing the blogger page speed, visit the following link: Increase Blogger Page Speed

  • Ben Reply

    I have never used the “save for web device” option before on my blog so I have a question I’m hoping soweone can help me with. What I was wondering is, should I go back over all my old posts and re-save the images and upload them again or should I not worry about all the images from the past and just make sure I save them correctly moving forward. I don’t really want to go back over every image but if I have to I will (if it is worth it I will).

    thanks in advance
    Ben

  • Steve Roy Reply

    This is actually quite helpful as I am dealing with a slow load time due to the number of images on my site.
    Thanks

  • Karan Lugani Reply

    There are various ways which includes clearing the cache , using other faster loading tools, the page content , etc. Nice post . Showed me the difference between the high and low quality images and their effect on loading of the webpage.
    Checkout Latest post on Trick Earn Blog : Shutdown Your Pc In Just 5 Seconds

  • Rajib Kumar Reply

    Nice article. I also use Yahoo Smushed Images on my blog like Mukund. I really great.

  • duncan gatawa Reply

    Hi,
    I am slowly starting to learn about how images affect the loading speed during web design.I had the habit of uploading large sized photos into my pages.I will definitely try out the tips you give above.
    Thanks

  • Placement Companies India Reply

    Image optimization is using the most compressed yet visually acceptable image in the proper file format for the specific role of the image.Optimizing images for the web is a tricky business. You have to get the right balance between file size and picture quality.

  • Jeff Ellis Reply

    I am going to use this article to help explain to my clients how to handle images on their websites. Well done!

  • Jayson Hennigan Reply

    Thanks a million! This is just what I need to familiarize myself with Image optimization. Looking forward to many interesting and helpful articles from you.

Leave a Comment on This Article