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 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.
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.
The GIF below will show you how a large image can be adjusted on the page to a preferred size. Notice how height and width are automatically changed to scale and keep the image’s resolution intact.
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 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.
It is very important to consider all people who may visit your site, including those with impairments. 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.