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.
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.
- Go to File > Save for Web.
- Below presets, there’s a drop down box. Click on GIF.
- On the right side, you can change the number of colors used. The lower you go, the smaller the file size.
- Go to File > Save for Web
- Below presets, there’s a drop down box. Click on JPEG.
- 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.
- Go to File > Save for Web
- Below presets, there’s a drop down box. You have the option to choose PNG-8 or PNG-24.
- 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.
- 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.