Optimizing Images with Photoshop for your Blog

| | Optimization

Website speed times is just one major factor in ranking well in Google. Images in particular can take up quite a lot of loading time. If they’re not optimized properly, you’ll find that users are exiting your page faster than the image can load and/or Google will rank you page lower.

If you have Adobe Photoshop, here’s a guide on how you can properly optimize your images to achieve the lowest possible file size while keeping the quality of your images high.

First, let me explain the different image formats.

Lossy and Lossless

Lossy: Using lossy compression will decompress your image and get rid of unneeded data. Zooming into the image, you’ll notice some loss of color or grain but to the regular user, they won’t notice anything. You can make it as compressed as you’d like. This type of format is perfect for the web.

Lossless: This will recreate the original file exactly how it was keeping all colors and size.

File Types

GIF: This image type is lossless. It’s perfect for small buttons, layout designs, info graphics, logos, and anything else with simple flat colors. Works best with images that don’t have a lot of colors. With GIF, you can control the amount of colors the image will have which goes up to 256 colors. GIF also supports transparency while JPG does not.

JPEG/JPG: This image type is lossy. You’ll want to use this for photographs since it supports millions of colors. In Photoshop, you’ll be able to control how much you’d like to compress the image by. JPG does not work well with simple colors like GIF and PNG does.

PNG: PNG is the competitor to GIF holding some of the same rules and even includes transparency. The only difference really is that PNG does not support animation and is now owned by any licensing like GIF does. Use PNG-8 instead of GIF.

Save for Web: File > Save for Web

  • By clicking on the 2-Up tab on top, you can see the difference between the original and the optimized version. Zoom in if you’d like to get a closer look of the differences.
  • Pay attention to the file size and loading time at the bottom.

GIF:

  1. Go to File > Save for Web.
  2. Below presets, there’s a drop down box. Click on GIF.
  3. On the right side, you can change the number of colors used. The lower you go, the smaller the file size.

JPEG/JPG:

  1. Go to File > Save for Web
  2. Below presets, there’s a drop down box. Click on JPEG.
  3. Change the quality number to reduce the file size. If you’d like to make the process faster, just click on Low, Medium, or High on the left drop down box. You’ll notice how the quality number will change.

PNG:

  1. Go to File > Save for Web
  2. Below presets, there’s a drop down box. You have the option to choose PNG-8 or PNG-24.
  3. Use PNG-8 if the image is simple and does not contain too many colors. Use PNG-24 if you’re looking to reproduce as many colors as possible like photographs although I’d recommend using JPG instead for photographs as they are usually smaller in file size.

To review:

  • Use PNG-8 instead of GIF when you have small buttons, simple graphics, logos, etc.
  • Use JPG when saving photographs.
  • Only use GIF’s if it’s animated.

Recent Comments

  • This is a very good summary of the options for web images. Not mentioned in the text, but I’m glad to see it in the screen shot is that you have “Copyright and contact info” selected for Metadata. This is really important since it gives someone a way to track ownership of your photo if they want permission to use it. For JPEGs, it’s also a very good idea to select Embed Color Profile and Convert to sRGB so that colors will appear correctly on the widest variety of monitors and screens.

  • This is one great guide! With the web lasting for more than a generation, I find it funny that some people still struggle with images in their blogs or websites. Thanks for this tutorial!

  • I never go under 80% quality when i export my pictures.
    But thank you for the tips about gif, i tried it and it works good.

  • This is great and helpful to someone like me who are currently mastering in Photoshop and thank you so much for the great presentation. It helps actually. Thanks!

  • Thanks for the great tips–so easy to understand too. but question: you mention that the different JPEG qualities result in different load speeds, but what is the ‘negative’ side to selecting a low or medium quality (ie poor image quality?) or does that depend on the original file size??

    • Thanks! As you get lower in quality, you’ll notice more grain in the picture. If you can’t see the difference, try zooming into the picture.

Comment