Images and Pagespeed

Images are a great way to make a website look beautiful and professional. But if they’re not used correctly, they can have a huge negative effect on your pagespeed. Compared to text, an image is often a very large file. This means that unoptimized images can seriously hurt your page’s performance and, in turn, your SEO.

The good news is that you can use images on your page without hurting your pagespeed. You just need to follow a few simple best practices.

Use the Right Image Dimensions

Photos taken with a modern camera or phone often have a high resolution. A photo from an iPhone, for example, can be thousands of pixels wide. A higher resolution results in a larger file, which means it takes longer to load. This is often a waste of your visitor’s bandwidth, especially if the photo is only displayed as a small thumbnail.

To fix this, you should always try to make the original image about the size of the space it gets on your website. For example, if a photo is displayed at 300 x 200 pixels on your site, there is no need to upload a massive 3000 x 2000 image. This can save you up to 90% in bandwidth without losing any image quality. Our platform can help with this. The automated features on Clickrank can scan your website for these issues and give you a clear, prioritized list of what to fix.

Responsive images

The above example sounds easy, but given the variety of screen sizes today, it can be a bit more complex. On a desktop, you might want to show an image at 600 x 400 pixels, while on a mobile phone, 300 x 200 pixels makes more sense.

This is where responsive images come in. Responsive images allow you to serve a different image depending on the screen size of your visitor. You can resize the image to a few different formats and then use a simple line of code to tell the browser which image to use. This way, smaller screens will display smaller images, which results in better page performance.

Optimize Image Files

Even if you have the right image dimensions, your images can still be a bit too large. This is where image optimization comes in.

• Use the right file type: Different image formats are better for different types of images. JPEG is great for photos, while PNG is better for graphics and screenshots. SVG is perfect for logos and icons.
• Compress your images: You can reduce the quality of an image to reduce its file size. Normally, reducing the quality of a JPEG image to about 75% of the original is almost invisible, but the file size can be up to 85% smaller. You can use online tools to compress your images for you.
• Add alt text: This is a crucial step for both SEO and user experience. Alt text is a description of an image that is used by search engines to understand your content. Our free AI Image Alt Text Generator can help you write a good description for your images, which is also a great way to improve your SEO.

Other ways to improve image performance

Lazy-load offscreen images

Lazy-loading is a technique that means you don’t load an image until it needs to be shown on the screen. This is a great way to improve pagespeed on a long page with a lot of images. It allows the browser to focus on loading the images that are visible first, and then it loads the other images as the user scrolls down the page.

Use modern image formats

There are new image formats, like WEBP, that have great compression and can be animated. While not all browsers support them, you should consider using them where possible.

Use video formats for animated content

GIFs are often used for short animations, but they are not very efficient. Longer animated GIFs should be loaded as a video instead. This saves bandwidth and makes the page faster.