Best Practices for Image Optimization: Format & Compression

Table Of Contents

Introduction

Have you ever visited a website and waited a long time for the page to load? Or noticed that some websites feel fast and smooth while others feel heavy and slow? One of the biggest reasons behind this difference is images. Images are often the largest files on a webpage, and if they are not optimized properly, they can dramatically slow down your website.

Image optimization is the process of reducing the file size of your images as much as possible without sacrificing their visual quality, and making sure they are set up in a way that search engines can understand them. When done correctly, image optimization can make your website faster, improve user experience, and help your pages rank higher on Google and other search engines.

In this article, you will learn everything you need to know about the best practices for image optimization. We will cover image formats, compression techniques, dimensions, SEO tips, and much more. Whether you are a complete beginner or someone who already has some web experience, this guide is written in plain, easy-to-understand language so you can follow along and apply these tips right away.

Why Image Optimization Matters

1.1 The Impact on Website Speed

Think of your website as a road and your files as cars on that road. If there are too many heavy trucks (large image files), traffic slows down. A slow website frustrates visitors, and most people will simply leave if a page takes more than a few seconds to load. Studies consistently show that even a one-second delay in page load time can reduce the number of visitors who stay on your page.

Optimized images are like replacing those heavy trucks with lighter, faster vehicles. The road clears up, traffic flows smoothly, and everyone reaches their destination faster.

1.2 The Impact on SEO and Search Rankings

Search engines like Google care deeply about user experience. Page speed is one of the factors Google uses to decide how high your page should rank in search results. Google’s Core Web Vitals, a set of performance metrics, include measurements directly affected by image loading times. If your images are too large or improperly configured, they can hurt your search rankings.

Additionally, Google reads image file names, alt text, and other metadata to understand what your images are about. Properly optimized images give Google more useful information, which can help your content appear in Google Image Search and improve your overall SEO visibility.

1.3 The Impact on User Experience

Users form an impression of your website within seconds of landing on it. Blurry images, images that load slowly, or images that look broken are all red flags that drive users away. On the other hand, sharp, fast-loading images create a professional and trustworthy impression.

On mobile devices, this is even more important. Mobile users are often on slower internet connections, and large images can eat up their data and patience simultaneously. Optimizing images ensures a great experience for all visitors, regardless of their device or connection speed.

Choosing the Right Image Format

One of the first and most important decisions in image optimization is choosing the correct file format. Different formats are designed for different types of images, and using the wrong one can result in unnecessarily large files or poor image quality.

2.1 JPEG (or JPG)

JPEG is one of the most widely used image formats on the web. It is best suited for photographs and images with lots of colors and gradients, such as product photos, blog header images, and landscape pictures.

JPEG uses a type of compression called lossy compression, which means it removes some image data to make the file smaller. The trick is to find the right balance: too much compression makes the image look blurry or blocky (known as compression artifacts), while too little compression leaves the file unnecessarily large.

Pro Tip: For most photographs, saving a JPEG at 70-80% quality gives you the best balance between file size and visual quality.

When to use JPEG: photographs, images with gradients, complex color images, blog post images.

When NOT to use JPEG: images that require a transparent background, logos, icons, or images with text.

2.2 PNG

PNG is another very popular format, and it is best known for its ability to support transparent backgrounds. It uses lossless compression, meaning it does not throw away image data, so the quality is preserved completely.

Because PNG does not sacrifice any data, PNG files tend to be larger than JPEGs. This makes them a poor choice for photographs but an excellent choice for graphics, logos, icons, and any image where you need crisp, clean edges or a transparent background.

There are two main types of PNG: PNG-8 (supports up to 256 colors) and PNG-24 (supports millions of colors). PNG-24 produces higher quality images but at the cost of larger file sizes.

Pro Tip: Use PNG for logos, icons, and graphics with text. Use tools like imagetotextme to compress PNG files without losing quality.

When to use PNG: logos, illustrations, icons, screenshots, images with transparency.

When NOT to use PNG: large photographs (file sizes will be too large).

2.3 WebP

WebP is a modern image format developed by Google specifically for the web. It offers both lossy and lossless compression and produces significantly smaller file sizes than both JPEG and PNG while maintaining excellent visual quality.

In practical terms, a WebP image is typically 25-35% smaller than a comparable JPEG and up to 26% smaller than a PNG. This makes WebP a powerful tool for speeding up your website.

The main consideration with WebP is browser support. As of today, WebP is supported by all major modern browsers including Chrome, Firefox, Safari, and Edge. However, very old browsers may not support it, so it is wise to have a fallback JPEG or PNG available.

Pro Tip: Use WebP as your primary format for web images and include a JPEG/PNG fallback for older browsers using the HTML <picture> element.

When to use WebP: virtually any web image where browser support is not a concern.

2.4 AVIF

AVIF is an even newer format that offers better compression than WebP, often producing files 50% smaller than JPEG at the same quality level. It is based on the AV1 video codec and handles a wide range of images exceptionally well, including photos with fine details.

Browser support for AVIF is still growing, so it is best used alongside fallbacks. However, adopting it now puts you ahead of the curve, and tools like Squoosh and ImageMagick can convert images to AVIF.

When to use AVIF: cutting-edge websites focused on maximum performance with modern browser audiences.

2.5 SVG

SVG stands for Scalable Vector Graphics and works completely differently from the formats above. While JPEG, PNG, WebP, and AVIF are all raster formats (made up of pixels), SVG is a vector format (made up of mathematical paths and shapes).

Because SVG is vector-based, it can be scaled to any size without losing quality. A tiny SVG icon will look just as sharp on a 4K display as it does on a small phone screen. SVG files are also relatively small and can even be styled with CSS.

SVG is ideal for logos, icons, illustrations, and infographics that have clean lines and simple shapes. It is not suitable for photographs.

Pro Tip: Always use SVG for your website’s logo. It will look crisp on every screen size and can even be animated with CSS.

When to use SVG: logos, icons, charts, diagrams, simple illustrations.

Image Compression: Making Files Smaller

Once you have chosen the right format, the next step is compression. Compression reduces the file size of your image so it loads faster. There are two types of compression you need to understand.

3.1 Lossy vs. Lossless Compression

Lossy Compression

Lossy compression reduces file size by permanently removing some image data. The idea is to remove the parts that the human eye is least likely to notice, such as tiny variations in color that are invisible at normal screen sizes. JPEG and WebP (in lossy mode) use this approach.

The key to lossy compression is finding the sweet spot where the file is as small as possible while still looking good to the human eye. Most image editing tools let you set a quality percentage (e.g., 80% quality), which controls how aggressively the compression removes data.

Lossless Compression

Lossless compression reduces file size without removing any image data. The image looks exactly the same before and after compression. PNG and WebP (in lossless mode) support this.

Lossless compression typically does not reduce file sizes as dramatically as lossy compression, but it is ideal when image quality must be perfectly preserved, such as for product images where customers need to see fine details.

3.2 How Much Should You Compress?

A common misconception is that more compression is always better. In reality, over-compressing an image produces visible artifacts (blurriness, blockiness, color distortion) that make your website look unprofessional.

As a general guideline, aim for the following quality settings when saving images:

Photographs (JPEG): 70-85% quality
Product images (JPEG or WebP): 80-90% quality
Background images (JPEG or WebP): 60-75% quality
Icons and logos (PNG or SVG): use lossless compression

Note: Always compare the compressed image side-by-side with the original before publishing. If you can notice a quality difference, the compression is too aggressive.

3.3 Tools for Image Compression

There are many excellent tools available for compressing images, both free and paid. Here are some of the most popular and reliable ones:

Online Tools

TinyPNG / TinyJPEG: Simple drag-and-drop tools that compress PNG and JPEG files very effectively. Great for beginners.
Squoosh (by Google): A powerful browser-based tool that lets you compare different formats and compression settings side-by-side. Excellent for learning and experimentation.
Compressor.io: Supports multiple formats and provides both lossy and lossless options.

Desktop Applications

Adobe Photoshop: Offers precise control over export settings. Use Save for Web to fine-tune compression.
GIMP (free): An open-source alternative to Photoshop with solid export options.
ImageOptim (Mac): A simple tool that automatically applies multiple compression techniques to your images, and ImageOptim ensures high-quality results with minimal effort.

Command-Line Tools

ImageMagick: A powerful command-line tool for batch processing and conversion between formats.
mozjpeg: An optimized JPEG encoder that produces smaller files than standard JPEG encoders.
cwebp: Google’s command-line tool for converting images to WebP format.

Build Tools and Plugins

Webpack (imagemin plugin): Automatically compress images during your website’s build process.
WordPress plugins (Smush, ShortPixel, Imagify): Automatically optimize images when you upload them to your WordPress site.

Image Dimensions and Responsive Images

Compression alone is not enough. Even a well-compressed image will load slowly if its dimensions are far larger than what is actually displayed on screen. For example, if you upload a 4000×3000 pixel image but display it at 400×300 pixels on your website, you are asking the user’s browser to download 10 times more data than necessary.

4.1 Resize Images to Their Display Size

Always resize your images to the maximum size at which they will be displayed before uploading them. If an image is shown at 800 pixels wide on your website, there is no reason for the image file to be 3000 pixels wide.

Here are the approximate dimensions to target for common use cases:

Full-width hero/banner images: 1920px wide maximum
Blog post featured images: 1200px wide
Thumbnails: 300-400px wide
Product images: 800-1000px wide
Profile pictures or avatars: 150-300px wide

Pro Tip: Use a photo editor to resize images before uploading. Never rely on the browser to shrink a large image, as the full file still needs to be downloaded first.

4.2 Responsive Images with srcset

Modern websites need to look good on a wide range of screens, from small smartphones to large desktop monitors. A single image size does not fit all scenarios optimally. That is where responsive images come in.

The HTML srcset attribute allows you to provide multiple versions of an image at different sizes, and the browser automatically chooses the most appropriate one based on the user’s screen size and resolution.

Here is a simple example of how srcset works:

<img src=”image-800.jpg”

srcset=”image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w”

sizes=”(max-width: 600px) 100vw, 800px”

alt=”A scenic mountain landscape”>

In this example, the browser delivers the 400px image to small screens, the 800px image to medium screens, and the 1200px image to large screens. This saves bandwidth for mobile users while ensuring desktop users get a high-quality image.

4.3 The HTML Picture Element

The <picture> element goes a step further, allowing you to serve different image formats to different browsers. You can serve WebP to browsers that support it and fall back to JPEG for older browsers.

</picture>

Browsers that support WebP will load the WebP version, while others will fall back to the JPEG. This gives you the performance benefits of modern formats without sacrificing compatibility.

4.4 Pixel Density and Retina Displays

Modern high-resolution displays, often called Retina displays, pack more pixels into the same physical space. On these displays, a regular image can look blurry or pixelated because each logical pixel is rendered using multiple physical pixels.

To serve sharp images on high-DPI displays, you need to provide higher-resolution versions of your images. For instance, if an image is displayed at 400px wide, you should also provide an 800px version for Retina displays (this is referred to as 2x).

Use the x descriptor in srcset: srcset=”image.jpg 1x, [email protected] 2x”
Retina images should be double the display size
Always compress retina images to offset the larger file size

Image SEO: Helping Search Engines Understand Your Images

Search engine optimization for images is often overlooked, but it is one of the easiest ways to improve both your search rankings and the accessibility of your website. Let us walk through each key component.

5.1 Descriptive File Names

The file name of your image is one of the first things search engines look at. Many people upload images with default names like IMG_20231102.jpg or photo1.png. These names tell search engines absolutely nothing about the image content.

Instead, use descriptive, keyword-rich file names that accurately describe what is in the image. Use hyphens to separate words (not underscores or spaces).

Bad example: IMG_4523.jpg

Good example: red-running-shoes-for-women.jpg

Pro Tip: Write file names as if you were describing the image to a friend who cannot see it. Keep it specific, accurate, and natural. Avoid keyword stuffing.

5.2 Alt Text (Alternative Text)

Alt text is a short description that you add to your images using the alt attribute in HTML. It serves three critical purposes:

Accessibility: Screen readers read alt text aloud to visually impaired users, helping them understand the image.
SEO: Search engines use alt text to understand the content and context of your images.
Fallback: If an image fails to load, the alt text is displayed in its place.

Writing good alt text is an art. It should be descriptive but concise, accurate, and naturally include relevant keywords without being forced or repetitive.

Bad alt text: alt=”image”

Bad alt text: alt=”running shoes womens shoes buy shoes online red shoes”

Good alt text: alt=”Women’s red running shoes with cushioned sole”

Note: Decorative images that add no informational value should have an empty alt attribute (alt=””). This tells screen readers to skip the image rather than reading out irrelevant information.

5.3 Image Title Attributes

The title attribute provides additional information about an image and appears as a tooltip when a user hovers their mouse over the image. While it has less SEO weight than alt text, it can improve user experience by adding helpful context.

Do not simply copy your alt text into the title attribute. The two serve different purposes. Use the title attribute to add supplementary information, such as the photographer’s name, the image source, or a brief additional description.

5.4 Image Captions

Image captions are the short descriptions that appear directly below an image on a webpage. Research shows that image captions are among the most-read text on any web page, second only to headlines.

While captions are not a direct ranking factor for search engines, they contribute to overall page quality, user engagement, and contextual relevance. A good caption adds value by explaining the image, providing context, or reinforcing the surrounding content.

5.5 Structured Data for Images

Structured data (also called schema markup) is code that you add to your HTML to help search engines understand your content at a deeper level. For images, you can use structured data to communicate information such as the image’s subject, license, photographer, and more.

For example, if you run a recipe blog, adding ImageObject structured data can help Google display your recipe image directly in search results (known as a rich result), dramatically increasing your visibility and click-through rate.

Google’s structured data documentation provides detailed guidance on implementing image schema. Tools like Google’s Rich Results Test allow you to verify that your structured data is correctly implemented.

5.6 Image Sitemaps

An image sitemap tells search engines about the images on your website so they can crawl and index them more effectively. You can either create a dedicated image sitemap or add image information to your existing XML sitemap.

Each entry in an image sitemap can include the image URL, a caption, a title, a geographic location, and the image license URL. WordPress SEO plugins like Yoast SEO and Rank Math automatically generate image sitemaps for you.

Lazy Loading: Load Images Only When Needed

Lazy loading is a technique that defers the loading of off-screen images until the user scrolls near them. Instead of loading every image on a page when the page first loads, only the images visible in the user’s viewport are loaded initially. The rest are loaded on-demand as the user scrolls down.

This can dramatically reduce the initial page load time, especially for long pages with many images. Google also supports lazy loading and even recommends it as a performance best practice.

6.1 Native Lazy Loading in HTML

The simplest way to implement lazy loading is using the native HTML loading attribute, which is supported by all modern browsers:

Just add loading=”lazy” to your <img> tags and the browser handles the rest. It is simple, effective, and requires no JavaScript.

6.2 Above-the-Fold Images Should NOT Be Lazy Loaded

One important nuance: images that appear above the fold (the portion of the page visible without scrolling) should NOT use lazy loading. These images need to load immediately for a good first impression. Lazy loading above-the-fold images actually harms performance and can hurt your Core Web Vitals score.

Pro Tip: Only apply lazy loading to images that are below the fold. Hero images, logos, and any image visible when the page first opens should load eagerly.

Using a Content Delivery Network (CDN) for Images

A Content Delivery Network (CDN) is a network of servers distributed across different geographic locations around the world. When a user requests an image from your website, the CDN delivers the image from the server that is physically closest to that user, rather than from your origin server which might be on the other side of the planet.

The result is significantly faster image loading times for users around the globe. For example, a user in Tokyo accessing a website hosted in New York will experience much faster load times if the images are served from a CDN server in Singapore than from the New York origin server.

7.1 Image CDN Services

Many CDN providers also offer image transformation features, allowing you to resize, crop, compress, and convert images on-the-fly directly from the CDN. This means you can store one high-resolution original image and let the CDN automatically serve the appropriately sized and formatted version to each user based on their device.

Popular image CDN services include:

Cloudflare Images: Offers storage, resizing, and optimization with a simple API.
Imgix: A powerful image CDN with extensive transformation options.
Cloudinary: A comprehensive media management platform with a generous free tier.
Amazon CloudFront: Amazon’s CDN, often used alongside Amazon S3 for image storage.
Fastly: An enterprise-grade CDN used by many large websites.

Core Web Vitals and Image Optimization

Google’s Core Web Vitals are a set of specific metrics that Google uses to measure user experience on the web. Three of these metrics are directly affected by image optimization:

8.1 Largest Contentful Paint (LCP)

LCP measures how long it takes for the largest visible element on the page to load. In most cases, the largest visible element is an image, such as a hero banner or featured image. A good LCP score is under 2.5 seconds.

To improve LCP, ensure that your hero images are properly sized and compressed, are in a fast-loading format like WebP, are hosted on a CDN, and are NOT lazy loaded (since they need to load immediately).

You can also preload the LCP image using the HTML link rel=”preload” tag, which tells the browser to start downloading the image as early as possible.

8.2 Cumulative Layout Shift (CLS)

CLS measures how much the page layout shifts unexpectedly as content loads. A common cause of CLS is images that load without specified dimensions, causing the surrounding text to jump around as the image appears.

To prevent this, always specify the width and height attributes on your <img> tags. This allows the browser to reserve the correct amount of space for the image before it loads, preventing layout shifts.

8.3 First Input Delay (FID) / Interaction to Next Paint (INP)

While these metrics are primarily about JavaScript performance, heavy images can indirectly affect them by consuming bandwidth and processing resources. Keeping images lightweight reduces the overall resource burden on the browser, helping keep interactions snappy.

Advanced Image Optimization Techniques

Once you have the fundamentals in place, there are several advanced techniques that can take your image optimization even further.

9.1 Progressive JPEG Loading

Standard JPEGs load from top to bottom, showing a partial image as they download. Progressive JPEGs load differently: they first show a low-resolution version of the full image, then gradually improve in quality as more data is downloaded. This gives users a sense of the complete image much sooner, improving perceived performance.

Most image editing tools and optimization libraries support saving JPEGs in progressive mode. In Photoshop, this is the Interlaced option when saving for web.

9.2 Image Sprites (for Icons)

Image sprites are a technique where multiple small images (typically icons) are combined into a single larger image. Instead of making many separate HTTP requests for each individual icon, the browser makes just one request and uses CSS to display the correct portion of the sprite for each icon.

With the rise of SVG icons and HTTP/2 (which handles multiple requests more efficiently), image sprites are less critical today than they used to be. However, they can still be beneficial in certain contexts, particularly on older infrastructure.

9.3 Base64 Encoding for Small Images

Very small images can be encoded directly into your HTML or CSS as Base64 strings, eliminating the HTTP request for that image entirely. This is most useful for tiny images like small icons or spacers.

However, Base64 encoding increases the file size of the image by about 33%, so it is only worthwhile for very small images (generally under 1KB). For larger images, the overhead is not worth it.

9.4 Automating Image Optimization in Your Workflow

Manual image optimization works well for small websites, but as your website grows, manually optimizing every image becomes impractical. Automating the process ensures consistency and saves significant time.

Here are some approaches to automate image optimization:

Build tools: Tools like Webpack, Vite, and Gulp can be configured to automatically optimize images during your build process.
CMS plugins: WordPress, Shopify, and other CMS platforms have plugins that automatically optimize images on upload.
CI/CD pipelines: Image optimization can be integrated into your deployment pipeline so images are optimized before they reach production.
Server-side processing: Tools like ImageMagick can process images server-side before they are served to users.

Image Optimization Checklist

Here is a practical, quick-reference checklist you can use every time you add images to your website:

Before You Upload

Choose the right format: JPEG for photos, PNG for graphics/logos, WebP as a modern alternative, SVG for vector graphics.
Resize the image to its display dimensions before uploading. Never upload a 4000px wide image that will be shown at 800px.
Compress the image using a tool like TinyPNG, Squoosh, or ImageOptim.
Rename the file with a descriptive, keyword-rich name using hyphens (e.g., blue-leather-wallet.jpg).

In Your HTML

Add descriptive alt text that accurately describes the image and naturally includes relevant keywords.
Always specify width and height attributes to prevent layout shifts (CLS).
Add loading=”lazy” to all images below the fold.
Use the <picture> element to serve WebP with a JPEG/PNG fallback.
Use srcset and sizes for responsive images.
Add rel=”preload” for your LCP image (typically the hero/banner image).

For Your Website Infrastructure

Serve images from a CDN for faster global delivery.
Enable gzip or Brotli compression on your server.
Set appropriate cache headers for images (they rarely change).
Submit an image sitemap to Google Search Console.
Test your Core Web Vitals scores in Google PageSpeed Insights after making changes.

Common Image Optimization Mistakes to Avoid

Even experienced web developers sometimes fall into these common traps. Being aware of them can save you significant time and effort.

Uploading original, uncompressed photos directly from a camera: Camera images are often 5-10MB in size. Always resize and compress before uploading.
Using PNG for large photographs: PNG files of photos can be 3-5x larger than equivalent JPEG files. Always use JPEG or WebP for photos.
Ignoring alt text completely: This hurts both SEO and accessibility. Every meaningful image should have descriptive alt text.
Lazy loading above-the-fold images: This delays the loading of visible content and can harm your LCP score.
Not specifying image dimensions: This causes layout shifts that hurt user experience and your CLS score.
Over-compressing images: Heavily compressed images look blurry and unprofessional. Always preview the compressed result before publishing.
Using decorative images as CSS background images: CSS background images cannot have alt text and are harder for search engines to index. Use HTML img tags where possible.
Forgetting to update images when content changes: Outdated images with wrong file names or alt text can confuse both users and search engines.

Conclusion

Image optimization is one of the most impactful things you can do to improve your website’s performance, user experience, and search engine rankings. The good news is that the best practices are not complicated once you understand the reasoning behind them.

To summarize the key takeaways from this guide:

Choose the right image format for each use case: JPEG for photos, PNG for graphics, WebP for modern web images, and SVG for scalable graphics.
Always compress your images to find the sweet spot between file size and visual quality.
Resize images to their actual display dimensions before uploading.
Use responsive image techniques like srcset and the <picture> element to serve different sizes to different devices.
Optimize for SEO with descriptive file names, well-written alt text, and proper structured data.
Implement lazy loading for below-the-fold images.
Monitor your Core Web Vitals scores and pay attention to LCP and CLS, which are directly affected by images.
Use a CDN to serve images faster to users around the world.

Image optimization is not a one-time task but an ongoing practice. As new image formats emerge (like AVIF becoming more widely supported) and web standards evolve, staying up-to-date with best practices will keep your website fast, accessible, and competitive in search rankings.

Start with the basics, use the checklist provided in this article, and gradually implement the more advanced techniques as you grow more comfortable. Every improvement you make to your images is an investment in your website’s success.

Best Practices for Image Optimization: Format, Compression & SEO Tips