Image Optimization Guide

Overview

In this tutorial, we’ll teach you how to decrease your website’s load time and enhance the user experience through image optimization. Our team has gathered resources and insights for you to help get the most out of your site’s performance without sacrificing aesthetics or increasing load times.

So, you’re looking to optimize your images to improve your page speed? Great! Our team has gathered resources and insights for you to help get the most out of your site’s performance without sacrificing aesthetics or increasing load times.

Carrot uses Google’s PageSpeed Insights when running page speed tests. All page speed reports differ, but we have found using the most popular search engine’s system is best when improving overall rankings. Keep in mind image sizes differ for both mobile and desktop, but PageSpeed Insights runs one test for both. These two (mobile and desktop) require different sizes, but tests aren’t set up to show a combined score. To balance these results, we are focusing on the optimal option that will give the best results for both platforms.

Now, let’s dive into the best ways we know to improve your site’s load speed and overall performance in regard to image optimization.

Carrot’s Automations

Carrot automatically compresses your images when you upload them to the site. Compressed images are basically images with aspects bundled together to efficiently store an image so it can be displayed quickly and efficiently. Without compression, your site’s load time increases, your media storage fills up faster, and you can cause visitors to bounce/leave your site because images take too long to load properly.

When images are uploaded to Carrot sites, they are:

  • Resized to a maximum of 1920px wide and 1200px tall
  • Given a lossy compression of 85%
  • Run through a lossless compression

There’s a lot of information around image compression, and we’ve done our best to automate that part for you.

Image Size

Note: When looking at the size, we will refer to pixels, the number you typically see for width and height.

Images should be sized and reflective of the size you want on the site. Don’t upload a 1920×1920 image for a 150×150 thumbnail image. The scaling process to make the image smaller will hurt load speeds. We recommend doubling the intended size so page speed tests have the best results. For example, a 150×150 image should be 300×300.

To make sizing quick and easy, Carrot utilizes a scaling and resizing tool that you can see immediately after uploading an image. The best thing to use is the Thumbnail, Medium, or Large size options located in the drop-down portion of the image. The resize will automatically display the image on the screen as that scaled size, and you still have the original file in your media folder that can be used elsewhere and adjusted per page.

If you are going to use an image that takes up at least half of your screen, please use a Large image. If your image is less than half of the page, please use a Medium or a Thumbnail size image.

When the scaling takes place, the image resizes to the maximum pixel listed below. The maximum will depend on if the image width is the maximum—an image that’s wider horizontally, or if the height is the maximum—an image that’s taller vertically.

Image Size Guidelines

  • Thumbnail image: Always squared; 150 x 150 pixels
  • Medium image: 300 x 300 pixels
  • Large image: 1024 x 1024 pixels
  • Full-size image: Use for hero & cover blocks only

Exceptions: Hero and cover block images load differently than regular page images. These should be Full-size images (unless you have a massive image).

Securely Link Images

If you are using a script that pulls an image from another source, such as the Better Business Bureau rating badge, be sure the images are from a secure source. If they are not, then you will receive a warning that you have insecure images on your site.

What does this mean? Secure images are hosted on sites with SSL certificates, meaning the site is encrypted to add a layer of security. Some sites may not have an SSL certificate and use a script to host an image, badge, rating, et cetera that will then cause a mark on your site. This is fairly nominal but can be fixed by removing the script and using a static image you upload to Carrot and then link to the respective item or site.

Is Your Image A Link?

If you have chosen to link your image to another URL, then you may need to make it a no-follow link. You only need to do this if your link is going to a commercial source, such as a Facebook page, Instagram page, News Article, or Youtube page. You do not need to make the link no-follow if the URL is set to your own site.

Add Alt Text for Accessibility and SEO

It is very important to consider all people who may visit your site, including those with visual impairments.

Alternative text (commonly known as alt text) is primarily used by screen readers for blind and visually impaired users and also serves as a fallback if the image fails to load.

Make sure that you use alternative text and always title your images appropriately. This ensures screen readers are able to read aloud what the image is and why it’s applicable to the person who may not see what is being displayed in the photo.

Make sure to include relevant keywords related to the image content while keeping it concise and informative. Remember, the alt tag should provide meaningful information to users who can’t see the image, so strive for clarity and relevance.

Avoid stuffing keywords or using generic phrases like “image” or “image of” unless necessary. Here are a few examples of how to write alt text for an image:

Alt Text: “A graph displaying the shift in the REI industry, noting homebuyers are less likely to purchase a home if no one holds a certificate or proof of expertise.”
Alt Text: Family homebuyers team, picturing the father, mother, and child.

Each time you upload a new image to your website, you should add descriptive alt text.

To add alt text to your images go to Content → Media on your site. Find the images missing alt text and provide brief and descriptive text that conveys the content and purpose of the image.

Screenshot showing where to add Alt Text to an image on a Carrot website