Optimizing your Website Images

We often tell our clients that their website should show or demonstrate their work rather than simply tell your audiences about your organization or business. One of the great assets in achieving this is the use of images to help convey the story and create a sense of connection with your target audiences. 

 

Images hold more power than that for your website, too. The proper use of images can make your site more attractive to search engines and improve your ranking on search engine results pages. Two big factors that can help boost the effectiveness of images on your site are the image metadata and the optimization of the image file itself.

 

Image Metadata

Since search engines can’t actually “see” your image, they rely on the image metadata to help evaluate the overall page content. 

 

File Name

The first piece of metadata is the file name. All of the images on your website should be named with descriptive file names. Rather than using the name assigned by a camera (like “DSC_01234.jpg”), you should rename your image with descriptive words like “white-kitten-climbing-stairs.jpg.” The name should reinforce the content on the page and can even include some of the keywords you’re targeting in your SEO. 

 

ALT tag

The ALT tag or attribute is another piece of metadata that can be helpful to search engines. The ALT tag is also useful for accessibility — it will be displayed in place of an image if the browser is set to not display image and will be read out if a user is employing a screen reader. In WordPress, you can assign the ALT attribute through the Attachment Details screen accessed by clicking on any image in the media library. Here’s a short list of guidelines for drafting ALT tag content:

 

• Describe the image as specifically as possible.
• Keep it (relatively) short. (The most popular screen readers cut off alt text at around 125 characters, or 16 words.)
• Use your keywords, but avoid keyword stuffing.  
• Don’t use images as text.
• Don’t include “image of,” “picture of,” etc. in your alt text. 
• Purely decorative images (patterns, abstract decorations, etc.) should have empty alt text. 

 

One important note from the list above is to never use images that have embedded text in them, unless the text is repeated in HTML on the page. A common example is using an image of an event promotional flyer to promote the event on your website. While it is easy to export the flyer and post it on your site, the text on that image won’t be able to be crawled and indexed by search engines. The text also may be cut off or illegible in responsive modes, especially on smaller devices. A better practice is to use a related image and set the text in HTML on top of or near the image.

 

Optimize the Image File

The second major factor in properly using images is the optimization of the image file itself. Resolution is the key consideration for this factor. We generally recommend two optimal file sizes for most websites: No more than 800 pixels wide for on-page images and no more than 2000 pixels wide for full-width images (sliders, hero images, etc.). 

 

Many cameras and stock image sites create or offer images up to 5000 pixels wide, and that much resolution is just not necessary for most online uses. Large images can bloat your site taking up unnecessary space on your hosting server and slowing down your site speed. 

 

If you make sure your simple image metadata is helping you and your image files are optimized, you’ll be improving the performance of your site in small increments. This will make your website faster, more attractive to search engines, and should help to improve your search rankings over time.