How to optimize your images to speed up your website

Have you done a speed test for your website recently using either GTmetrix or Google PageSpeed? If you haven’t, go try it out!

I don’t know about you, but I used to have a lot of problems with image files that were waaay too big and slowed my website down considerably. After all, images can be pretty heavy if you don’t pay attention!

So I decided to give you my best tips to make sure your images don’t slow down your website

This type of file compresses the best and will give you the quality you need with a smaller file size. This is perfect for stock images or your profile picture. If you have icons with a transparent background, though, you’ll need a PNG file (which supports transparency). If you’re using an animated picture, then GIF is what you want to save it in!

Tip #2: Compress your images as much as possible

Because you start compressing images, though, sit down for a minute and assess your needs. Is your website your portfolio for your photography? You’ll want a much better resolution! But if you’re a health consultant or a dentist, you might not need such a high resolution. Images that are slightly (and I mean “can’t-see-much-of-a-difference” slightly) blurry are not going to turn away potential customers while making your website load a whole lot faster!
I don’t have a perfect compression ratio to give you, you’ll need to test and try it yourself. But compression within 75-90% should make a good difference in the file size!
If you have a WordPress website, I would recommend installing WP Smush to help you with that!

Tip #3: Resize your image to the max width they’ll ever take

This is a little bit more tricky, as you might not always know what the max width of an image is going to be before you add it to your website.

If have a slider or a full-width image that takes the whole width of your monitor, I would recommend saving this image as 1980px wide. This is as big as your images should get, otherwise, they’ll just be too heavy for the users.

For all other images, you can use the Chrome Developer Tools to figure out what the width should be. Check out the GIF below to help you do that!

As you can see, this picture on my about page should be 800px by 533px. That’s as wide as it’ll ever get, so why have more pixels than you need?

Tip #4: Serve different image sizes depending on the screen size

Someone who’s visiting your website from their phone doesn’t need to download a 1980px wide image to be able to see it!
500px would do the trick too!
So how can you send a different size picture to those on mobile? Well, if you have a WordPress website, it’s actually a core feature! So you don’t have to worry about it too much.

The thing you have to remember here is that it’s not because you tell an image to be 300px width that the image itself is going to be smaller. Instead, you’ll just load a massive image in a tiny window. Try to avoid that as much as possible by resizing the image itself instead of the space it will take.

And hey, if you were able to speed up your website by doing this, let me know in the comments how it went! I’d love to know! 😍

Certain links in this post are affiliate links. This means that I may get a percentage of your purchase, at no extra cost to you. I only recommend products and services that I use and love. Thank you for your support!

Keep Reading!

Virginie

Virginie is the founder of CityGirl's Design, a web design company that helps thriving entrepreneurs grow their business by providing them with a website that converts hesitant clients and attracts new ones. If she’s not behind her computer, you can find her hanging out on the beach, either reading a good book or transforming into a mermaid!Learn More >

Let’s Connect!

Search The Website

You can't afford not to.

If your website isn't optimized, it means you're losing money. That could be $50, $100, $1000. Are you ready to let that money get past you?

You have been signed up for the Website Conversion Crash Course!

I've got a course to teach you how to use WordPress cooking...

You'll want first dibs on this, I promise! Lots of clear tutorials, videos, and screenshots to explain to you everything you need to know about WordPress, without that overwhelming feeling you're used to. It's going to be great!

Congrats! You're in!

Get Your Website Checklist Right Away!

Are you building your new website, but you're lost when it comes to the order you should do things? I got you covered! Your checklist will cover all the steps to get you started!

You have Successfully Subscribed!

20+ plugins are waiting for you!

Sometimes, you could really use extra features. But if you don't know they exist, how are you going to use them? Download my Plugin Cheat Sheet to learn about 20+ awesome plugins you might want to use!

You have Successfully Subscribed!

13 Pages PDF Guide That Teaches You Everything You Need to Know About SEO

SEO is important. But if you don't know anything about it, it can seem very complicated. I created this guide to teach you everything you need to know, without the stuff that makes it confusing and overwhelming. And there are 20+ actionable tips you can get started on right away!