Optimizing images for the web without losing quality

BIG linden / Support Docs / Optimizing images for the web without losing quality



We often struggle with making our images web-friendly. How can we effectively optimize our website images without affecting their quality?


The client needs help understanding how to optimize images for web use without losing image quality.

Optimizing images for the web without losing quality

Image optimization is a balancing act of finding the lowest file size possible while maintaining an acceptable level of image quality. There are a few different methods you can use to optimize your images for the web, all with varying degrees of complexity and effectiveness.

Editing tools like Photoshop and online editors: You can manually reduce the image file size using image editing tools such as Adobe Photoshop, or free online alternatives like Pixlr and Canva. They come equipped with save-for-web functionalities that compress image files. This approach allows you to determine the extent of compression you want to apply; a higher compression means a smaller file size but also less quality.

1. Ensure Image Dimensions are Appropriate: When you’re uploading an image, make sure you’re delivering images with appropriate dimensions to avoid unnecessarily large files.

2. Use srcset and sizes attributes: These are used to inform the browser about the different variant files of an image and help it pick the most suitable one according to user’s viewport size.

3. Utilize Client Hints: This standard allows the client device to report its viewport dimensions to the server. Servers can then use this information to send a variant of an image that best fits those dimensions, reducing the amount of data transmitted.

4. Choose Appropriate Image Format: Using modern file formats such as WebP and AVIF will give better performance for your images than traditional JPEG or PNG formats due to their better compression algorithms.

5. Adjust Image Quality: By lowering the quality you can reduce file size. Finding a balance where quality loss is acceptable can lead to significant reductions in load time.

6. Provide Image Dimensions in HTML: Providing specific height and width attributes in your image tags will prevent layout shifting while the image is loading.

7. Lazy Loading Implementation: Only load images as they are needed (when they appear in users’ viewport) rather than all at once when a page loads, speeding up initial load times.

8. Compress JPEG & PNG Image WordPress plugins: This category of plugins allows you to automatically optimize images as they are uploaded to WordPress. Popular plugins that offer this functionality include WP Smush, EWWW Image Optimizer, and ShortPixel Image Optimizer.

9. Browser-based tools: Websites such as TinyPNG, or allow you to upload and compress images in bulk, then download the optimized versions — all without needing to install any software.

10. CDN or third-party services: Content delivery networks such as Cloudflare and Akamai, among others, often have built-in features that allow you to serve optimized images. Moreover, they speed up your site by serving your content from servers closest to your users.

11. Lossy vs Lossless compression: When it comes to the actual compression process, there are two main methods used: lossy and lossless. Lossy compression reduces file sizes by removing certain parts of data from the original file— resulting in some quality loss (usually not noticeable). However, the reduction in file size is often significant. On the other hand, lossless compression reduces file size without losing any original data; thus, the quality remains identical to the original. The drawback of lossless compression is that it often results in smaller reductions in file size compared to lossy compression.

The preferred method ultimately depends on the specific needs and resources of your organization. What’s paramount, though, is that website images are optimized one way or another as larger image sizes slow down site speed—a critical factor for user experience.

3 Critical Tips for Optimizing Images

1. Optimize Image Dimensions: One of the biggest improvements you can make is to deliver images with correct dimensions. Using features like the srcset attribute lets you set multiple image sources depending on the viewer’s browser, preventing unnecessarily large images from being loaded.

2. Use Modern Image Formats: Switching to more efficient image formats like AVIF can further improve your site’s performance. AVIF provides a better compression ratio than formats like JPEG or PNG, while still maintaining high image quality.

3. Predefine Image Sizes in HTML Markup: To minimize layout shifts during loading, include dimensions of an image in your website’s HTML markup. This allows space for an image to be allocated on the site before the image is fully loaded, improving user experience and positively affecting site performance metrics such as the Cumulative Layout Shift (CLS).

Additional reading

  • This resource discusses the importance of optimizing images for the web, as images make up 51% of the bytes loaded on an average webpage. Examples of optimization include appropriately sizing images and choosing the correct format. Using tools like Cloudflare’s Image Optimization Testing Tool can help discover areas for improvement. The article addresses how factors like page load speeds impacts bounce rates and user experience, and breaks down how metrics like Largest Contentful Paint (LCP), First Input Delay (FID) and Cumulative Layout Shift (CLS) measure a page’s performance. Ways to optimize image size and performance include using srcset and sizes attributes, client hints, selecting proper image format (like AVIF, JPEG, PNG), adjusting quality settings, or using techniques like progressive loading.
  • Read Google’s guidelines on image optimization.
  • This useful guide from CSS-Tricks offers various approaches to serve scaled images.
  • WPExplorer has a great article detailing various WordPress plugins for image optimization.

More articles about Development

More articles related to .

Capabilities related to Development:

Bespoke WordPress websites for organizations of any size and any industry.


Get a 30 minute 1:1 consult with a BIG consultant and get a 7 page report on making digital work in your organization with key insight into paths for success and playbooks just for your unique needs.

Please understand not all requests can be met. Please contact us with any questions.