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:
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.
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.
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
excellent , thanks for the advise.
Flag as inappropriateThanks for tutorial :X. Love it, simple and effective :D
Flag as inappropriateThis is the best information I have ever read distinguishing the 3 different file types. Thank you very much.
Flag as inappropriateVery useful tutorial.
Flag as inappropriateThanks
vist for basic training of photoshop
Flag as inappropriatehttp://training4free.co.cc/Basic%20training/Basic%20training.html
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 inappropriateth information giving for thx
Flag as inappropriateVery useful information! thanks for sharing
Flag as inappropriateI used to save the image in jpeg but after I read your tip, I’ll consider using png instead.
Thanks for sharing.
Flag as inappropriateThank you! It’s nice that you share useful information!
Flag as inappropriateExcellent post. Thanks25
Flag as inappropriateExcellent post. Thanks18
Flag as inappropriateExcellent post. Thanks13
Flag as inappropriateits very nice. Great post
Flag as inappropriateGreat article. Thank you.
Flag as inappropriateThank you! It’s nice that you share useful information!
Flag as inappropriateFinally! 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 inappropriateThe information u have provided us over the last 9 grades amazing
Flag as inappropriatethank 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:)
Your information is useful! Thanks for the blog!
Flag as inappropriateit is my hobbey to save my songs and vidieos, naats in my web.
Flag as inappropriateThank you for useful information. Have more to such sites!
Flag as inappropriateThis 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 inappropriateI went to your blog often. Thank you for the information!
Flag as inappropriateThe information will be useful to many. Thanks to author!
Flag as inappropriateUseful information! Thanks to author!
Flag as inappropriateCool blog! Thanks for the information. Add to favorites;)
Flag as inappropriateThanks for the information. Remarkable blog;)
Flag as inappropriateInteresting information. Thank you for sharing;)
Flag as inappropriateCan 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 inappropriatethanks sooo much, you rock!!
Flag as inappropriateHey thanx dude. I was really suffering from this problem since last 30 days. Ur explanation really helped me. God bless ya.
Flag as inappropriateGood 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 inappropriateThanks so much for this info! it really sure helps a lot for my studies. thanks again!
Flag as inappropriateWow I really learned something. Dude you’re great thank you very much!
Flag as inappropriateThis is good! good guide…
Flag as inappropriateThanks for the information! For many it will be useful and interesting!
Flag as inappropriategreat website u have there n thx for sharing,bro :)
Flag as inappropriatecorrect..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
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 inappropriateGreat information David,
Flag as inappropriatei’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).
@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 inappropriategreat work :D
Flag as inappropriateThank 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 inappropriateGreat!
Flag as inappropriateWell, 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 inappropriateSo, would it be better to save an HQ photo in PNG formant or JPEG?
What I understood is that PNG and GIF formats are better with solid colors, but they also have limited number of colors.
Flag as inappropriateOk thanks for clearing that up for me :)
Flag as inappropriateStill, it’s better to save images in png format even though it means they’ll be bigger?
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“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 inappropriateThanks 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 inappropriateexcellent 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 inappropriateGreat 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 inappropriateThanks Tyler, glad you found the explanations helpful =)
Flag as inappropriatewow very nice great explanation on how the different formats work great job!
Flag as inappropriate