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. We’ll cover
Carrot automatically compresses your images when you upload them to the site. Compressed images are basically images that have aspects that are 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 are taking too long for your site 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 Matters
* When looking at the size, we will refer to pixels, which is the number you typically see for width and height.
Images should be sized reflective of the size you want them on the site, ie 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 a 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.
always squared at 150×150 px
Max height or width is 300 px
Max height or width is 1024 px
Use for hero and cover block images only
Image Size Exceptions
Hero and cover block images load differently than regular page images. These should be Full-size images (unless you have a massive image).
Linking Images Should be Secure
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 that have SSL certificates, meaning the site is encrypted to add a layer of security. Some sites may not have an SSL certificate and they may 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 nofollow 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 nofollow if the URL is set to your own site.
Here’s how you can make that happen:
It is very important to consider all of the 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.
Below are some examples of alternative text for images using hypothetical examples.
Alt Text: “A representative is seen taking a call for Krista that would lead to a home sold above asking price.”
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 everyone from the grandmother who inspired it all to the baby whom it’s all for.”
Need more help?
If you see any other results in the PageSpeed Insights that aren’t covered on this page, please reach out to our Support team at Support@Carrot.com or via live chat.
We’d love to help you improve as much as possible!