How to Optimize Your Images and Stop Slowing Down Your Website!

Website performance is crucial for user experience and search engine optimization. One common culprit behind slow-loading websites is the excessive use of heavy images. Large image files can significantly impact page load times, leading to higher bounce rates and lower conversion rates. To ensure a fast and efficient website, it’s essential to optimize images properly. 

Resize Images to Fit Their Use

One of the fundamental principles of image optimization is resizing them to match their intended use on your website. When I go in to clean up client websites, I find many images are unnecessarily large -causing a substantial burden on loading times. By resizing images to the required dimensions, you can significantly reduce their file size without compromising visual quality.

Consider the following table showcasing the file size reduction achieved by resizing images:

Original SizeResized SizeSize Reduction

So how do you know what size an image needs to be? Here are some general guidelines I use with examples from my website.

Website demonstration showing that a full size background image is usually around 1500px wide by 600px tall.

Full Page & Background Images

Full page images are as wide as the user’s screen size. People are now using larger screens at home in their WFH settings but that doesn’t mean your images need to be the maximum size. Aim instead for a middle of the road optimization based on the content of the image. I personally size my background images between 1400px – 1600px wide with an aspect ratio around 16:9. If I’m using a colored overlay, I will go often go around 1200px because the overlay often compensates for any loss in quality. It should be no more than 200kb, if possible.

I am using my website in the shown examples. The screenshot is taken from my 15″ Lenovo laptop which is a very common size screen for laptop users.

Demonstration of how large a 530px by 360px image is on a webpage.

General Images

When the size of the image doesn’t span the whole page, resize the image to its largest width. In this example, the image size is 530px wide by 360px tall which is almost an image ratio of 2:3. If you don’t know exactly where an image will go yet, I recommend sizing to no larger than 800px in either dimension. It should be under 100kb.

Mobile Images

Always consider using a smaller image for mobile devices especially in the case of full background images. A mobile version can cut the size of an image by 75% and vastly improve mobile speeds. Using a page builder like Elementor allows you to easily use separate image files for the mobile version of your website. This is especially critical for full screen, background images!

Convert Images to the Optimal File Format

Choosing the right file format for your images is crucial for optimization. Different file formats offer varying levels of compression and quality, and selecting the most appropriate one can drastically reduce file sizes.

JPEG is best for photographs and images with many colors. They have a small file size but they do not work for images that have transparency.

PNG is suitable for images with limited colors or transparency, like logos or graphics. It is generally a larger file size so avoid using it for high-quality photographs or images with many colors.

GIF is ideal for simple animations or images with limited color depth, such as icons. This is not for high-quality photographs or images with many colors.

WebP is a modern format with excellent compression and quality. It works with transparency and is fantastic for lowering the file size of large hero or background images. Use it if your website’s target browsers support it, but avoid it if you need compatibility with older browsers.

Choosing the appropriate format based on the image content and requirements can significantly optimize file sizes and improve website performance. If you like tables, here’s a quick sum up:

When To UseWhen NOT To Use
JPGFor photographs and images with complex colors.Images that need transparency or low 
PNGUse with transparent graphics like logos or overlays.Not for photographs or complex colors
GIFFor simple animationsAnything not animated
WebPUse with very large images that need extra compressionWith application that use older/non-compatible browsers
SVG*For icons or logos, vector filesPhotography

Compress, Compress, Compress

Image compression is an essential step for reducing file sizes without sacrificing visual quality.  How do you compress an image? I upload my images to either of these two websites and then re-download the newly compressed image. Simple as that.

However, there is a bit of a balance between file size reduction and image quality when compressing images. Aim for a balance that minimizes file size without introducing noticeable degradation.  Not every image needs to be crystal clear. With CloudConvert, you have a little more control over the level of compression.

My Favorite Compression Tools:

Use a Content Delivery Network (Optional)

A Content Delivery Network (CDN) is a network of servers distributed across various geographic locations. By storing copies of your website’s static content, including images, on multiple servers, a CDN can deliver content more efficiently to users worldwide.

CDNs can help optimize image delivery by reducing the amount of time it takes to load your images. When a user accesses your website, the CDN serves images from the server closest to the user’s location, minimizing the distance the data needs to travel and accelerating load times.

CDN usage can be particularly beneficial for websites with a global audience or those that experience high traffic volumes. It ensures faster image loading and a smoother browsing experience for your users.

Many web hosting providers, especially those with Managed WordPress plans, include a CDN with your plan so take a look to make sure it’s activated.

Have any questions?

I know this is a lot of information to consume but once you become more familiar with the process, it becomes second nature. Your website server and website visitors will thank you!

Share the Post:

Hi, I'm Holly!

Welcome to the blog! Let me know if you have any questions by submitting a contact form.

Recent Posts

Follow Us on Instagram