Images are often responsible for more than half of the file size of a web page. Non-optimized images slow down your website, increase your bounce rate, and harm your SEO. In this article, you will learn how to correctly optimize images for maximum speed without quality loss.

Choosing the right image format

WebP: the modern standard

WebP is the recommended format for web images in 2024. It offers 25-35% smaller files than JPEG at the same quality. WebP supports both lossy and lossless compression and transparency. All modern browsers support WebP, so there is no reason not to use it anymore.

JPEG: for photos without transparency

JPEG remains suitable for photos where no transparency is needed and where you need to support older browsers. Use a quality setting between 70-85% for the best balance between size and quality. Higher percentages provide barely visible improvement but larger files.

PNG: only for transparency

PNG files are often much larger than JPEG or WebP. Only use PNG when you need transparency and WebP is not an option. For logos with few colors, PNG8 can be a compact option.

SVG: for icons and illustrations

Vector images scale perfectly to any size without quality loss. Use SVG for logos, icons, and simple illustrations. SVG files are often smaller than bitmap alternatives and can be styled with CSS.

Compressing images

Online tools

TinyPNG and Squoosh are excellent free tools for compressing images. TinyPNG works well for JPEG and PNG, while Squoosh also offers WebP conversion with real-time quality preview. Upload your images, choose your settings, and download the optimized result.

WordPress plugins

Smush is a popular plugin that automatically compresses images on upload. The plugin can also bulk optimize existing images and supports WebP conversion. After installation, Smush works automatically in the background.

ShortPixel offers more aggressive compression and excellent WebP support. The plugin works with a credit system where you can optimize a number of images for free monthly. A paid plan is available for larger websites.

Imagify from the makers of WP Rocket integrates seamlessly with that caching plugin. It offers three compression levels and automatic WebP conversion with fallback for older browsers.

Setting dimensions correctly

Never load an image that is 4000 pixels wide if it is only displayed at 800 pixels. This wastes bandwidth and unnecessarily slows down your page. Scale images to the maximum display size before uploading.

For responsive websites, use the srcset attribute to offer different sizes. The browser then automatically chooses the right size for the visitor screen. WordPress automatically generates multiple sizes on upload.

Implementing lazy loading

Lazy loading ensures that images only load when they come into view. This significantly speeds up initial page loading, especially on pages with many images.

Native lazy loading

Modern browsers support lazy loading via the loading attribute. Add loading equals lazy to your img elements. WordPress does this automatically since version 5.5. Native lazy loading works without JavaScript and is the simplest solution.

Via caching plugins

LiteSpeed Cache offers extensive lazy loading options. You can set which images should and should not lazy load, configure exclusions for important images above the fold, and show placeholder images during loading.

Images above the fold

Images that are immediately visible without scrolling should actually not lazy load. These images, such as your hero image or logo, should load as quickly as possible. Use preload for critical images and ensure they are optimized for fast LCP scores.

Serving responsive images

With the picture element, you can serve different image formats and sizes based on screen size and browser support. Serve WebP to browsers that support it with a JPEG fallback for the rest. WordPress themes and plugins like Elementor can handle this automatically.

CDN for images

A Content Delivery Network serves images from servers close to your visitors, reducing load times. Cloudflare offers free CDN functionality and can automatically optimize images and convert to WebP. Set up a CDN for the best performance.

Practical checklist

Use WebP as primary format with JPEG fallback. Compress all images before upload or use an automatic plugin. Scale images to maximum display size. Implement lazy loading for images below the fold. Preload critical images above the fold. Consider a CDN for international audiences.

With optimized images and fast LiteSpeed hosting from Theory7, your website loads lightning fast. Contact our support if you need help optimizing your website.