SEO

Image Optimization: Why Size Actually Matters

Our in-house head designer talks SEO best practices for images. Get the details on alt text, file size, and file type.

As the Senior Design & Brand Manager at Conductor, I’m in the fortunate position of seeing firsthand how design can either help or hinder SEO efforts. Each day my team is posed with the challenge of maintaining a beautiful website while making sure it’s exciting to the user, beneficial to the company, and optimized for search engines. It’s a challenging yet exciting task.

Even though Google Image search does not yield nearly as much web traffic as it used to, there is something that makes optimizing images incredibly important: mobile. Now that there are more searches on mobile than desktop, we need to keep image optimization in mind more than ever. After all, your mobile rankings and user experience depend heavily on load times.

This is why it’s important that SEOs and their design teams are aligned. In this post, I lay out what every SEO should be asking their designer when they need imagery for their website.
 

First, Ask Yourself: Do You Really Need an Image?

Before your team selects their first image, take a moment to be sure that you do in fact need an image (or images) on your page.

Can the same visual interest be achieved using CSS effects like gradients or creative web fonts? Both load quicker than images and are easy to replicate in many different areas of your site.

You should also take the time to confirm that your page loads in 2 seconds or less, an industry standard across the web. A slow page load speed can affect your rankings and also provide a less than desirable experience for your users. Be sure to solve any page load issues before filling up your site with images!
 

How to Optimize Your Images: Pre-Upload

For the purpose of this post, I’ll be referring to Adobe Photoshop for image editing.

Gimp IconIf you or your design team doesn’t have access to Photoshop, the open source platform Gimp is a great alternative. It is a simple image-editing tool and while you don’t get quite as many optimization options as you do with Photoshop, you can’t beat its free availability and user-friendly interface.

Before your design team sends you images, there are three aspects of the image you should pay close attention to: size, name, and file type.

1. Size

When someone refers to the “size” of an image, they are referring to both the image’s quality as well as its height and width dimensions. A low quality image will appear fuzzy, which means the number of Pixels Per Inch (PPI) is relatively low. In comparison, high quality images are crisp and brightly colored, appearing almost lifelike. The dimensions of an image refer to the actual height and width measurements, measured in pixels.

fuzzy-image-optimization

The size of your images is extremely important to the overall optimization of your webpage. Reducing your image to the smallest possible size while maintaining visual quality is the key to having a successfully optimized website. Ask your designer to use the Preview view in Photoshop to determine the lowest quality your image can be saved at before it begins to appear fuzzy.

Instruct your team to save the image at the exact dimensions you need based on the width of your page – if this particular image will be in a column that is 500px wide, for example, then 500px should be the width of your image.

photoshop-size-image-optimization

If you need a thumbnail of an image, save that thumbnail as a separate image at the exact dimensions it will be displayed at. This ensures that a user will not need to load a large image to view a tiny thumbnail and that mobile users will not be forced to download a high quality image meant for a desktop user.
 

2. Naming

Saving your image with a descriptive name – one that includes product numbers and other specific information – will help search engines correctly identify each image on your site. Plus, it’ll also help your Marketing team properly locate images when they search their media library.

Once uploaded, you should make sure the image’s alt text matches the keywords you are aiming to rank for on that particular page.

Alt Text Image Optimization
 

3. File Types

There are three common image file types that are universally supported by all browsers – JPEGs, PNGs, and GIFs. Deciding which file type to use depends on the use case:

  • JPEGs are great for your run-of-the-mill website images and should be what the majority of your images are saved as. They support 16 million colors and do a great job of compressing file information to a lower size. Your designer should always save their JPEGs as “progressive”, meaning an algorithm will be used to gradually fade in the image for a better page load speed and user experience.
  • PNGs are larger in size and should be used primarily for images that contain a transparent layer or extremely fine detail. They are not as compressed as JPEGs so they should be used with caution.
  • GIFs are mainly used for animations and should always be utilized in place of Flash. They do not compress nearly as well as JPEGs or PNGs, and only support 256 colors.

 

How to Optimize Images: Post-Upload

kraken-iconAlready have a website that has thousands of images? If you’re using WordPress as your CMS, kraken.io is a great tool to optimize your images. The program allows you and your team to do everything with a click of a button. I highly recommend testing the tool on low priority page before applying it to your entire image library.

Once your image has been selected and saved, it is ready for upload to your CMS. As a best practice, text should always be both crawlable by search engines and selectable by your user. Always avoid baking text directly into your image or saving text as a PNG with a transparent background.

Large amounts of text saved as images can result in a manual penalty, due to the search engine reading the site differently than it appears to your users. Text saved as an image is also a missed opportunity to gain a significant amount of SEO value.

Once your image has been uploaded, the most valuable optimization step is to add valuable alt text. While important for accessibility to the visually impaired, the alt text primarily serves as a descriptive SEO caption that should include the keywords you’re targeting for that page.
 

Conclusion

Keep in mind that there is an abundance of optimization techniques for web images, only some of which were covered here. For more information on additional techniques, like vector vs raster images and saving as lossy vs lossless, the Google Developers site has an awesome overview.

Whether you’re the designer or the SEO, image optimization is important. Find the balance and keep Google happy: pick relevant images, name them properly, and always keep page load time in mind.

Looking for some more optimization tips? Here’s how giant eCommerce company, bol.com, optimizes its landing pages.

  • John

    Your image size recommendations do not take into account Retina displays on Mac or new high def PC displays. If your image width is 500px, you should be uploading a 1000px wide image file. On non-retina displays, it will downsample.

  • Stephan Bajaio

    Great post Kristine. One thing worth mentioning regarding naming conventions of files, is to try to avoid using underscores and rather dashes to separate words. The rules to follow in optimizing a URL for search are the same for file naming conventions in search.

  • Kristine Boise

    Hi John – thanks for your input, you’re absolutely right! Since this is a general optimization overview, we didn’t get a chance to dig into all of the display specifics that we would’ve liked to.

amp-header

Accelerated Mobile Pages (AMP) Results Now Live: What Should You Do About It?

Read More