The Comprehensive Guide to Saving Images for the Web

Feb 22 2010 by Joshua Johnson | 64 Comments

On the surface, saving images for the web can be a pretty straightforward process. However, if you dig deeper there’s a wealth of information and techniques you might be missing out on.

This article will focus primarily on the diverse features of Photoshop’s “Save for Web & Devices” command along with some best practices related to saving images that are optimized for web use. We’ll start extremely basic for all the beginners, but there will be plenty of advanced information for the seasoned veterans as we progress.

The Comprehensive Guide to Saving Images for the Web

Before the Save

Preparing images for the web doesn’t start at saving. It’s a good idea to check out a few things before you go into the Save for Web dialog.

First, you’ll want to have a look at your image mode. When designing for the web or any other on-screen media, you’ll want to make sure your images are formatted in RGB. Traditionally, CMYK is reserved for print. This is because there is a fundamental difference between creating colors with light vs. simulating colors with ink. While printers use tiny dots containing only one of four colors (Cyan, Magenta, Yellow or Black) to create the illusion of other colors, screens are capable of producing millions of colors.

Furthermore, RGB is an additive system, meaning the result of greater amounts of color is white. Conversely, CMYK is a subtractive system, meaning the lack of any color is white (the color of most paper) and colors are added to approach black. Additive systems are capable of producing much brighter colors across a wider spectrum.

The key information here is that for on-screen graphics, you can’t beat an RGB image.

Keep this in mind at the very start of a project, especially if you’re creating web graphics with Photoshop. Starting in an RGB workspace is far better than working with CMYK and converting later, which can create mottled gradients and muted colors. Photoshop’s Save for Web command will automatically convert CMYK images to the appropriate color system based on your choices in the dialog, but you’ll definitely want to know and consider the original color mode of the image before you even enter the dialog. If you don’t know the color mode of a given image, look in the menu bar under Image > Mode.

The second thing you’ll want to consider is the size of the original image. If your image is too large, hitting “Save for Web” will give you this warning:

The Comprehensive Guide to Saving Images for the Web

Essentially, Photoshop is telling you that your image is not only way too big for most web uses, but is also larger than the Save for Web command was created to handle. If you click “proceed” Photoshop will in fact go through with the save. However, the dialog and included commands can be painfully sluggish due to the size of the file, depending on your computer system resources. It’s a good idea to downsize large files before entering the Save for Web dialog to prevent any problems.

Entering the Save for Web Dialog

Once you have your color mode and image size all squared away, hit Cmd/Ctrl + Shift + Alt + S on your keyboard to bring up the Save for Web & Devices dialog.

Entering the Save for Web Dialog

If you’re not familiar with this dialog, it can look a bit overwhelming at first. In fact, even if you’re a time-tested Photoshop professional but don’t possess CS4, things are going to look a bit different as Adobe has completely redesigned this menu.

Everything in here is important, but you’ll find there are a few key features that you will use most often, highlighted below.

Entering the Save for Web Dialog

Image Size

In the bottom right of the window, you should see a section labeled “Image Size”. This section is pretty straightforward and works just like it did in previous versions of Photoshop.

Entering the Save for Web Dialog

You can choose to set the dimensions using either pixel height/width or by simply typing what percent of the original size you want your image to be. As you adjust these numbers, pay attention to your image preview as it will update to reflect the changes.

Resampling Quality

The most complicated part of this section is the Quality drop down menu. If you open it up, you’ll see that you have the choice of selecting Nearest Neighbor, Bilinear, Bicubic, Bicubic Smoother, or Bicubic Sharper. Each of these reflects a different method of pixel interpolation.

Resizing an image with only basic interpolation simply enlarges/reduces the pixel data and can produce some pretty ugly results. To prevent this, Photoshop attempts to manipulate the way the pixels are interpreted as the size of the image changes.

Unfortunately, there is no best solution for every image and Photoshop isn’t smart enough to decide which mode is best for a given image. By default, Bicubic is selected. This is generally good enough for most beginners and is in fact the most complex method. However, if you really want to learn to maximize your output, check out the brief explanations of the pros and cons of each method below.

Nearest Neighbor: This setting is the most basic interpolation mode and seeks to preserve the hard edges in an image by simply enlarging or reducing the pixel data as mentioned above. This may be good if your image doesn’t contain many gradients but will produce an over-aliased, pixelated image if you are significantly changing the size.

Bilinear: Slightly more intelligent than Nearest Neighbor and uses a weighted average of the 4 nearest pixels to increase the number of pixels. This method produces an anti-aliasing effect which eliminates harsh pixelated edges but can produce a blurry image as a result.

Bicubic: Bicubic is the most complicated method and samples from the nearest 16 pixels. As with bilinear, this method results in anti-aliasing to keep out any unwanted artifacts.

There are three versions of the Bicubic method in Photoshop: Bicubic, Bicubic Smoother and Bicubic Shaper. To get a hint for when to use each, we’ll look to another part of Photoshop. Close the Save for Web dialog and go the menu bar under Image > Size > Image Size. Now look under the “resample” dropdown menu and you’ll find some familiar options.

Entering the Save for Web Dialog

This time we see that each option (except Bilinear) comes with a little tip regarding when to use it. We can now see that each Bicubic option has a strength: Bicubic is best for creating smooth gradients, Bicubic Smoother is best for enlargement and Bicubic Sharper is best for reduction.

Always keep these tips in mind when resizing images within the Save for Web dialog. However, don’t blindly follow them without examining the results of each to decide which option is best for a particular image.

File Type and Image Quality

Near the top right of the window you’ll find the settings to choose which type of file you want to output along with various options pertaining to the quality of the output.

Entering the Save for Web Dialog

As you adjust these settings, you’ll obviously want to keep an eye on your image preview, but just as important as the way the image looks is the information directly under the preview pertaining to the image size and approximate load time.

Entering the Save for Web Dialog

Remember that there is always a trade-off between quality and file size. As a beginner, you may be tempted to choose quality over size and shoot for the maximum, but this is a big mistake that can cause your sites to load painfully slow. As you can see in the images above, by default my file size is coming in at nearly 1.3 MB. This is much larger than is preferable for most web images. With only a few size and quality adjustments, I can easily knock this down to around 20 KB (a much more preferable size).

File Type Options

There are three main file types we’ll want to focus on for saving images optimized for the web: GIF, JPG and PNG. Each file type has its own strengths and weaknesses and it is very important to know and keep these in mind when saving an image. We’ll start with the most complicated: GIF.

Entering the Save for Web Dialog

Working with GIFs

GIFs are popular for simple web-based graphics because of their relatively low file size. However, GIFs are restricted to a mere 256 colors and should therefore be used very selectively. Many designers will point out that photographs should not be saved as GIFs because of the millions of colors necessary to recreate a “real life” scene. This is definitely correct but does not give you the freedom to use a GIF on all non-photographic elements. For instance, the “six revisions” graphic that we’ve been using thus far was created in Photoshop and is therefore non-photographic, but it is still a very poor candidate for a GIF file. Check out the close up below of the text highlight using GIF compression:

Entering the Save for Web Dialog

As you can see, even with the highest number of colors enabled, the gradient from white out to red is pretty mottled. However, this definitely does not eliminate GIF as a useful file format. There are plenty of times when you’ll save an image such as a logo that may only have a few colors in it. Anything with large areas of solid color and very minimal gradients should look great as a GIF. For instance, if our image were changed to look more like the one below, we’d have a lot more freedom over which file type to use.

Entering the Save for Web Dialog

As you can see, the above image is fairly simple and shouldn’t even require the full 256 available colors. With GIF selected as the file type in the Save for Web dialog, you’ll have several options for how many colors you want to use ranging from 2 to 256.

Entering the Save for Web Dialog

Obviously, 2 colors is far too few to create a nice image. However, 256 looks a bit like overkill because our 16 color version is coming in so nice. This version comes it at a mere 7K while a JPG of similar quality would push us up to more than double that at 16K.

Other ways to reduce the file size of a GIF include reducing or eliminating any dither, adjusting the color palette settings (perceptual, adaptive, etc) and increasing the lossy compression. It would take at several more paragraphs to do these options justice so I’ll just encourage you to adjust these settings while watching the file quality and size to attempt to find an ideal result.

Working with JPGs

As I mentioned before, JPGs are going to be your best bet when working with photographs or graphics containing complex effects like shadows, gradients, etc. Because of the wide range of colors available in a JPG, you don’t have to worry about selecting a color palette. This just leaves the basic quality settings to adjust.

To adjust the image quality, either use the “Quality” slider on the right, or the present dropdown on the left (ranging from low to maximum). Again, remember to keep an eye of both your image preview and file size as you sample different settings. As you can see in the image below, there’s a wide gamut of quality between the lowest and highest settings.

Entering the Save for Web Dialog

Notice that as the quality decreases, it’s not just the hard edges that suffer but also the gradients as well. The graceful degradation from one color to another becomes a sloppy mess with clearly identifiable steps of color. However, at the largest size we’re pushing 90K, which is a bit unnecessary for this small image. You’ll find that the best solution is almost always somewhere between the lowest and highest settings. Try to find the lowest quality setting that doesn’t significantly degrade the finer visual details of your image.

Tip: By increasing the “Blur” option when saving a JPG, you can reduce file the size. However, only do this to the degree that it doesn’t significantly degrade the quality of your image.

Working with PNGs

Photoshop gives you two options when working with PNGs: PNG-8 and PNG-24. If you bring up the PNG-8 options, you’ll see that they are very similar to the options we saw for GIFs. Again we are back to choosing the number of colors up to a maximum of 256. This means that PNG-8 is limited to the same types of simple files that you would use for GIFs. Sometimes using a PNG-8 over a GIF can give you a smaller file size at a nearly identical quality. It’s best to experiment with both to see which provides a better result

PNG-24 on the other hand, provides a much higher quality image. PNG-24s retain much of the original PSD image quality and can handle transparency much better than a GIF.

Entering the Save for Web Dialog

As you can see in the image above, the shadow quality is fairly high and would look just fine dropped onto a solid background in an HTML file. However, there are two big downsides to using PNGs. The first is file size; notice that for the 550px wide PNG above the file size in 40.9K. This isn’t too bad for most modern internet connections but it’s a lot larger than an equivalent JPG or GIF and can really bog down a web page with a lot of images. The final and even more serious downside of using transparent PNGs is that they are not supported by all major web browsers. Nearly every professional web designer is aware of this and either ignores it in defiance of all users who won’t update their browsers, avoids using PNGs altogether, or comes up with clever hacks to trick browsers such as IE6 into submission. No matter which method you choose to live by, be sure to make an informed decision before leaving behind any visitors. If you already have a site, use Google Analytics or some equivalent to track the percentage of visitors you’re getting with browsers that don’t support PNGs. This allows you to make the best decision to cater to your current user base.

View Modes

By now you may be feeling a bit overwhelmed with the number of options available for saving images for the web. You might be thinking that switching between various options is too time intensive and that comparing those options accurately is nearly impossible without saving out a version of each. Fortunately, Photoshop eases these concerns by allowing you to see multiple options at the same time. In the top left corner of the Save for Web dialog, you’ll notice 4 tabs labeled Original, Optimized, 2-Up and 4-Up. These are often overlooked by designers but are extremely helpful in deciding on the optimized settings for a given image.

Original and Optimized

Viewing both the Original and Optimized tabs will give you a single image preview. The principal difference is that Original allows you to see the unaltered PSD while Optimized lets you see what the image will look like after it is saved with the current setting.

2-Up and 4-Up

These two tabs make saving images for the web a lot easier by allowing you to experiment with different options without losing settings. They both work exactly the same way and differ only in how many options you get to experiment with.

Entering the Save for Web Dialog

Entering the Save for Web Dialog

Each preview shows you the file type, size, quality and approximate loading time of the image with the settings pertaining to that selection. If you select a preview by clicking on it, you can change its settings on the right by using all of the methods discussed above. Then you can select another preview and change its settings for a quick visual comparison. You can compare across file types (JPG, PNG, GIF, etc) or within a given file type and limit the variation to quality settings. If you’re doing the latter, Photoshop can automate the task by automatically populating each window with a different setting so you can see which direction you want to go.

Entering the Save for Web Dialog

First select the type of file you think you’ll need, for instance: JPG. Then follow the picture above to locate the dropdown at the very top right of the Save for Web window. Click on this and go down to “Repopulate Views.” This will automatically fill each view with a JPG containing various quality settings. Just find the one with the most acceptable image clarity and file size and tweak the settings until you’re satisfied. This method makes it much easier for beginners to get a feel for the settings without spending a lot of time digging through them one at a time.

Working with Slices

Entering the Save for Web Dialog

Web designers that handle most of the initial layout in Photoshop usually work in one of two ways. They either pull images out of the layout and crop/save them individually, or they use Photoshop’s built-in slicing tools to select and save different parts of the image.

If you’re the type of designer that frequently use slices, there area a lot of options in the Save for Web dialog to speed up your workflow. Using the Slice Select Tool (C), found in the upper left, you can select individual slices to work with (hold shift to select multiple slices). Using this method, you can change the settings of each slice. This means if you want your header image to be a GIF but your footer to be a JPG, it’s as easy as selecting each slice and assigning a file type. After you’re done, hit the “Save” button to bring up the save dialog. Here you can decide if you want to save all the slices in your image as individual files or just those that you have selected. Exporting all slices at once allows you to accomplish the feat of collecting all the images you need from your PSD layout in a single step. This can save you loads of time if you’re working with a complex site design.

Outputting HTML

The final feature we’ll discuss is using the Save for Web dialog in conjunction with slices to output an actual HTML file. To begin, slice up your PSD and bring up the Save for Web dialog. After you get the settings you want for each slice, go back to that dropdown in the very top right of the window and click on “Edit Output Settings.”

Entering the Save for Web Dialog

This should bring up a window that gives you options to adjust the settings for HTML, Slices, Background, and Saving Files. Using these options you can adjust whether you want to output XHMTL, what color you want your background to be, what naming convention you want to use, etc. Most of these options are pretty straightforward and don’t require further explanation but I will recommend though that you select “Generate CSS” instead of “Generate Table” under the Slices menu. Unless you are actually trying to create a table, modern web standards discourage using tables to generate a web page layout.

Entering the Save for Web Dialog

Finally, to export your sliced PSD as an HTML document, hit “Save” and select the option to export “HTML and Images.” Don’t expect to use this method to build an entire website in Photoshop. It’s simply meant to aid the process of exporting the images and marking them up in HTML. If you do most of the layout in Photoshop anyway, using the export HTML option can save you a lot of time setting up the initial HTML file. The downside is that there will be plenty of clean up to do to organize the code in your preferred manner. Consequently, most seasoned coders will prefer to skip this method entirely and code from scratch, but I encourage you to experiment with it to see if you can improve your workflow in any way.

Conclusion

The information above is more than enough to start you on your way to becoming a Save for Web guru. I hope you’ve learned a thing or two you didn’t know about Photoshop’s “Save for Web & Devices” dialog. Use the comment section below to let us know what you thought of the article. Also, there’s actually still plenty more to the dialog that we didn’t go over so feel free to point out any features that you use regularly that weren’t mentioned above.

Related Content

About the Author

Joshua Johnson is a Graphic Designer/Web Designer with over six years of experience working with a major international marketing agency. He is also the Editor of Design Shack, a web design and development blog. Check out his recent work and follow him on Twitter: @secondfret.

64 Comments

George

February 22nd, 2010

No comment on the feature to convert to sRGB? There seems to be some disagreement within the web design community when it comes to that. Thoughts?

Viktor

February 22nd, 2010

Great tutorial! Thank you!

Ilia

February 22nd, 2010

This is a great breakdown of the basics of saving images for web. I think it’s also worth mentioning the ability to use a mask to control compression of JPEG images. Also, typically, same image saved as PNG-8 will be slightly smaller than if it were saved as GIF.

Matthew Heidenreich

February 22nd, 2010

great article. I have always used this option, but never looked at it this in depth.

Ana Buigues

February 22nd, 2010

The post I have been very helpful, thank you for share

paul

February 22nd, 2010

very useful and well explained, I use PNG 24 a lot, maybe too much so I’ll try experimenting with other formats / settings. Aren’t there any formats / settings that you can recommend for typical web design scenarios?

Bertrand

February 22nd, 2010

Great article for the beginners!

A tip maybe for the designers that want to be more objective when it’s time to export JPEGs: the blind test. Set your view setup to 4 frames and set them to 100-80-60-40 quality. Pick the two best results, and slim down your choices (pick 80-60 as an example) and redistribute the values in between around those (ex. 80-70-60). The important point here is not to look at the values choosen when you pick the image as this will influence your choice. You’ll then find yourself most of the time saving KBs off some images.

Michael Mior

February 22nd, 2010

I also like to run all my images through jpegoptim (http://www.kokkonen.net/tjko/projects.html) or pngcrush (http://pmt.sourceforge.net/pngcrush) depending on the file type. For those unfamiliar with these utilities, they optimize the way the images are compressed without changing the quality, allowing for a reduction in size.

When using a good editor like Photoshop, the size reduction usually isn’t very significant (~5%) but I’ve seen results over 50% in some cases.

In any case, squeezing a few extra bites out of your images never hurts.

Boris

February 22nd, 2010

Nice article!

But it should be noticed as well that the image file size(s) created by PS are (much) bigger compared to other applikations (like Fireworks, Gimp etc.).

A good and free tool to optimize images saved by PhotoShop is e.g. ImageOptim (available for all OSes). :-)

John

February 22nd, 2010

Very nice read and what a great timing. I was just looking for this and couldn’t find anything this comprehensive, thanks!

Zach

February 22nd, 2010

Great post. It is always great to brush up on the details that make a website run smoothly.

Greg

February 22nd, 2010

Good article. I’m sure plenty of people don’t use “Save for Web & Devices” for whatever reason… this should help out a lot of people!

Jon

February 22nd, 2010

Great guide! Excellent info for newbies and refresher for pros.

Aidan

February 22nd, 2010

Great information. It’s always a good habit to optimize our images.

curtismchale

February 22nd, 2010

While I would agree that we have covered saving images for web out of Photoshop you haven’t addressed the fact that there is often a lot of space that can be saved by further compressing the images with something like Smushit. Each of the images will still have saved information like the date it was taken or created which is entirely extraneous for web use and should be stripped from the images before a site goes live.

Further only Photoshop has been covered. While I’m not a Fireworks user it does seem to have much better algorithms for compressing images for the web.

I suppose I sound like a complainer now but this really isn’t a comprehensive article on the subject as suggested by the title as it only covers the Photoshop side of the topic.

cssclassic

February 22nd, 2010

Nice articles , Please do more like this

Joe

February 22nd, 2010

This is a really helpful post, although there are many good ways to optimise images for the web using fireworks.

Is this such a big issue now as internet speeds increase?

thanks

spike

February 22nd, 2010

A tutorial about saving images for the Web that does not cover color space and profile issues? What good is that?

mike

February 22nd, 2010

Hi, just wanted to mention that copy and pasting to Dreamweaver uses the Fireworks image engine. This will save you KB over the Photoshop outputs any day of the week. I don’t know why the two products don’t have the same engine.

Jacob Guite-St-Pierre

February 22nd, 2010

I haven’t read Six Revisions is a while, mostly because I’ve been too busy, but I loved this article. I forwarded it to all my designers.

valiant

February 22nd, 2010

Hey! I really enjoyed this article. It’s a comprehensive guide, missing some things (as you said), but covering the main areas. Thanks for writing it c: I need to send it to my “save everything as png-24″ friends, haha!

marianney

February 22nd, 2010

Great article. Can you do a Part II that covers the file type options in more depth? That has always been the part that confuses me the most. :)

Gaston

February 22nd, 2010

A great post. But I’ve got a simpler approach.

I bought Acorn and just use it’s simple dialog. It’s fantastic the way it optimizes images.

Shaan

February 22nd, 2010

Wonderful article!

CyberFox

February 23rd, 2010

Very Useful Article. Thanks.

Indialike

February 23rd, 2010

Very nice and useful tutorials for web designers,
Thanks for posting.

Rob

February 23rd, 2010

Awesome! Thanks!

Monie

February 23rd, 2010

Great tips. Now I don’t need any third party image compression tools :)

Anonymous

February 23rd, 2010

Redundant, we don’t live in the 00s any more where we needed to slice off ever byte we could find.

Ctrl+Shift+A -> .jpg, 69 quality. Done.

Maverick

February 23rd, 2010

not at all insightful. all the time Joshua just said that compare the results before saving… that is what even a child would say. no real tips as such.

eno

February 23rd, 2010

Nice article but it would have been interesting to have more info about the color profiles and srgb options. That’s the part I’m struggling the most with ! The other day at work I saved some PNG’s to use as backgrounds and JPEG’s that would sit on top and the colors were always different, no matter the options. I ended up tweaking my Mac color settings haha

Divyang Patel

February 23rd, 2010

I used to use the Save for Web option for my blog, but now I know the tweaks and options to use it more precisely. Nice work Joshua.

Jordan Walker

February 23rd, 2010

Very helpful and informative. Thanks.

DesignerDad

February 23rd, 2010

Thankfully it’s becoming less and less of an issue, but it’s only PNG24 alpha transparency that isn’t supported by IE6. Transparency with PNG8 will work fine, albeit of lesser quality.

Cairns Web

February 23rd, 2010

Thanks for the article, I have been using photoshop to save images for years and still learnt a few things, this would be a great article for graphic designers to read if they venture into web design.

Chris

February 23rd, 2010

Would be interesting to see some information on colour settings, commonly how colours can look different in the browser to what it looks like in Photoshop. I know I’ve spent ages in the past tearing my hair out to get the colours to match.

Michael Mior

February 23rd, 2010

Certainly shaving bytes isn’t as important for users. If I’m downloading at 50Mbps, I don’t care if an image is 50 or 60KB. But it makes a huge difference for servers. If I have 1,000 visitors to my site every day downloading an image. That 10KB multiplies to 10MB. Over a month, that adds up to 300MB. If you have a lot of images on your site, this can add up quickly. If you’re paying for bandwidth, it’s a worthwhile concern.

Stoyan

February 23rd, 2010

Just a few notes on PNG.

1. PNG8 is smaller than GIF – always, except when the image is 2-3 colors. In fact if you convert all GIFs on the web to PNG8 you’ll save the planet above 23% bandwidth (based on a study of about 2000 random images).

2. PNG24 shouldn’t be compared with GIF when it comes to size because it’s simply a different format (more than 256 colors, alpha transparency, etc)

3. All modern browsers support PNG. IE6 and alpha transparent PNG24 is the only problem. But there are solutions. And hey, youtube and google are dropping IE6 :)

4. PNG8 supports alpha transparency. W00t! Yes, it does, although photoshop doesn’t. You need Fireworks to benefit from this feature.

There’s no point to use GIF, never ever again :) If you think you need a GIF, you actually need PNG8, it’s smaller.

http://www.phpied.com/give-png-a-chance/

shoaib hussain

February 23rd, 2010

this is really interesting,I had sometime to kill ,and as a matter of fact after going through this nice and comprehensive guide ,I even made good use of my time.thnx a lot

Dayday

February 23rd, 2010

ha! I am one of those that defy the lack of support of png transparency in ie, very funny to hear it mentioned. Although pretty standard stuff this guide is extremely thorough. Thanks.

Geoff Franklin

February 24th, 2010

Great post, Joshua!
I knew about those file formats already, and have been using them accordingly when called for.
I always overlooked the “Save for Web” feature – pretty nifty now that you put it like that.
Thanks for the detailed breakdown :)

Ian

February 25th, 2010

Even better, use Fireworks. It deals with saving to the web a lot better and you’ll have smaller files.

Jordan

February 25th, 2010

What I’d like to see is an article covering the “save for web color shift”. That’s been debated over and over again and I don’t know if I’ve ever read an article that comes to a concrete solution (if there is one, someone please let me know!).

http://bit.ly/dmJWmC

And here’s an article from http://www.viget.com that stirred up some controversy.

http://bit.ly/3mWeTv

Heidi

February 26th, 2010

Dear Joshua

Thanks for the tutorial – its really great. But Im in need for time right now. Do you know if its possible to make the images smaller. I have about 40 pictures that I have to decrease in size – and I cannot start all over. Perhaps some kind of program can do it for me? All pictures are 100 + KB and I need them to be about 20. Help – anyone? Best regards Heidi, scarfbyscarf.com

Kaushik

February 26th, 2010

Like @Stoyan said, PNG should always be preferred over GIF. GIF shouldn’t be used anymore.

rory

March 1st, 2010

Great article, very informative I use ‘save for web’ daily working in web design, and I didn’t even know some of the options available. This has really filled in the blanks, thanks. I tend to use gifs a lot, as you can get away with using the gifs without losing much quality. Its a must to keep those file sizes down for any web designer.

SJL

March 4th, 2010

Great article, considering that I use this tool daily I had no idea there were so many options available.

Shubham

March 7th, 2010

That’s cool…Didn’t knew there are so many options..Alpha Channel support in png is a great way..Well a very nice guide..!

Sidra Blue

March 12th, 2010

Finally. A great article that explains what those options, when saving in Photoshop, means. Thank You!

Chris

March 19th, 2010

I have found Photoshop’s built-in capacity for PNG severly lacking. This free plugin called SuperPNG really just does exactly what I need without added bloat. Since I got this plugin for PS and saw how small .png’s file sizes it creates, I have simply stopped using GIF alltogether.

I feel it deserves a mention in an article like this.
http://www.fnordware.com/superpng/

viettel

April 17th, 2010

When doing this i’m always using Yahoo smushit! to optimized again :)

Dmitriy Zasyatkin

June 21st, 2010

Thank you very much for taking the time to write up such a comprehensive article. You did a great job with it!

Flinn Megal

June 27th, 2010

Solved my image problem in ie,hopefully ie does not go nutts again.thnx a lot for ur help.

Heidi

September 17th, 2010

Good tutorial… but what I don’t get is why SOME png’s work fine in all browsers and some don’t. I HATE IE!

Igrice

October 8th, 2010

Awesome post…

Igre

October 12th, 2010

Thanks a lot.,it helps me in creating my site.

Happy

November 10th, 2010

This was the best tutorial I could find on this topic by far! Thank you so much for the help!!

Nikola Tesla

December 1st, 2010

this is exactly what I needed at the moment. Many thanks, and really hope you will continue to bring us great articles!

Laren Galloway

December 22nd, 2010

useful, as your other posts! thanks a lot!

Jason Merino

January 25th, 2011

Thanks Joshua. This was super helpful to learn about the different types of images and their ins and outs.

nesk

April 6th, 2011

Nice guide, useful ; thanks !

Robin

April 6th, 2011

One thing to think about, for the people wondering why image compression is important these days with so much broadband (other than the obvious server side savings), is that a rapidly increasing amount of web surfing is being done on phones and tablets – which are NOT broadband connected.

Rob

August 3rd, 2011

What font was used for six revisions in this tutorial?

Asi Prva

December 11th, 2011

Many thanks for very good explanation!

Leave a Comment

Subscribe to the comments on this article.