Optimizing Images for the Web and Email

Women Sitting on Curb in Black and WhiteSomeone sitting on the curb

Learn how to optimize pictures for websites without sacrificing quality.

The benefit of small pictures is immediately obvious. Requiring less bandwidth will reduce your cost and the cost to your visitors (time or volume charges). People will not remember your site as being slow and come back again (although slowness might happen for other reasons).
I also reduce the size of personal images I send via email to friends and family.
It is thoughtful not to waste other people's time and mailbox space.
The image on the left is only 13.8kB and can be loaded, even through a dialup connection, in a fraction of a second (the text on this page is bigger). Further optimization could reduce the size of this image to about 10kB without too much loss of quality. To save time, I have automated my workflow (including the final compression), leaving some room for further improvements.
I will demonstrate how to optimize your images with Photoshop, but you should be able to reproduce these steps with just about any Photo Editor

Image Size

Always resize images to the exact size you wish to display on your website.
Many people upload a large file to their web server and reference this file in the html code at a different size. The web browser will always load the entire picture in the background before shrinking it. Save your visitors and yourself the hassle and cost by resizing your images accordingly.
To finalize your layout later, design the page with larger pictures that you can easily resize, but replace them later with an image resized to final specs.
Photoshop Resize DialogPhotoshop Resize Dialog Open the Image Size Dialog in Photoshop (Image -> Image Size). Enter your desired width or height, but keep "Constrain Proportions" selected. Always use the "Bicubic Sharper" method when you shrink images.

Image Formats

Recommending image formats is always a gamble. This section will generate some hate mail, but here is my take on formats.
Today, we can find three dominant image formats on the web. Those are JPG, GIF and PNG.
Each of these formats has advantages and disadvantages.

I always use JPG for photographs. JPG format is using 24-bit to represent colors (8-bit per channel = 256 different shades per channel). To reduce the file size, the JPG algorithm segments your picture into 8x8 squares and frequency-transforms them. Compression cuts out high frequencies (fine details). A higher compression will result in a greater loss of details. This will result in the blocky (from the 8x8 blocks) look of JPG artifacts. Additionally JPG performs a lossless compression (similar to zip, LZW). That is also the reason why you cannot gain much by zipping your jpg files (try it), but you can gain a lot by zipping a word document.
Due to its nature, JPG is perfectly suited for photographs. Compression will not be as obvious on nature pictures (randomness of details) then on large surfaces (architecture). On large areas with uniform color, compression becomes more evident.

For screenshots of dialogs, I always use GIF. In contrast to JPG, GIF does not use lossy compression, but like JPG, it also uses lossless compression. GIF images can be very small, since you can limit the amount of colors. While JPG supports 24-bit colors (=16.7 Million Colors), GIF supports 1-bit to 8-bit (2,4,8,16,32,64,128,256). Dithering interpolates missing colors. This makes it ideal for large uniform colored areas (like dialogs).

Below I have compressed a simple dialog with GIF and with JPG trying to get approximately the same file size. Since JPG uses a lot more colors, the compression needs to increase to make up for the difference. For such images, GIF is always superior. GIF also allows combining multiple images into little animations and you can use transparencies (since pictures are always square, you can have a round ball on a transparent layer where the background of your webpage shines through).

Gif Compression
GIF Image with 16 colors
JPG Compression
JPG image of same size

Other Formats

PNG was developed to improve GIF and in many ways, it does. Since Compuserve patents some of the algorithms in GIF, open source applications sometimes do not support it. PNG aims to combine the benefits of JPG and GIF. You can either use an 8-bit color palette (similar to GIF), or a 24-bit (like JPG). Since Photoshop lets me reduce the colors of the GIF files even below 8-bit, I have always been able to get smaller files using GIF.

JPG2000 and the new Microsoft HD picture format are all intended to replace JPG, but I do not see this happening any time soon. JPG2000 offers better compression and the Microsoft format offers an increased bit depth. JPG uses 8-bits per channel = 24-bits, Microsoft HD Picture use 8-bits/channel, 16-bits/channel, or 32-bits/channel (that is 96 bits per pixel).

Optimizing with Photoshop

I used Photoshop to optimize Images for the web, because my entire workflow revolves around it.  I am now using a combination of Photoshop and Irfanview to preserve the EXIF data, including the GPS location stamps that I added.
JPG files contain a lot of information besides the pixel values, like EXIF data (camera settings, location …) or thumbnail previews. Not all of this is immediately visible when you are using a picture to illustrate something and can even be unwanted. Image manipulations become obvious if your image editor does not update the preview. EXIF information can reveal more then you want to show. You can strip all this information and optimize the compression level with one simple tool in Photoshop.
Select File -> "Save for Web …" to open the dialog.
A window like this, with your picture loaded will appear.
Save for Web

Experiment a little bit to get a feeling on how the Quality settings affect the picture. I have found that a Quality of 60 satisfies my requirements most of the time. Observe how the Size and predicted download speeds change when you change the quality settings. When you are satisfied, just click the Save button.
Opening the 2-Up tab, will put the optimized image next to the original for better comparison. Opening the 4-Up tab will load two more images with even higher compression (see picture below).

Save for Web Dialog Box Explained

You can also open the context menu by clicking on the right arrow.
Unfortunately, Photoshop CS2 does not offer an option to keep certain EXIF information. Time and location are lost, making this process unfit for Geo-targeting applications.

Optimize GIF FileOptimize GIF File Selecting GIF in the format tab changes the Quality settings menu. The number of colors influences size and quality of the final image. Dithering will then generate in-between colors with dots of available colors. Look at the blue bar of the Image Size dialog box above. For images with only a limited amount of colors, like program dialog boxes, GIF is preferred.
 

Disclaimer

I deliberately kept this article down to earth for everyone to understand.

Useful tips

Useful tips, these tips is important for newbie, for PS plug-in, as I know, one plugins can help do something, that is akvis noise buster, it is a photoshop compatible plug-in for noise suppression in digital photos and scanned images. It offers a fully automatic filtering mode that does a good job in eliminating most common noise, I like this very much.

Picasa For E-mailing Photos

I have found for many newbies and those that don't want the higher level photo manipulation tools, that Picasa is great for e-mail photos in a 'user friendly' size and format. You can set a standard size and Picasa will take care of the optimization. Just a thought.

Picasa

Thanks for that tip. I personally prefer Irfanview as a free image manipulation tool. I use it to resize images and sharpen them for quick emails or web projects.

image formats

"Additionally JPG performs a lossless compression (similar to zip, LZW)." That is incorrect. JPG is a lossy format. It is possible to create lossless JPGs, but they aren't well supported.

For more information see the wikipedia page on JPGs http://en.wikipedia.org/wiki/JPEG

both

JPEG does two things, lossy (redundancy reduction) and lossless (lzw compression).
First the redundancy reduction (basically a frequency transformation with lowpass filtering) reduces the amount of data to be compressed, then lzw performs a lossless transformation.
Upon re-reading my article, I think my writing was too ambiguous. Both, lossy and lossless, compressions are part of the algorithm and happen concurrent to each other.

Thank you for good tutorial

Thank you for good tutorial i think it's good for web designers.

Nice tutorial

Very usefull photoshop tutorial.

Wow, this is great! I've

Wow, this is great! I've been learning Photoshop, but when I first started trying to put images up on my site, it was going really slow. I didn't realize there was something you could do about it to help make them better.

Latest optimizing tool

` Andre` I was just wondering, what's your opinion on any of the newer photo manipulators/optimizers?

Example?

Which tools are you referring to Lawrence?
I use the "safe for web" plugin for Irfanview. It does all I want. In general, I don't bother with newer tools. As broadband speeds keep going up, the importance of optimizing images goes down. As long as my images are small enough, I don't waste too much precious time on it. I usually run Irfanview in batch processing mode and the results are just perfect for my purposes.

lightroom

by optimization of image you have mentioned using Photoshop, can lightroom be used also? if so, do you have steps to follow? Thanks for the great knowledge.

Irfanview

Lightroom is not ideal. I use it as a pre-processor to Photoshop.
Recently I prefer the ease and performance of the freeware Irfanview for web image processing. Make sure you install all the additional dll libraries if you chose to try it out (they are also on the Irfanview website). This will give you the very powerful "File -> Save for Web" interface, which lets you optimize your images and preview them next to the original.
If you don't have Photoshop, give Irfanview a go.

Wow...that was some great

Wow...that was some great information! I never thought about reducing the image size before I upload it to my server.

You are absolutely correct...I just upload the image and then use the HTML to resize it. Due to Google telling website designers about the importance of page loading speed, this one idea makes the entire article worthwhile! I am going to test a the load speed of a few of my pages, then change the image size according to your tutorial and test them again. I can't wait to see if it actaully makes a differnce, and if so, then by how much.

I don't worry about e-mailing images too much. In the past, this would have been a concern. But now, we upload most of the images we used to share via e-mail to Facebook and share them that way.

Thanks again!

Best wishes,

Pete

Good post. I’m been

Good post. I’m been looking for topics as interesting as this.
Very informative and information presented very well,
i really liked reading your blog which has delivered a great information.
i wanted to optimize my image for my email account but was not getting an idea about it.Your information has provided me the steps for it and i had optimized my image which is looking good.
thanks for sharing this information.

Thanks for the tip

I don't usually take the time to reduce the images before I send them off to someone's e-mail because I think that it's a hassle to do so. I now know how to resize pictures without losing its good quality by just using any photoshop available so I'm really greatful right now. Thanks to this article, I can now easily resize a picture without worrying about having low quality images.

affected on the bandwidth.

The images are made the web page or an site more beautiful. but images are always affected on the bandwidth of the internet. we cant upload many or high density images on the page because it affected on the speed of site. site cant compress more else it affected on the design. so we have to think about the different compress formats. if we take high resolution pictures we cant upload on the site that affects on the speed of loading.so try to avoid the more pictures on the page.

photo-shop in 24 hour but

I do not know about losing .jpg data in higher compression . Thanks for sharing nice photoshop tutorial .i have already Learn photo-shop in 24 hour but your tutorial describes each and everything.

Nowadays optimization of

Nowadays optimization of images has become a more of a necessity as it can increase your page load time. Any of website who showcase several of images should always make sure to optimize the same. I like to upload images in JPG format as those are bound to be lower in size.

Web Application Design

Astonishing but incredible

Astonishing but incredible learning procedures have adopted regarding such optimization process to held specially in different pictures for websites without sacrificing quality.Glad to know about this type of professional creation and also all wonderful activities. whosin

Different developed tools

Different developed tools are available to optimize images for the Web and Email.So above excellent tutorial gives basic knowledge about this wonderful technique by adding good stuffs.Image optimization techniques is usually done by skilled and most experienced designers who have been working to develop quality of images.Airsoft Guns

Such skilled professional

Such skilled professional projects are quite difficult to understand then design,But your fabulous exploration and representation will support to make skilled in this image optimization process.Especially optimizing images for web email,variety of tricky and cool ideas are added to this blog.Joshua Warren

I have never used photoshop

I have never used PhotoShop for resizing image but after reading this mini tutorial, I have learnt a lot about image resizing.I am happy using image resizing function now because of my PPT Template presentation is not crashing during the presentation.Sharing good information is always good for readers or viewers of website.

Please read one more important tutorial for readers which is not my post but it is also good information so Please click on :

How to Create a PowerPoint Slide in PhotoShop

this is nice page

Thanks for sharing experience. It should be really a great post. It should be knowledgeable and informative. Keep it up.

wow this is really amazing i

wow this is really amazing i didn't know about it :)

Nike Blazers

all these issues are related, since more domestic energy supplies raises revenues and creates new wealth by creating new jobs,"said a House aide familiar with Speaker John Boehner's thinking.

Very useful instruction here

Very useful instruction here how to optimize images for websites. Many beginners don't know such simple elements like this one so it is really awesome that all information is stated in details. Thanks a lot again for this wonderful stuff. Kind regards!

Thanks for such an awesome

Thanks for such an awesome article here. I love your posts about photography because I am a huge fan of it by myself. I just hope that you will keep updating your website in the nearest future too.

frutaplanta

es lo mejor que he conseguido para vajar de peso

Great post. Then why don’t

Great post. Then why don’t you are hoping a great deal more on increase internet site, as a result will likely to be advisable to be during your blog hunting power plant. Many thanks giving out really inspirational expertise in you and i. Major writings, best wishes. focus dailies 90 günstig kaufen

2 diet

Hi there, its understandable paragraph along with this YouTube video; I can believe that one can not understand this trouble-free paragraph having with video demo.

Without him, it seem

Without him, it seems I am dropping this terminology entirely. gluten free diet

http://hwsolvers.com/programming_project

You can either benefit an 8-part tint palette (analogous to GIF), or a 24-smidgen (parallel JPG). As Photoshop authorizes me humble the hues of the GIF lines constant nether 8-while, I enjoy always been talented to acquire smaller indexs using GIF. http://hwsolvers.com/programming_project

PNG-8 and GIF

I always used PNG-8 to get small-sized images out of dialogs or very uniform images. Do you recommend using GIF over PNG-8? I always managed to get smallers images from it (although with less options), but now I'm really considering start using GIF instead!

Thanks for the Optimizing

Thanks for the Optimizing with Photoshop tutorials. Very much useful for buddy designers.

I am sure that this post is

I am sure that this post is going to be very useful for those who deal with images in wide range. Such techniques to optimize pictures without sacrificing quality are really innovative and appreciable at the same time. Thanks for the share.

This post is really help me

This post is really help me lot I am searching post which help me to optimize my blog images perfectly.

Andre Gunther Photography | Fine Art Travel Photography

Hola у mil gracias!

He de garantizar que tu entrada en el article me
ha sіԁo realmente útil!

My homepage; ordenador altea

While photography lovers

While photography lovers often buy very high-end cup to press the last bit of details out of a sellable image, most non-professional expert photographers are looking for assistance for a sensible choice. Lately, I obtained many queries about this very subject. While I select to answer a number of demands via email, I made the decision to review some details in an easily readable article. Kamagra Oral Jelly

This publish is really

This publish is really help me lot I am looking publish which help me to improve my weblog pictures completely. orlando roof repair

gosip hot artis

I am looking publish which help me to improve my weblog pictures completely

I just recently found this

I just recently found this blog on the internet, and while I was surfing around your different posts and articles then suddenly I came to this specific post which i really enjoyed it. I think you have some good information on the subjects you write about.

Really great post nice work

Really great post nice work i love your work. Thanks. Keep sharing.

This section will generate

This section will generate some hate mail, but here is my take on formats. Today, we can find three dominant image formats on the web. slots

Thank you very much!This

Thank you very much!This will really help me with my news photographing project! I owe you big time! resources

This section will generate

This section will generate some hate mail, but here is my take on formats. Today, we can find three dominant image. vacation

I'm really greatful right

I'm really greatful right now. Thanks to this article, I can now easily resize a picture without worrying about having low quality images. wire fraud attorney

hanks for sharing

hanks for sharing experience. It should be really a great post. Great sharing

Grass Mats

Upon re-reading my article,

Upon re-reading my article, I think my writing was too ambiguous. Both, lossy and lossless, compressions are part of the algorithm and happen concurrent to each other. Best tattoo shops near Chicago

buy gymmats from gymmatsco.co.uk

Register having a site should you shop from frequently.Set up your account and acquire emails on deals ahead of folks that are not registered.

Thanks very much for sharing

Thanks very much for sharing these links. Will definitely check this out..
american medical bracelets

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options