Image Optimization Basics
The images on your webpage help to communicate what your page is about and they are an important part of the design. We use images to break up our blog posts, to keep our readers interested, and to promote products or services that we love or provide.
Did you know that HOW you upload and name your pictures can impact your web ranking either positively or negatively?
It can.
Google has two ranking factors that deal with the images on your webpage:
- Your page speed load times
- Your image optimization for SEO
One deals with the size of your image files
The other deals with how you are naming and describing the images so that Google knows what the images and your webpage are about.
Benefits of Image Optimization
As website owners we are always trying to give our users a great experience and to make the Google Gods happy, but here are a few other reasons why you should optimize your images:
- Your site will load faster making your Google PageSpeed score better
- Google will be happy and your search engine rankings will improve
- Your bounce rate will be lower so more visitors will see your page
- You will reduce website bloat and need less storage with your webhost on their servers (yes there are space limits)
- You won’t blow through your visitors’ mobile data plan (somebodies mom could be thanking you)
What photos are legal to use?
We always want to make sure that we are following the internet rules for webpages and one that is commonly forgotten or ignored pertains to images. There are three legal ways to get photos to use on your webpage:
- You can get permission to use an image from the photographer usually in return for a link back to the photographers’ webpage. This creates a backlink for the photographer (good for SEO) and provides you with an amazing image. I use this technique often with the wedding photographers that I work with. They are happy to have me share their photo, credit their work and link to their webpage. This drives traffic to their site. In essence I am advertising their work for them. In return I am happy to showcase a beautiful photo on my webpage and let potential clients see my airbrush work showcased in the most beautiful way.
- You can purchase the rights to use an image through a stock photo service. Make sure that you are using CCO (creative commons) license for commercial use. There are FREE stock photo sites and some of them are reputable and some are not.
- You can pay a photographer to take photos for you to use on your webpage. Make sure you ask the photographer if they do shoots for online use and will release all copyrights on the images. I still run into photographers that only allow purchase of prints through them for their work. That being said there is a whole new niche in the photography world that creates beautiful images just for use online. All you have to do is ask!
The tools I use are listed at the bottom of the page.
How to size your images
When you choose an image that you would like to use on your webpage we need to consider the file SIZE. A large file size is going to take a ton of time to load slowing your webpage down and giving you a bad grade on your Google grade card, yes this is a real thing.
Since we don’t want that we need to think about how we can reduce the file size and still keep our image beautiful. There are 3 things that can help your images perform well on your webpage.
File Type
What file type are you using? There are two commonly used image files .JPG and .PNG
.JPG is best used for photos and it naturally is a smaller file size than the .PNG
.PNG is usually used for logos and transparent backgrounds.
Stick with the .JPG for your website images as it provides the best option for compressing and resizing while keeping the quality high.
Image Dimensions
Size your images for the space that they are going to live in.
When you are using a WordPress theme there are pre-set places for images. They have dimensions set for them and this is what decides the overall look of your webpage.
That is all great but if you are uploading an image that is 20 times bigger than it needs to be to fill that spot then your webpage has to do backend gymnastics to resize your image into the smaller space every time someone looks at your webpage. This takes time and bandwidth.
Creating the image in the pixel size needed is an important step. Photo editing programs are available in many forms. Programs for your computer, apps for your phone and online services. I personally use Canva to resize my images to the correct size for my webpage. It is FREE, online, has an app and easy to use.
The tools I use are listed at the bottom of the page.
Image Compression
Reduce the image file size so that it is not as large.
Photographers take amazing photos using HD cameras and these images have super high file sizes. The professional images are beautiful to look at but we need to reduce the size of the image so that it can play nice with your webpage and make Google happy. But we don’t want to ruin the quality of the photo in the process.
This is where a compression program comes in handy.
A compression program actually shrinks the size of the image file down to a level where it has removed all the unnecessary parts of the image up to the point where the photo would start to degrade in quality. Then it resaves it in its new lean format.
There are apps for your phone and professional programs that photographers use for editing and resizing and all sorts of options out there. Again I like to keep it simple and there are a few free online services available that allow you to quickly and easily upload an image, compress it and then you download and save.
It is then ready to upload to your webpage without taking up a ton of space slowing your load times.
The tools I use are listed at bottom of the page.
Optimizing Images for SEO
So now we have dealt with image size let’s move on to naming and describing your images to help increase the power of your onsite SEO.
Images on your webpage send the search engines important information through the file name, title, alt text, caption, and description. Filling out these fields makes a huge impact on your SEO.
Let’s use one of the images from my SunSpray webpage as a “what NOT to do” example.
The file name, title, caption and description are all wrong as well as the file dimensions and size. The only thing that I nailed was the alt text field.
Keep reading for more tips on how to optimize your images for SEO
Naming Your Image File
Before you upload an image to your webpage you should check the file name. Often it looks something like this IMG_67768376365805038737.jpg Changing that to a descriptive word based name can help the search engines know what your image is about and improve your SEO.
Title Text
This defaults to the name of the file. You should change this to something descriptive.
Caption
The caption of the image is the text that accompanies the image in the gray or white shadow box below it. This depends on your theme. If you look at the image above you will see where I added a caption so you can see where it lives. Adding a caption can help your reader to understand the value of the image as it relates to your blog post. Remember people scan and don’t always read everything so make it easy for them to scan. The caption shows so make it interesting and descriptive for your readers.
Alt Text
Is a mandatory field. It is there for people with disabilities. It’s primary purpose is to describe images to visitors who are unable to see them. A person could have their images turned off in their web browser or be using a screen reader to assist them with surfing the web. Make sure the alt text includes SEO keyword for the page and describes the image or the function that the image serves (such as a search button or newsletter signup button).
Description
Your description is indexed by Google as well, assisting with your SEO.
Helpful tips for naming and describing your images
- Use the keyword that you are trying to rank for in your blog post
- Add your city or town if you are a local business
- Include your business name
- Mention the event/location that the photo was taken at
- Don’t make all the fields the same
The image below is properly optimized for Google, my webpage and for SEO. I saved a HUGE amount of space by resizing and compressing the image. 993KB to 9KB and I renamed the file and filled out all the supporting image description details which will help Google to find me and rank my webpage.
6 simple actionable takeaways for image optimization
- Make sure you have the proper permission to use the images on your website
- Use the correct image format .JPG for websites to keep your file size down
- Resize the images to fit where you are going to use them per your themes layout
- Compress your images for minimum file size before uploading
- Rename your image file before uploading
- Optimize your images for SEO using keywords and descriptive text after you have uploaded to your webpage
FREE Online Compression Programs
FREE Photo Editing
FREE Stock Photos