Sign In  |  Join Now Become a member to add links and start earning points!

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.

73 Comments

  1. Add point Subtract point
    Karl Bratby (1 Point) February 10, 2011 at 3:12 am

    excellent , thanks for the advise.

    Flag as inappropriate
  2. Add point Subtract point
    kenichifc (1 Point) December 12, 2010 at 8:44 am

    Thanks for tutorial :X. Love it, simple and effective :D

    Flag as inappropriate
  3. Add point Subtract point

    This is the best information I have ever read distinguishing the 3 different file types. Thank you very much.

    Flag as inappropriate
  4. Add point Subtract point
    น้ำหอมฟีโรโมน (1 Point) November 19, 2010 at 9:47 am

    Very useful tutorial.
    Thanks

    Flag as inappropriate
  5. Add point Subtract point
    khan (1 Point) May 16, 2010 at 6:13 am

    salam to all thank you for giving this information and how do make a website plz send me on my this information in my email adrees thank you (alone_prince753@yahoo.com)

    Flag as inappropriate
  6. Add point Subtract point
    khan (1 Point) May 16, 2010 at 6:11 am

    th information giving for thx

    Flag as inappropriate
  7. Add point Subtract point
    Web Design (1 Point) April 26, 2010 at 7:59 pm

    Very useful information! thanks for sharing

    Flag as inappropriate
  8. Add point Subtract point
    abanas (1 Point) April 7, 2010 at 1:29 pm

    I used to save the image in jpeg but after I read your tip, I’ll consider using png instead.

    Thanks for sharing.

    Flag as inappropriate
  9. Add point Subtract point

    Thank you! It’s nice that you share useful information!

    Flag as inappropriate
  10. Add point Subtract point
    เนื้อเพลง (1 Point) February 3, 2010 at 12:07 am

    Excellent post. Thanks25

    Flag as inappropriate
  11. Add point Subtract point
    โค้ดเพลงhi5 (1 Point) February 2, 2010 at 1:42 am

    Excellent post. Thanks18

    Flag as inappropriate
  12. Add point Subtract point
    ฟังเพลงออนไลน์ (1 Point) February 1, 2010 at 2:59 am

    Excellent post. Thanks13

    Flag as inappropriate
  13. Add point Subtract point
    โหลดเพลงใหม่ฟรี (1 Point) January 30, 2010 at 11:49 am

    its very nice. Great post

    Flag as inappropriate
  14. Add point Subtract point
    ดาวน์โหลดเพลงฟรี (1 Point) January 28, 2010 at 8:30 pm

    Great article. Thank you.

    Flag as inappropriate
  15. Add point Subtract point
    slava (0 Points) January 4, 2010 at 2:05 pm

    Thank you! It’s nice that you share useful information!

    Flag as inappropriate
  16. Add point Subtract point

    Finally! A photoshop tutorial site for beginners like me! I really liked the saving images for web tip. Didn’t notice it before. I was able to reduce the size of two images on my site to about 1/3 of its original file size without any noticeable loss in quality. Thanks again.

    Flag as inappropriate
  17. Add point Subtract point

    The information u have provided us over the last 9 grades amazing
    thank u so much for taking the time to contribute your great knowledge
    we r looking forward for the next grade
    Merry Christmas to you and thank u again for the great work u r doin:)

    Flag as inappropriate
  18. Add point Subtract point

    Your information is useful! Thanks for the blog!

    Flag as inappropriate
  19. Add point Subtract point
    imran ali soomro (1 Point) December 23, 2009 at 4:53 am

    it is my hobbey to save my songs and vidieos, naats in my web.

    Flag as inappropriate
  20. Add point Subtract point

    Thank you for useful information. Have more to such sites!

    Flag as inappropriate
  21. Add point Subtract point

    This was an excellent tutorial. But I have one question. I was recently checking out my site that I just made a custom header for with gimp.

    I looked at my header a few days ago and everything was fine. Today I looked at my site to make some changes but the header was terrible.

    The quality was horrible. It looked like a faded, badly edited picture. I don’t know what I did wrong. It was also saved in the png format.

    Any help on this would be great.

    Thanks for the tutorial again. I learned a lot.

    Flag as inappropriate
  22. Add point Subtract point

    I went to your blog often. Thank you for the information!

    Flag as inappropriate
  23. Add point Subtract point

    The information will be useful to many. Thanks to author!

    Flag as inappropriate
  24. Add point Subtract point

    Useful information! Thanks to author!

    Flag as inappropriate
  25. Add point Subtract point

    Cool blog! Thanks for the information. Add to favorites;)

    Flag as inappropriate
  26. Add point Subtract point

    Thanks for the information. Remarkable blog;)

    Flag as inappropriate
  27. Add point Subtract point

    Interesting information. Thank you for sharing;)

    Flag as inappropriate
  28. Add point Subtract point
    debbwilliams (0 Points) October 25, 2009 at 3:41 pm

    Can I add another Thank You? I am learning the process of producing photos for websites (I am launching ecommerce websites) and this tutorial will help me a lot in deciding what I need to do and when. Thank You.

    Flag as inappropriate
  29. Add point Subtract point
    tiffany Kushner (1 Point) September 22, 2009 at 3:03 am

    thanks sooo much, you rock!!

    Flag as inappropriate
  30. Add point Subtract point
    Saurabh (0 Points) August 10, 2009 at 2:02 am

    Hey thanx dude. I was really suffering from this problem since last 30 days. Ur explanation really helped me. God bless ya.

    Flag as inappropriate
  31. Add point Subtract point
    myb777 Web Design (2 Points) June 10, 2009 at 4:27 am

    Good article but you mention a couple of times that transparent is not discussed in this tutorial. How about a link to where it is discussed????

    Flag as inappropriate
  32. Add point Subtract point

    Thanks so much for this info! it really sure helps a lot for my studies. thanks again!

    Flag as inappropriate
  33. Add point Subtract point
    AztKfullHD89 (1 Point) May 6, 2009 at 2:46 am

    Wow I really learned something. Dude you’re great thank you very much!

    Flag as inappropriate
  34. Add point Subtract point
    huwaw69 (1 Point) May 3, 2009 at 4:11 am

    This is good! good guide…

    Flag as inappropriate
  35. Add point Subtract point
    Bambang (1 Point) February 9, 2009 at 9:55 pm

    great website u have there n thx for sharing,bro :)
    correct..sometimes we want to create an image that contain transparent part in it.JPEG can’t do that, I’ve always create it as .GIF file

    Flag as inappropriate
  36. Add point Subtract point
    Omar A. (1 Point) January 21, 2009 at 1:51 pm

    Thanks alot thats just an awesome tutorial i Never knew about those stuff when i was younger and used to place 1MB pics on my websites lol

    Flag as inappropriate
  37. Add point Subtract point
    kerry wilson (1 Point) October 30, 2008 at 6:44 pm

    Great information David,
    i’m in the process or redesigning my website and as a photographer i need to find the fine balance between speed and quality.
    At present my images on the site are .png but it seems i get a better result as a jpeg max size and the file is smaller than the .png.
    What are the ideal setting to reproduce a photograph on the web. (for quality).

    Flag as inappropriate
  38. Add point Subtract point

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

    Flag as inappropriate
  39. Add point Subtract point
    Mothership (1 Point) June 14, 2008 at 10:41 pm

    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.

    Flag as inappropriate
  40. Add point Subtract point

    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!

    Flag as inappropriate
  41. Add point Subtract point
    Jana (1 Point) June 9, 2008 at 6:12 am

    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?

    Flag as inappropriate
  42. Add point Subtract point

    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.

    Flag as inappropriate
  43. Add point Subtract point
    Jana (1 Point) June 8, 2008 at 8:44 am

    “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! :)

    Flag as inappropriate
  44. Add point Subtract point

    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 =)

    Flag as inappropriate
  45. Add point Subtract point
    antonwoods (1 Point) June 7, 2008 at 12:36 pm

    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 :)

    Flag as inappropriate
  46. Add point Subtract point
    CJ.H (1 Point) June 3, 2008 at 8:28 pm

    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?!

    Flag as inappropriate
  47. Add point Subtract point

    Thanks Tyler, glad you found the explanations helpful =)

    Flag as inappropriate
  48. Add point Subtract point
    Tyler Durden (1 Point) June 3, 2008 at 2:28 pm

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

    Flag as inappropriate