Optimizing your images appropriately for use on the web can help to improve page speed and UX. It can also help to improve your organic rankings. Here’s a quick guide on how to optimize images for web to help you get started.
Throughout this guide, we’ll use this image as an example of how to optimize images for your website:
reseller.png” alt=”Google Analytics Premium Authorized Reseller” width=”150px” height=”150px” />
When talking about the actual size of an image (width x height), it is important to reduce the image size to the smallest possible size while maintaining visual quality. The designer should use Preview in Photoshop to determine the lowest quality the image can be saved at before it starts to appear fuzzy.
The image size should be saved at the exact dimensions needed for it to display appropriately when the photo’s container is at its widest (make sure the container has the image be responsive). For example, if the container for the image is 750px at its widest, then my image size should have a pixel width of 750px.
Naming & Storing Image Files
When saving an image, it is best to use commonly supported file types. Most modern web browsers support the use JPEG and PNG image files. If you are saving an image as a PNG, it is preferable to save the image with the file extension “.PNG”. This can be helpful for both file management and accessibility to consolidate your images into a single directory such as an images folder instead of having image files spread out in numerous directories and sub-directories across your domain.
Optimizing your image filename makes it easier for search engines to understand your images. Use a very short and descriptive name for your image and use dashes “-” to separate words.
In the example above, we named our badge “ga-premium-reseller.png”. We could have also named it “ga-reseller-badge.png” or “analytics-premium-badge.png”.
Image Files & Load Time
Speed is a factor that search engines look at while evaluating a website, and images have the potential to increase page load time and slow down your website. Consider compressing your images before uploading image to your site.
There are many compression tools available that can help squeeze the last bytes out of your images without compromising their look or visual quality. We recommend:
Image “alt” Attribute
The “alt” attribute is sometimes referred to as an “alt” tag. The “alt” attribute allows you to specify alternative text for the image if it cannot be displayed for some reason.
If a user is using a screen reader or viewing your site on a browser that does not support images, the alt attribute provides information about the contents of the image. If the image is used as a link, the alt text for that image will be treated similarly to the anchor text of a text link.
When writing image “alt” attribute text, use a short and succinct phrase that describes the content of the image. This tag should be unique from any other images. If the page is optimized for a certain keyword and the keyword applies to the image, include the keyword in the alt tag. It’s important to not over-optimize “alt” tags as it can potentially affect your website negatively.
In the example above, the image is a badge that indicates that the company is a Google Analytics Premium authorized reseller, so we set our alt=”Google Analytics Premium Authorized Reseller”.