Image optimisation for faster websites: choose the right format, resize and compress, use WebP and lazy loading, and keep pages quick.
Why Image Optimisation Matters to Me
I remember the early days of building websites. It felt like a wild west, where aesthetics often trumped performance. I’d painstakingly craft a beautiful design, often incorporating high-resolution images to showcase my work, only to be met with frustrated users complaining about slow loading times. Back then, my understanding of web performance was rudimentary at best. I thought a good internet connection was all that mattered. Oh, how wrong I was.
Today, my perspective has completely shifted. I've come to understand that images, while crucial for visual appeal and conveying information, are often the heaviest elements on a webpage. They can single-handedly cripple a site's loading speed, leading to higher bounce rates, lower search engine rankings, and ultimately, a poor user experience. For me, image optimisation isn't just a technical task; it's a fundamental aspect of building a successful and user-friendly website.
It's about respecting my visitors' time and ensuring they have a smooth, enjoyable journey through my content. A slow website, in my opinion, is a broken website. I've seen firsthand how a few extra seconds of loading can translate into lost opportunities and diminished engagement. That's why I've dedicated myself to understanding and implementing best practices in image optimisation, and I want to share my insights with you.
The Impact of Unoptimised Images
I've learned through painful experience the myriad ways unoptimised images can sabotage a website. Firstly, and most obviously, there's the agonizingly slow loading time. Imagine clicking a link, only to stare at a blank screen or a gradually appearing image for what feels like an eternity. I've been there as a user, and it's incredibly frustrating. This directly translates to a higher bounce rate. If my site doesn't load quickly, people will simply leave and find a competitor. It’s that simple.
Secondly, search engine optimisation (SEO) is heavily impacted. Google and other search engines prioritise fast-loading websites. If my site is sluggish due to bulky images, I can expect to rank lower in search results, making it harder for potential visitors to even find me. This is a huge blow to visibility and organic traffic.
Thirdly, mobile users are particularly sensitive to large image files. With varying data plans and network speeds, an unoptimised image can quickly chew through a user’s data allowance and take an age to load on a mobile connection. I strive to create an experience that is equally good on all devices, and large images are a significant hurdle to that goal. Finally, there are the financial implications. If I'm using a content delivery network (CDN) or paying for bandwidth, large images can significantly increase my hosting costs. It’s an unnecessary expense that can be easily avoided with proper optimisation.
For those interested in enhancing their website's performance, a related article that explores the beauty of nature while providing insights into optimizing digital content is "Conquering Nephin: A Walk to the Summit." This piece not only captures the breathtaking experience of hiking Nephin but also emphasizes the importance of efficient image usage in storytelling. You can read more about it here: Conquering Nephin: A Walk to the Summit.
Choosing the Right Image Format
When I approach image optimisation, one of the first decisions I make is selecting the appropriate file format. This isn't a one-size-fits-all answer; each format has its strengths and weaknesses, and my choice depends entirely on the type of image and its intended use. I’ve spent a lot of time experimenting and learning the nuances of each.
JPEG (or JPG)
For photographic images with a wide range of colours and gradients, I almost always turn to JPEG. It's a lossy compression format, meaning it discards some image data during compression, which can lead to a slight loss in quality. However, for most photographs, this loss is imperceptible to the human eye, especially when balanced against the significant file size reduction. I find it perfect for product images, hero banners with complex backgrounds, and any image where visual richness is paramount but precise detail isn't the absolute highest priority. I always aim for a good balance between quality and file size here, often starting with a quality setting of 70-80% and adjusting as needed.
PNG
When I need images with transparency or sharp lines, such as logos, icons, or illustrations with solid blocks of colour, PNG is my go-to. Unlike JPEG, PNG is a lossless compression format, meaning it retains all of the original image data. This is crucial for maintaining crisp edges and preventing artefacts around transparent areas. While PNG files can be larger than JPEGs for photographic content, their advantages for specific image types are undeniable. I often use PNG-24 for full transparency and a wider colour palette, and sometimes PNG-8 for simpler graphics with a limited colour range, as it offers even smaller file sizes.
GIF
Honestly, I use GIF sparingly these days. Its primary use case for me is for simple animations. For static images, its limited colour palette (256 colours) and larger file sizes compared to JPEGs and PNGs make it less ideal. If I need a static image with transparency, I'll always opt for PNG. However, for those short, looping animations, it still holds a niche place in my toolkit. I always keep my GIF animations as short and simple as possible to minimise their impact on page load.
WebP
WebP is a format I've become increasingly fond of. Developed by Google, it offers superior compression compared to JPEG and PNG, often resulting in significantly smaller file sizes without a noticeable drop in quality. It supports both lossy and lossless compression, as well as transparency. My strategy with WebP is to use it as a modern alternative wherever possible. I often serve WebP images to browsers that support it, while falling back to JPEG or PNG for older browsers. This "srcset" approach, which I'll elaborate on later, allows me to leverage the benefits of WebP without sacrificing compatibility. The file size savings can be truly remarkable, making a tangible difference to my page load times.
Resizing and Responsive Images
After I've decided on the best image format, my next crucial step is to ensure my images are appropriately sized. This involves two main considerations: the actual dimensions of the image and how it responds to different screen sizes. I've learned that uploading a massive image and then letting CSS shrink it down is a cardinal sin of web performance.
Sizing Images Correctly
The most fundamental rule I follow is to never upload an image larger than it will actually be displayed. If an image is going to be displayed at 800 pixels wide, I ensure the image file itself is no more than 800 pixels wide. Uploading a 4000-pixel-wide image and then using CSS to constrain its size is incredibly wasteful. The browser still has to download all those unnecessary pixels, even if it doesn't display them.
I use image editing software to resize images to their maximum display dimensions before uploading them. This simple step alone can dramatically reduce file sizes. For example, a full-width hero image might need to be 1920px wide, but a thumbnail in a gallery might only need to be 300px. I prepare separate images for these different contexts.
Leveraging Responsive Images with srcset
This is where things get a bit more sophisticated, and it's a technique I rely heavily on. With the proliferation of devices with different screen resolutions and pixel densities (like Retina displays), serving a single image size isn't optimal. A high-resolution image on a small mobile screen is overkill, and a low-resolution image on a large desktop monitor will look pixelated.
The srcset attribute allows me to define a list of different image sources, each with a corresponding descriptor (either width or pixel density). The browser then intelligently chooses the most appropriate image from this list based on the user's screen size and device capabilities.
Here’s a simplified example of how I use it:
<img
src="image-small.jpg"
srcset="
image-small.jpg 500w,
image-medium.jpg 1000w,
image-large.jpg 1500w
"
sizes="(max-width: 600px) 500px, (max-width: 1200px) 1000px, 1500px"
alt="Descriptive alt text for the image"
/>In this example, I'm providing three different versions of the image: image-small.jpg (500 pixels wide), image-medium.jpg (1000 pixels wide), and image-large.jpg (1500 pixels wide). The sizes attribute tells the browser how much space the image will take up at different viewport widths. This combination ensures that users download only the image that's truly necessary for their specific device and screen size, leading to significantly faster load times and a better visual experience across the board. I often generate these different sizes automatically during my build process or using an image optimisation service.
+ Join Our Writing Community for FREE
Chain Story Online
Fun, free, flash fiction writing with writers just like you. You have ~100 words to begin a story or continue a story and make it yours.
Story Bible Studio
Digital space for writers to plot, plan, and build better stories. Designed by writers for writers. Your final draft awaits.
The picture Element for Art Direction and Format Fallbacks
While srcset is excellent for resolution switching, the <picture> element gives me even more control, especially for "art direction" (where I want to crop or change an image for different layouts) or for serving different formats like WebP with fallbacks.
With <picture>, I can specify multiple <source> elements, each with its own media attribute (for responsive behavior based on viewport size) or type attribute (for format fallbacks).
My typical implementation for WebP with a JPEG fallback looks like this:
<picture>
<source type="image/webp" srcset="image.webp" />
<img src="image.jpg" alt="Descriptive alt text" />
</picture>Here, the browser will first try to load image.webp. If it supports the WebP format, it will use that. If not, it will fall back to the <img> tag and load image.jpg. This allows me to leverage the superior compression of WebP for modern browsers while ensuring compatibility with older ones. For art direction, I might use multiple <source> elements with media queries to serve different crops of the same image depending on whether the user is on a mobile or desktop device. This level of control is invaluable for both performance and design consistency.
Image Compression Techniques
Once I've chosen the right format and ensured my images are appropriately sized, my next focus is on compression. This is where I can really fine-tune file sizes without sacrificing too much visual quality. I approach compression with a critical eye, always striving for the smallest possible file size that still meets my aesthetic standards.
Lossy Compression
For formats like JPEG and WebP (when used in its lossy mode), I rely on lossy compression. This technique works by discarding some "unnecessary" image data, leading to significantly smaller file sizes. The trick here is to find the sweet spot between file size reduction and perceived image quality.
I typically use image editing software (like Photoshop, GIMP, or even online tools) to adjust the quality setting. For JPEGs, I usually start around 70-80% quality. In many cases, I find that a 75% quality setting offers a substantial file size reduction compared to 100%, with very little, if any, noticeable degradation in visual quality. For WebP, the quality settings can also be adjusted, and I often find I can go a bit lower (e.g., 60-70%) while maintaining a visual quality equivalent to a higher-quality JPEG. It's an iterative process: I compress, then preview, then compress again if I think I can get away with a smaller file size without negatively impacting the user's perception of the image.
Lossless Compression
For formats like PNG and WebP (when used in its lossless mode), I employ lossless compression. As the name suggests, this method compresses the image without discarding any data, meaning the decompressed image is pixel-for-pixel identical to the original. While it doesn't achieve the dramatic file size reductions of lossy compression, it's crucial for images where exact pixel integrity is paramount, such as logos, icons, and illustrations with sharp lines and distinct colours.
Tools like Optimizilla, TinyPNG, or even built-in options in graphic design software can apply lossless compression algorithms to my PNGs, removing redundant metadata, stripping out unnecessary colour information, and optimising the colour palette without altering the image's appearance. I always run my PNGs through a lossless compressor before deploying them. For WebP in lossless mode, it still often outperforms PNG in terms of file size.
Server-Side and Automated Optimisation
Manually optimising every image can be time-consuming, especially for large websites. That's why I often integrate server-side or automated optimisation into my workflow.
Many content management systems (CMS) like WordPress have plugins that can automatically optimise images upon upload. These plugins can resize, compress, and even convert images to WebP, saving me a significant amount of manual effort.
I also frequently use image optimisation services or CDNs (Content Delivery Networks) that offer on-the-fly image optimisation. When an image is requested, the service can detect the user's browser and device, then serve a dynamically optimised version of the image – in the correct size, format (e.g., WebP if supported), and compression level.
This is incredibly powerful as it ensures every user gets the most optimised version of an image without me having to prepare dozens of variants manually. Cloudinary, Imgix, and even some CDN providers offer these capabilities, and I find them indispensable for scaling my image optimisation efforts. They take a lot of the heavy lifting off my plate, allowing me to focus on creating content while knowing my images are being served efficiently.
In the quest for a faster-loading website, understanding the principles of image optimisation is crucial. A related article that dives deeper into this topic is available at Enda Storrie's blog, where you can find valuable insights on techniques to enhance your site's performance. By implementing these strategies, you can significantly improve user experience and reduce bounce rates, making your website more efficient and appealing to visitors.
If you're looking for a collaborative writing platform, check out Chain Story Online. It's a great way to connect with other writers and create stories together. Many users have found inspiration and creativity through Chain Story Online.
Lazy Loading and Performance Considerations
Beyond the image files themselves, how and when images are loaded significantly impacts overall page performance. I've found that even perfectly optimised images can still slow down a page if they're all loaded simultaneously, especially if they're not immediately visible to the user. This is where lazy loading and other performance considerations come into play.
Implementing Lazy Loading
Lazy loading is a technique where images are not loaded until they are actually needed, typically when they scroll into the viewport. This dramatically improves initial page load times, as the browser only has to download the images that are immediately visible. Images further down the page are only fetched as the user scrolls, reducing bandwidth consumption and improving perceived performance.
I implement lazy loading primarily using the loading="lazy" attribute on my <img> tags:
<img src="image.jpg" alt="Descriptive alt text" loading="lazy" />This is a modern, natively supported browser feature that works wonderfully across most contemporary browsers. For older browsers that don't support loading="lazy", or for more complex scenarios, I might use a JavaScript-based lazy loading library. However, I always prefer the native solution when available due to its simplicity and better performance. I also make sure to set appropriate width and height attributes on my images (or define them via CSS) even when lazy-loading. This helps prevent Cumulative Layout Shift (CLS), a frustrating visual instability where content jumps around as images load.
Preloading Critical Images
While lazy loading is excellent for off-screen images, there are times when I want an image to load as quickly as possible – for instance, a hero image or a logo that's crucial for the initial visual experience. For these critical images, I use the rel="preload" attribute in my HTML's <head> section.
<link
rel="preload"
href="/images/hero-image.jpg"
as="image"
fetchpriority="high"
/>This tells the browser to start fetching this image very early in the rendering process, even before it encounters the <img> tag in the document body. This can significantly improve Largest Contentful Paint (LCP), a key Core Web Vitals metric that Google uses for ranking. I use this sparingly, only for images that are truly critical to the initial user experience, as preloading too many resources can actually have a negative impact.
Serving Images from a CDN
I almost always serve my images from a Content Delivery Network (CDN). A CDN distributes my image files across a global network of servers. When a user requests an image, it's served from the server geographically closest to them, significantly reducing latency and speeding up delivery. This is particularly important for users who are far away from my primary hosting server.
Beyond speed, CDNs often offer built-in image optimisation features, as I mentioned earlier. They can automatically resize, compress, and convert images to optimal formats (like WebP) on the fly, tailoring the image served to the user's specific device and browser capabilities. This combination of geographic distribution and automated optimisation makes CDNs an incredibly powerful tool in my image optimisation arsenal. It’s an investment that pays dividends in performance and user satisfaction.
HTTP Caching for Images
Another critical performance consideration is leveraging browser caching for images. When a user visits my site, I want their browser to store the images locally so that on subsequent visits or page navigations, they don't have to download them again. I achieve this by setting appropriate HTTP cache headers on my web server.
I typically configure my server (e.g., Apache or Nginx) to send Cache-Control and Expires headers for image files. These headers tell the browser how long it should store the image before checking for a new version. For static assets like images, I often set a long cache expiry time, sometimes up to a year, because these files don't change very often. If an image does change, I ensure its filename is updated (e.g., image-v2.jpg or image.12345.jpg) so that the browser knows to fetch the new version. This dramatically improves performance for repeat visitors and is a relatively easy win for any website.
In the quest for a faster website, image optimization plays a crucial role in enhancing user experience and improving loading times. For those looking to delve deeper into the benefits of optimizing their online presence, a related article discusses the transformative impact of WordPress on business success. You can explore this insightful piece here, where it highlights how effective website management can lead to increased engagement and conversions.
Tools and Workflow for Image Optimisation
Over the years, I've developed a robust workflow and assembled a collection of tools that help me streamline my image optimisation process. It's not just about knowing the techniques; it's about having efficient ways to apply them consistently.
Image Editing Software
My journey with image optimisation always starts with traditional image editing software. For detailed work, I rely on tools like Adobe Photoshop or its free open-source alternative, GIMP. These allow me to perform the initial steps:
- Cropping: Removing unnecessary borders or elements to focus on the key subject and reduce overall pixel count.
- Resizing: Accurately setting the maximum display dimensions (e.g., 1920px wide for a hero image, 300px for a thumbnail) before any compression.
- Basic Colour Correction: Ensuring the image looks its best before compression, as compression can sometimes exacerbate imperfections.
- Saving for Web: Most of these tools have a "Save for Web" or "Export" function that provides granular control over quality settings (for JPEGs) and transparency (for PNGs), allowing me to experiment and find the optimal balance between quality and file size. This is where I make my initial decisions about JPEG vs. PNG and their respective quality settings.
Dedicated Image Optimisation Tools
While image editors are great for the initial prep, I also integrate dedicated image optimisation tools into my workflow for further fine-tuning.
- Online Compressors (e.g., TinyPNG, Optimizilla): For individual images, especially PNGs, I frequently use online tools like TinyPNG. They apply advanced lossless and lossy compression algorithms that often yield smaller file sizes than what I can achieve directly from my image editor, particularly for PNGs without compromising quality. I just drag and drop, and it does the magic.
- Desktop Applications (e.g., ImageOptim for Mac, FileOptimizer for Windows): For batch processing or when I prefer an offline solution, I use desktop applications. These tools can automate the process of stripping metadata, re-compressing, and converting formats across multiple images in a folder, saving me a lot of time.
- CLI Tools (e.g., ImageMagick, ffmpeg): For more advanced, script-driven optimisation, especially within a development pipeline, I've used command-line interface (CLI) tools. ImageMagick, for example, is incredibly powerful for resizing, converting formats, and applying compression programmatically. This is particularly useful in automated build processes where I might generate multiple responsive image sizes from a single source image.
Content Management System (CMS) Plugins
If I'm working with a CMS like WordPress, I almost always install and configure an image optimisation plugin. Plugins such as ShortPixel, Imagify, or Smush can:
- Automatically Optimise on Upload: They compress images as soon as I upload them to the media library.
- Serve WebP: Many can automatically convert images to WebP and serve them to compatible browsers, with a fallback for others.
- Lazy Load: They often integrate lazy loading, so I don't have to manually add the
loading="lazy"attribute to every image. - Generate Responsive Sizes: Some can even generate different image sizes for
srcsetautomatically.
These plugins are a huge time-saver and ensure that my optimisation efforts are consistently applied without needing constant manual intervention after the initial setup. They become a critical part of my 'set it and forget it' strategy for ongoing content creation.
Browser Developer Tools
Finally, my browser's developer tools are indispensable for verifying my optimisation efforts. I regularly use the "Network" tab to:
- Check File Sizes: I can see the actual file size of each image downloaded and how long it took.
- Verify Format: I confirm that WebP images are being served when expected.
- Audit Loading Order: I ensure lazy-loaded images aren't loading prematurely and that critical images are fetched early.
- Simulate Mobile Networks: I often throttle my network speed to simulate slower connections, which helps me understand the real-world impact of my image optimisation on users with less-than-ideal internet access.
The "Lighthouse" audit tool (built into Chrome's DevTools) also provides excellent recommendations for image optimisation, identifying unoptimised images, suggesting correct sizes, and highlighting opportunities for lazy loading or next-gen formats. This iterative process of optimising, deploying, and then testing with developer tools ensures I'm always striving for the best possible performance for my images.
Next step: Want to go further? Read our honest Hostinger review.
Related reading: Website Speed: How to Test It and Make It Faster · How to Make Your Website Mobile-Friendly
Enda Storrie is a writer and the creator of Story Bible, the planning journal and app for writers, and Chain Story Online, a free collaborative storytelling platform.
