Tutorial9 - Tutorial Bliss.

Saving Images for the Web

When saving for the web, it’s always important to consider the quality of the image, and the size of the image in order to provide visual clarity without slowing performance. This tutorial will teach you what you need to know about saving images for the web.

Saving Images for the Web

The internet is probably one of the largest mediums for distributing art, graphics, and photographs nowadays, making it very important to have some basic knowledge on saving media for the web. Essentially, saving for the web is a balancing act — you must balance the quality of the graphic and the file size of the media to suit your personal needs.

In a place where speed is important (ie: quick loading websites), you may need to sacrifice some quality of a graphic. Where quality is important, you may need to sacrifice some speed. This lesson aims to show you ways in which you can balance these two factors, and at the same time produce terrific image quality.

Lossless vs. Lossy Data

Although there are many different image formats out there (JPEG, GIF, and PNG to name a few), all images can be further divided into two separate categories of compression: Lossless and Lossy. Lossless data compression allows media to be represented without any loss in quality or information, while Lossy data compression may result in a loss of quality and information.

The most common Lossless media types in Graphic Design include GIF, PNG, and TIFF, while JPEG is the most common of Lossy graphic media.

How to Save for Web in Photoshop

Adobe Photoshop has a great way to optimize images for the web. In Photoshop, go to File > Save For Web, or click Ctrl + Alt + Shift + S.

A new box will popup with all of the settings for saving and optimizing an image for the web:

Save for Web in Photoshop

I’ll walk you through using the settings shown here in some real life examples below.

Saving Photographs for the Web

Photographs are almost always required to be saved as a lossy data type due to their huge filesize. Even when taking a picture, camera’s tend to save the photo as a compressed filetype (JPEG) versus the RAW format, which can be exponentially larger in filesize.

The usual preferred file type of photographs is JPEG, which is named after its creators, the “Joint Photographic Experts Group“. The reason why jpeg has become the standard is due to its ability to compress image data while at the same time being able to retain high quality and closely resemble lossless images (in regards to information).

There are several Save For Web Presets that you can choose when saving photographs. For a photograph, you should consider using JPEG Low, JPEG Medium, or JPEG High. See the graphical comparison below to see how well an example photo is compressed without a huge loss in quality. Compared to the original photograph, which is over 250 KB, we can get a reasonable quality photo using Medium quality or High quality compression presets that are less than 30 KB in file size.

Comparison of JPEG compression presets

GIF Images

Sometimes, you’ll be required to save in a lossless format in order to best optimize your graphics for whatever you are working on. This is often seen in website design, as layouts often use far less colors than an ordinary photograph.

GIF, or Graphics Interchange Format, is an image format that uses a palette of up to 256 individual colors, making it a great candidate for web graphics that don’t use a wide range of colors. GIF can also set single pixels to be transparent, which we will not be discussing in this tutorial. The comparison below shows a GIF image (using all 256 colors) and a jpeg comparison, both at about the exact same filesize. The lossless GIF graphic resembles the original image much better as you can see.

GIF vs. JPEG compression

Because GIF images have a limited palette of 256 colors, they should almost never be used for Photographs, but they are excellent for graphics that use solid colors, or a limited number of colors. For Photographs, either JPEG compression, or the PNG Lossless format should typically be used.

High Quality Images & Lossless PNG

PNG, or Portable Network Graphics, are lossless data formats, similar to GIF, except they support a much greater number of colors (also making them larger in some cases), and can support alpha transparency channels as opposed to single transparent pixels (again, we won’t be discussing transparency in this tutorial).

PNG images are replacing GIF images more and more, mostly because they are typically able to compress better than GIF images while supporting a much larger number of colors. They are not as widely supported as GIF images yet, but are certainly heading in that direction.

For graphics that must be transported over the web while retaining full image quality, PNG is the prime choice. You’ll typically result in a larger image size than JPEG when transporting photos, but at times, this can be an essential sacrifice. Typically PNG is the better choice when a graphic contains sharp lines, or text that must remain very clear, but it’s ultimately up to the designer to decide what format to choose.

18 Comments

  1. Reply to this comment
    Tyler Durden

    wow very nice great explanation on how the different formats work great job!

  2. Reply to this comment
    David Leggett

    Thanks Tyler, glad you found the explanations helpful =)

  3. Reply to this comment
    CJ.H

    Great explanations, I still prefer PNG above all though. Being able to save transparencies is very nice, and I only use GIF’s for short animations.

    Do you know when that retro wallpaper tutorial is going to come up?

    PS randomness: The bottom of your site is the best looking, why is it on the bottom?!

  4. Reply to this comment
    antonwoods

    excellent tutorial david, i often use max quality for my projects just so they “look” good, but after reading the tutorial i tried high quality which made a big difference for the loading time of my new project and you still can barely see the difference from max quality and high quality and its something i should recommend for any designers out there, use high quality as your compressing rate :) makes a big difference!

    Keep it up :)

  5. Reply to this comment
    David Leggett

    Thanks antonwoods and CJ.H =)

    @ CJ.H - The footer made the most sense at the bottom :P We seem to have a tenancy of reinventing the layout every now and then, so you might see some slight changes eventually, but I think the header serves its purpose fairly well for now =)

  6. Reply to this comment
    Jana

    “while Lossy data compression may result in a loss of quality and information.”

    “while JPEG is the most common of Lossy graphic media.”

    “The reason why jpeg has become the standard is due to its ability to compress image data while at the same time being able to retain high quality and closely resemble lossless images (in regards to information).”

    Doesn’t these parts speak against themselves?

    Other than, that this was very useful for me as I didn’t know any of this! :)

  7. Reply to this comment
    David Leggett

    Not really Jana — Like I mentioned in the tutorial, it’s all a balance of compression and quality when you’re saving for the web. Yes, you’re going to lose SOME quality when you’re using the JPEG format, but you can compress it, and retain most of its visual quality at the same time, making it the standard for compressing photos online.

  8. Reply to this comment
    Jana

    Ok thanks for clearing that up for me :)
    Still, it’s better to save images in png format even though it means they’ll be bigger?

  9. Reply to this comment
    David Leggett

    Well, it depends on the situation. You’re right that the image quality will be better in PNG format, since it is a lossless format. Given PNG vs. GIF, PNG will actually be a better format to save in sometimes because it can save at lower file sizes (usually).

    If you’re saving an image for the web though, and it’s not of absolute importance that the image is 100% perfect, you probably should not use PNG. As a quick example, if I were to save all the Graphics that make up the look of Tutorial9 as perfect, lossless PNG graphics, pages would probably take 3 or 4 times longer to load. Since I’ve saved the graphics as compressed JPEG’s and tiny GIF’s and PNG’s (for the solid colors where they perform better), the page loads quickly for everyone!

  10. Reply to this comment
    Mothership

    Thank you David.

    There are also several useful tools available for Windows and OS X (and I presume linux, even though I am not familiar with them) that compress PNG files to their minimum size. The one I use is a dashboard widget PNGPong (http://www.plasticvicar.com/PNGpong/) which is simply drag and drop, and takes about 5 seconds. Recommended.

  11. Reply to this comment
    David Leggett

    @Mothership: I’d say such tools are definitely a good choice for 99.9% of the viewers out there. The one area in which I would recommend using Photoshop’s Save for Web feature over anything else - is when you absolutely, positively MUST have an image meet certain requirements. It’s especially useful in designing websites where balance between quality and size is of upmost importance.

Leave a Reply

Trackbacks

  1. Simple Grafix » Blog Archive » Last Week on T9 (6/8/08)
  2. 20 Excellent Photoshop Tutorials for Web Designers | Design Reviver
  3. Tutoriales photoshop « LaCARPETA
  4. Sideburnr » Blog Archive » 20 Excellent Photoshop Tutorials for Web Designers
  5. Tutoriales para Diseñadores Web | XeroBlog - Blogging - SEO - Consejos y Recursos para Bloggers