Optimizing images on your website can increase your SEO, site speed, accessibility, and user experience.
I will go over five ways to help you audit your website’s images that can improve your on-page performance, reduce bounce rates, and increase conversions from better user experience.
It’s important to name your image files with words that accurately describe each image.
Yes, it would be easy to use the default file names (ie. IMG3049573), but that doesn’t allow Google and screen readers to know what your image is of.
The best way to name an image file is to use all lowercase with words separated with hyphens.
For example:
Bad:
If you want to dig deeper, look at the keywords users are searching for and use those in your file naming (but don't keyword stuff).
What is an alt tag?
An alt tag is the text alternative to an image when a browser isn’t able to render it for whatever reason.
Much like file names, alt tags are also used for accessibility for screen readers so when the image is hovered over, the alt text will appear (if certain browser settings are enabled).
Alt tags also contribute to a website’s SEO when relevant keywords are used in the alt text. A website can rank higher in search results if images have properly formatted and targeted alt tags.
Here’s how to code an alt tag:
Follow these general rules for creating a good alt tag:
As a rule of thumb, if it’s not a background or decorative image, it should have an alt tag.
It’s been discovered that nearly 50% of users won’t wait over 3 seconds for a page to load before bouncing off the site (and likely over to a competitor).
Google uses page speed as a ranking factor in their algorithm, so it needs to be made a priority when optimizing a website. Use Google’s PageSpeed Insights to test your page speed.
A fairly easy way to speed up your site is to reduce your image file sizes. Yes, this can be a bit tedious but it can definitely pay off.
There are a few ways to reduce file sizes:
How much should you reduce your file sizes?
A guideline to follow is that all images should be under 150KB. Any more than this, you risk slower load times which can increase bounce rates.
Depending on what your image is (photo, logo, animation, etc.) will determine the best file type.
Check out this table as a reference guide:
Extension | Type | Use | Explanation |
---|---|---|---|
JPG | Raster | Photos / Web / Digital Media | Best for Banners and Photos |
PNG | Raster | Web / Digital Media | Best for Logos, Icons, and where transparency is required |
GIF | Raster | Web / Digital Media | Aninated images for web and digital media |
SVG | Vector | Logo / Icons / Charts | Vector based images, increasing image size won't pixelate image |
JPGs will most commonly be the best option as they provide the best quality for the smallest file size.
Most image optimizing/resizing tools will also allow you to convert to a different file type.
Every so often, it’s good to do a sweep of your website’s images, especially if you have multiple users managing your site content.
Remember to:
Using image optimization to improve your SEO can help you increase your page load speeds, decrease bounce rates, offer a better user experience, and hopefully increase conversions.
I hope these tips help you get started on improving your website’s SEO. If you have any questions or would like to work together in implementing the improvements in this blog, please reach out to [email protected].