The complete beginner's guide to boosting website speed and improving Google PageSpeed and Pingdom scores with essential image optimization techniques. Learn how to enhance performance without sacrificing image quality.
We've all been there—whether you're a beginner or a seasoned designer or developer. You pour your heart into creating a stunning website, and everything looks perfect... until it doesn't perform the way you'd hoped. Slow load times, high bounce rates, and unhappy clients can quickly turn that excitement into frustration. And often, the problem comes down to website speed.
Let’s break it down. A slow loading website means that the size of the page is too big for the network to deliver within a few seconds. So, what exactly contributes to the size of your webpage?
The “Content size by content type” section from Pingdom’s speed test is an excellent starting point to investigate. It lists down the 5 main components of your webpage, sorting them by size, from largest to smallest. Take a look at this sample below. Your test results may not be the same but they’ll be similar. We're going to focus on the top 3 components since they are clearly taking up the most space.
Images make up between 40% to 60% of the average website’s size. That's a LOT! So, you must ensure your images are fully optimized. How can you do that? That is precisely what we'll be learning in this post.
The two simplest FREE tools you can use are:
Google PageSpeed Insights: Be sure to check out desktop and mobile scores since more than half of web traffic today is mobile-driven!
Pingdom: You might wonder why another speed test is necessary. The reason I suggest Pingdom's speed test is that it offers one very useful piece of information: "content size by content type”. We’ll deep dive into this in the next section but this information gives you a great starting point to start optimizing your website.
Now, let’s get down to business. There is a lot, and I mean A LOT of content out there on how to increase website speed. But a lot of it is quite technical and hard to follow, especially for someone who is relatively new to the world of web servers, CDNs, DOM elements and more intimidating jargon found in Google’s PageSpeed and Pingdom’s test results.
After plenty of trial and error myself, I’ve gathered the best tips to help you optimize your images and boost your website’s performance—without having to mess around with code. This guide is especially for those of you who want a no-code solution or aren't familiar with coding. I'll be demonstrating these techniques using Webflow, but you can apply them to any website platform. Let’s dive in and get your site loading fast!
I can't stress the importance of this step enough. If you make sure that the image size you upload to your website in the first place fits the dimensions in which it will actually appear on your website (and no bigger!), you'll save yourself a LOT of hassle down the line. Images that are larger than necessary will slow down your website.
You may have seen this warning in Google’s PageSpeed Insights result: “"Properly Size Images". Here are the steps to do exactly that using Chrome as the browser example.
Pro Tip: Finalize the layout of your webpage before you start building it. This way, you know right at the beginning where each image will go and how big it needs to be to exactly fill the space in the design.
Properly sizing images is one of the simplest yet most effective actions you can take to boost your website’s speed. It’s surprising how often even experienced designers and developers upload images at their original, massive sizes. Photos taken with professional cameras or downloaded from stock photo sites like Unsplash, Pexels, and Pixabay can easily range from 2 to 6 MB! To put that into perspective, Google recommends that your entire webpage should be between 500KB and 2MB in total. If a single image exceeds that, it can drastically inflate your page size and, as a result, slow down your site. The takeaway: resizing images before uploading them is an easy win for faster load times.
After properly sizing your images, the next step is compression and formatting. Compression reduces the file size of your images without significantly compromising quality, which can have a huge impact on your website’s load time. You can also choose a web-friendly format for your images, such as WebP or AVIF. These are next-generation image formats designed to deliver smaller file sizes while maintaining high image quality.
Many modern web builders like Webflow have built-features that make this process easy and automatic. You've probably seen the “Serve images in next-gen formats” warning in Google’s PageSpeed results. Well, this is how it can be addressed.
Webflow now lets you choose which next-gen format to which you want to convert your images. WebP is widely supported across browsers and is a versatile option. AVIF is a newer format, but provides even better compression rates than WebP, meaning smaller file sizes for the same level of quality. However, AVIF is not yet as universally supported as WebP. So,for now, WebP is your best bet for compatibility across most websites and browsers.
However, bear in mind that these tools can sometimes be overzealous with compression, leading to images that appear less sharp than you’d like—especially for graphics-heavy images, such as mockups or screenshots with text. If you find this happening, consider using manual compression tools to fine-tune your images.
My favorite tool is the “Bulk Images to WebP Convertor” app on the Chrome Web Store which allows you to bulk convert images for free and also choose how much they should be compressed. Other tools like Squoosh and TinyPNG also provide efficient ways to manually compress images before uploading them to your website.
Most of us design our websites on our laptops or desktops. As a result, this screen size is the one we focus on the most, sizing everything to appear perfectly on a desktop screen. BUT if we serve the same full-size images on smaller devices like mobiles, they will significantly slow down your website. This means a great “Desktop ” score from Google PageSpeed but poor "Mobile" score
The good news is that many modern website builders, including Webflow, make images responsive by default. Webflow will automatically generate up to 7 smaller variants of your images to serve them at the perfect size for smaller screens. BUT, take note of the following:
If you explicitly set the width and height of your images in pixels, Webflow won’t be able to make the image responsive! You must never fix image dimensions in pixels.
See the image below for a working example of how images should be sized.
You can make sure your images are responsive by simply clicking on an image, heading over to the “Settings”, pressing Ctrl + Shift + O (Windows) or Cmd + Shift + O (Mac) and making sure the “Responsive Image” box is checked.
For browsers, your webpage is generally divided into two areas: “above-the-fold” and “below-the-fold”. “Above-the-fold” (also referred to as “First Contentful Paint” as per Google PageSpeed’s terminology) refers to the first paint of your web page that the user sees without scrolling down. Anything below that is considered “below-the-fold”.
You want to make sure that your web server doesn’t waste resources loading “below-the-fold” images as soon as the webpage loads. Enter “lazy loading”: the practice of delaying loading of resources until they actually need to appear on your website.
Luckily, Webflow applies “lazy loading” for all images by default. BUT the flipside to this is that even your above-the-fold images are set to load lazily by default, including those in your hero section. This is a problem because the browser is instructed to deliberately delay loading resources! You may have seen the following warning in Google’s PageSpeed test: “First Contentful Paint image was lazily loaded”.
You need to make sure that “lazy loading” is disabled for all above-the-fold images and enabled for all below-the-fold images.
Follow these steps to configure load settings for your above-the-fold (or hero) image(s):
One of the most efficient ways to improve your website’s speed and scalability is by using SVG (Scalable Vector Graphics) format for icons and simple graphics. Unlike traditional image formats like JPEG and PNG, which are pixel-based, SVG is a vector format. Icons are usually simple graphics that don’t require complex color variations or high-resolution details. SVG is perfect for these because they can be resized to any dimension without losing clarity or becoming pixelated, and they are typically smaller in file size compared to PNG or JPEG files.
But that's not all. Another reason that SVGs are great for creating fast-loading websites is that modern browsers render SVGs natively, meaning no additional loading time is required for processing. SVGs can be embedded directly into HTML or CSS, allowing the browser to render them quickly, leading to faster load times.
I have personally found using SVGs for icons to be a game-changer. Not only do they offer pixel-perfect clarity at any size, but their lightweight file format significantly boosts website speed. What I love most is the flexibility—they allow you to easily edit size and color directly within your website builder, without needing to jump back and forth between a design tool and the site. This makes SVGs incredibly convenient for fine-tuning your icons until they look just right, saving both time and effort.
Rather than worrying about all the things you can't control as a beginner, take charge of the ones you can. Images are low-hanging fruit as far as optimiziation for the web is concerned. Here's a recap of the ways in which you can improve your website's speed by just optimizing images on your website:
