5 Tips For Optimizing Your Images For The Web
A picture is worth a thousand words…. well not if it causes your site to load slowly.
Poorly optimized images are often the cause of a slow loading sight.
But images and image optimization also plays an important role on your blog:
- they make the content more enjoyable and easier for the reader to read and understand
- they affect how fast or slow your site loads
- they play an important role in the seo (search engine optimization) of your page
Anytime you add an image to your website, you want to make sure you have taken the proper steps to optimize it.
In this blog post, I share with you 5 tips to optimizing your images so they load fast and don’t slow down your site.
5 Tips For Optimizing Your Images For The Web
#1 Image Type
Images for the web are usually one of three different types PNG, JPEG, or GIF. While your web browser will display any of those formats, the quality and optimization of your image will vary depending on the format.
You want to make sure your images are saved in the best format for the type of image:
- JPEG – best used for photographs, or complex images containing lots of colors, shadows, gradients, or complex patterns.
- PNG – best used for graphics, logos, screenshots, or when you need images with transparent backgrounds
- GIF – best used when you need simple animation in an image
You may be wondering, why the different formats?
Well PNG is all about saving the original image quality. That makes it a great option for logos or graphics but PNG also mean a much larger file size.
JPEG is used traditionally for photographs and results in a smaller file size because some of the image data is thrown out and not used. This throwing away of data results in a much smaller image size with still excellent quality. You don’t notice a decrease in quality because photos usually contain a wide variety of colors and variations so the thrown away data is not noticed.
GIF’s can only display 256 colors and are best used for those simple animation style images you see around the web.
So in general, you want to use JPEG for photographs and PNG for text/graphics.
#2 Image Size
Have you ever been to a page where an image just seems to take forever to download? That is mostly likely because the blogger didn’t resize the image before using it.
You know when you buy the perfect stock image to use or you use that great photo you took with your DSLR camera? Take a look at those image sizes, they are typically huge.
Here is an example of an image I recently purchased from a stock image site, it is 5,616×3,744!
That is a huge size and much bigger than what we need for anything on our blog.
You should use an image program such as Photoshop, Pixlr or even MS Paint to resize your image to more appropriate dimensions. Remember to keep the image at the largest size you may ever need (you can always go smaller but not bigger).
Here is how to resize an image for free using Pixlr.
1. Go to https://pixlr.com
2. Click Open Pixlr Editor
3. Click Open Image From Computer
4. Click Image >> Resize
5. Enter your new image dimensions
6. Click File >> Save. When saving you can also adjust image quality which we will discuss in the next step.
#3 Image Quality
Remember earlier we discussed JPEG and how some of the image is “thrown” away. When you save JPEG images in Pixlr or export JPEG images from Photoshop, you can select an image quality.
Try reducing the quality to 60%, usually you won’t notice a drop in image quality but you will see a much smaller file size.
#4 Image Compression
You would think if you use the Save For Web features of Photoshop or Canva that you would be getting the best image compression and files sizes for your images? However this is not usually the case.
Typically when you try one of the additional compression tools below, you will see an even greater reduction in file size without any significant loss in image quality.
My favorite image compression tool is https://imagecompressor.com, simply upload your images and then download your image after the compression.
Another tool is TinyPNG (also does JPEG files as well), they also have a WordPress plugin available that can automatically optimize your images upon upload.
#5 Image SEO
That’s right, just like you need to optimize your content for SEO, you need to optimize your images as well. Images play an important role in SEO and how the search engines figure out just exactly what your blog post is all about.
There are two important things to pay attention to when it comes to your images:
Image File Name – Don’t leave your image named the default name your camera creates (something like IMG4324.jpg), make sure you rename it so that the name relates back to what the image is showing.
For example, if you have an image of a chicken casserole then you would want to name your image file something like chicken-casserole.jpg.
ALT Text – The ALT text is used when the reader does not load your image. For example, if for some reason your image does not load then the ALT text will be displayed in it’s place. This is also used by screen readers, a tool for the blind or visually impaired, to browse the web.
This same ALT text is again used by the search engines to provide more context as to what your post is all about. You can add your ALT text when inserting an image into your post.
Let’s Put It To The Test
Alright, so here are the results of an image optimization after all 5 tips.
As you can see the original image went from a file size of 4.3 megabytes all the way down to a size of 90 kilobytes and renamed to a proper name describing the image.
Be sure to use these 5 tips for optimizing images the next time you ad an image to your blog!