How to properly optimize images for the web using Adobe Photoshop

Every class I teach there are always questions about how to optimize images for the web. Once you learn how to do this it will become second nature. It’s very important to learn this so that your website and blog perform quickly and load images fast. Not to mention, making your images nice, crispy, and sharp!

Do not use WP or Blogger to resize your images

I’ve seen bloggers uploading huge files and then using WP or Blogger to shrink them down. That’s not a good practice at all. What you are doing is uploading an image that is way too big for your post, then asking WP or Blogger to resize the image. You are not changing the size of the image by doing that. You are actually having WP or Blogger do extra work every time that image is displayed on anyone’s computer. So imagine if you have hundreds of posts with huge images on them and every single one has to be “res’d” down when viewed, you are creating a massive amount of data and work for WP so your site will load slower than it should.

Optimize your image before they go onto your blog

I am going to show you how to optimize images using Adobe Photoshop. It’s really very simple. Then after you have your image optimized for your blog, you now have a great image to email to people as well. Nothing annoys me more than someone emailing me a massive file because they never took the time to learn this. This should be one of the first things a blogger learns how to do.

I am using Photoshop version CS6 – if you are using a different version the dialog boxes might be slightly different, but just make sure to put in the setting I’m suggesting and you’ll do fine.

Step 1 – Open your file in Adobe Photoshop

Open Photoshop, then go to the “File Menu” on top, scroll down to “Open…”, then locate your file.

Step 2 -Open Image Size dialog box

Go to the “Image Menu”, scroll down to “Image Size…” and a dialog box will pop up. This is how you will change the size of the file.

You will need to change a few things depending on your needs. Let’s pretend you are optimizing an image for a blog post and you know your blog’s column for posts is 600 pixels wide (standard center column or main column for a lot of blogs, like mine here). I’m not concerned about the height because I know I need to make the file 600 px wide.

Now, change the following settings:

• Width:  600 pixels
• Resolution:  72 pixels/inch
• Keep all check boxes on for “Scale Styles”, “Constrain Proportions”, and “Resample Image”
• Also make sure that for that last check box – “Resample Image:”  you are set to “Bicubic (best for smooth gradients)”
• Press OK

Step 3 – Sharpen your image

When you take a large file and “res” it down to a small file for the web, you just removed a ton of digital data in the file. This will make your image look a little out of focus, or “soft”, is what we call this.

Whenever optimizing images for the web, sharpening your image is a crucial step to making it look crisp and sharp online.

So now you should have your image that you reduced in size. Photoshop will show it in proportion to the size you just made it, so it will be much smaller, like what you see below.

Here’s a trick to help you see your file at 100% – for mac – hit the command key with the + sign key, for PC hit the control key then the plus sign to enlarge the viewing of the file till you see “100%” in the top of the file window.

Now for sharpening – go to the “Filter” menu, scroll down to “Unsharp Mask”. I know this is a strange name as we are really sharpening the image. The name comes from days of film (I’m aging myself again) where they made film masks to actually sharpen film, long story, not needed here.

This will open up the Unsharp Mask dialog box.

I use these settings:

• Amount:  I will move the triangle to the left until I can tell I’ve gone too far – the image will look grainy – I use anywhere between 30% and 60% for images for my blog.
• Radium: 1.0 pixels
• Threshold:  0 levels

As you move the slider to the right you will see a preview of how much “sharpening” Photoshop will apply to your image. I always click on the preview box – this will show you the before and after. What Unsharp Mask is doing is creating more definition between each pixel. Because of this process though, you can very easily over-sharpen your images if you aren’t careful. I see bloggers doing this all the time. Some over sharpen so much that their images have a grainy look to them and the subtle details become very distracting, as you can see below.

Step 4 – Save this new file using “Save For Web and Devices…”

Now that you have your smaller image sharpened correctly, you should save this file as your new web/email version of the high res file that you started with. Go to the File menu, scroll down to “Save for web and devices…” to open the dialog box.

This looks complicated but just follow these settings each time and your image will look great.

Here are my settings going from the top:

• Make sure in the top left you are on the tab called, “Optimized”
• Settings on right side – “Preset” – I ignore this as I make custom settings each time I make a jpeg
• Make the next drop down say “Jpeg”
• Right under “Jpeg” is the quality we want – put this to “High”
• To the right of  “High” is a Quality number. Move this around to get your file size, which can be seen all the way on the bottom left under the image, to be around 100K – 150K at the most. This is a good file size for blogs and emails. The image is being previewed in the window – so play around with the lowest size you can make it before you start seeing degradation.
• There are three check boxes to the left of Quality – I only check “optimized” for web images.
• Next make sure the check the box “convert to sRGB”  this is making an image for web color space.
• Set preview to “Monitor Color”
• Set meta data to copyright info if you created that previously. If you don’t know if you’ve put your copyright info into Photoshop you can leave this blank or select “None”. Meta data is your contact info you can embed into your photos – its too complicated to cover here and will probably be another post and worth knowing.
• Next you will see image size area – you don’t need to use this as we already sized our images before using this menu – we did that because we wanted to control the sharpening of our image first. This dialog box does not have a sharpening dialog in it.
• Now click on the blue button, “save”  and you will get this dialog box.

• Now – rename your file so it is clear that this is the web/email version – for example – You could call this “Hot Dogs WEB”  Notice the file extension now says “.jpeg” and Photoshop is asking where you want this file to go. Navigate to where you want this file to be stored.

This process is taking your large file that you shot, making it small for the web and then creating a new jpeg file with all your web settings.

Step 5 – Close original file – but do not save it!

After you have saved your new jpeg, the dialog box will close and  you will still see the image that you just worked on to create this new web jpeg.

This is very important – close this image – AND DO NOT SAVE IT!

This is the original large file you started with – we just made a small web version from it. If you save this you just made your large master file really small! You need to keep the original large file as your master file. Yes, this means you will have multiple file versions of each image.

I have my master large file, my blog jpeg file, and then in some cases I have a larger jpeg file for my commercial photography web site – www.christinapeters.com. This website needs very large jpegs because its a “scaler” website. As people enlarge the browser window my images will also enlarge. This type of website needs larger files to do this. So I have at least three files per image.

Hopefully this sheds some light on how to properly optimize for the web using Photoshop. It’s extremely important to do this the right way and to have your images look their best online.