How to optimize images for faster loading

Ask any web developer what's slowing down most websites and the answer is almost always the same. Images. Image optimization for web is the process of reducing image file sizes without losing visual quality, so pages load faster without looking worse. A single uncompressed photograph can be several megabytes. The same image, properly formatted and compressed, can be under 100 kilobytes with no visible difference on screen. This article covers the right file formats to use, how compression works, when to resize before uploading, how lazy loading fits in, and what makes the biggest practical difference to your page loading speed.

Images are the single largest contributor to page weight on most websites. A page with five unoptimized photos can weigh ten times more than it needs to. That weight translates directly into slower loading, a worse Largest Contentful Paint score, and visitors leaving before the page finishes rendering. For context on why loading speed affects your business and search rankings, see the article on why website speed matters.

Why do images slow down websites?

When a visitor opens a page, the browser downloads every resource on it before displaying the page. Images are usually the largest of those resources. Each image requires its own request, and the browser must wait for those requests to complete before it can fully render the content.

How images affect loading metrics

• Images directly affect Largest Contentful Paint (LCP). If the largest visible element on a page is a hero image, LCP is the time it takes that image to fully load
• Unoptimized images increase total page weight, which delays every other metric down the loading timeline
• On mobile connections, the effect is amplified. A 3MB hero image that loads in two seconds on broadband can take eight or more seconds on an average mobile network
• Multiple large images compound the problem. A gallery or product page with ten uncompressed photos can be difficult to use on slower connections

What file formats should you use for web images?

JPEG

• The standard format for photographs and images with gradients and many colors
• Supports lossy compression, meaning some image data is permanently removed to reduce file size
• Supported by all browsers and devices without exception
• A quality setting of 75 to 85 produces files that are 60 to 80 percent smaller than the original with no visible quality loss for most photographs

PNG

• The format for images that need a transparent background, including logos, icons, and graphics with flat color areas
• Uses lossless compression, meaning no data is removed and the image is preserved exactly
• PNG files are significantly larger than JPEG for photographs. Use PNG only when transparency is required; use JPEG or WebP for photos

WebP

• A modern format developed to replace both JPEG and PNG with better compression at equivalent quality
• WebP images are typically 25 to 35 percent smaller than equivalent JPEG files
• Supports both lossy and lossless compression, and supports transparency
• Supported by all major browsers. If your website builder does not automatically convert images to WebP, convert them manually before uploading

AVIF

• A newer format that offers better compression than WebP, often 50 percent smaller than JPEG at comparable quality
• Browser support is growing but not yet universal. Use AVIF where supported, with an automatic fallback to WebP or JPEG for browsers that do not support it

What is image compression and how does it work?

Compression reduces file size by removing or simplifying image data. There are two types, and the difference determines when to use each one.

Lossy compression

• Permanently removes some image data to achieve a smaller file size
• The removed data is chosen based on what the human eye is least likely to notice, typically subtle color variations and fine texture detail
• Used in JPEG and lossy WebP
• A quality setting of 75 to 85 produces dramatically smaller files with images that look identical to the uncompressed original for most practical uses
• Avoid re-saving an already compressed JPEG at a lower quality setting. This stacks compression artifacts and degrades the image further with each save

Lossless compression

• Reduces file size without removing any image data. Every pixel is preserved exactly
• Used in PNG and lossless WebP
• Smaller file size savings than lossy compression, but with no quality loss whatsoever
• Best suited for product diagrams, screenshots, text-heavy graphics, or any image where compression artifacts would be visible or unacceptable

Do you need to resize images before uploading?

File size and pixel dimensions are separate issues, and both affect loading speed. Compressing a 4,000-pixel-wide image does not help if the browser only needs to display it at 800 pixels wide. The browser downloads the full 4,000-pixel image and scales it down in the viewport, wasting bandwidth and slowing down the page for every visitor.

How to size images correctly before uploading

• Identify the maximum width the image will ever be displayed at. For full-width desktop images, this is typically 1,440 to 1,920 pixels
• For images in columns or cards, the displayed width is smaller, often 400 to 800 pixels
• Resize the image to its maximum display size before uploading
• For retina and high-density displays, multiply the display width by 1.5 to 2. A 400-pixel-wide card image benefits from a 600 to 800-pixel-wide source file to appear sharp on retina screens

What is lazy loading and how does it affect image optimization?

Lazy loading delays the download of images that are not yet visible in the viewport. Instead of loading every image on the page at once, the browser only loads images as visitors scroll close to them. On pages with many images, this reduces initial page weight significantly and improves Time to Interactive for the content visible without scrolling.

• Lazy loading is supported natively in all major browsers using the loading="lazy" attribute on image tags
• Do not apply lazy loading to images above the fold. The hero image and any content visible without scrolling should load immediately
• Apply lazy loading to all images below the fold, including product galleries, blog thumbnails, and image-heavy sections further down the page

For a full breakdown of how lazy loading works and when to use it, see the article on what lazy loading is and how it works.

What are responsive images and why do they matter?

A responsive image is one that serves a different file size depending on the visitor's screen size. Rather than sending a 1,920-pixel image to every device including a visitor on a 375-pixel-wide mobile screen, responsive images let the browser request only what it needs.

How responsive images reduce mobile load time

• A mobile visitor receives a 400-pixel version of the image instead of the full desktop file, dramatically reducing download size
• Responsive images use the srcset attribute to define multiple source files at different widths so the browser can select the appropriate one
• Website builders that handle this automatically spare you from generating multiple image sizes manually
• Responsive images directly improve Core Web Vitals on mobile, where image optimization has the largest impact on LCP

For a breakdown of Core Web Vitals and how LCP is scored, see the article on what Core Web Vitals are.

How do you optimize images step by step?

Before uploading

• Resize the image to the correct display dimensions
• Choose the right format: WebP for photographs and general graphics, PNG only when transparency is required
• Compress using a quality setting of 75 to 85 for lossy formats
• Check the file size. A typical web image should be under 200KB. Hero images on desktop can go up to 400KB; anything above that is worth revisiting before uploading

After uploading

• Add descriptive alt text to every image. This is important for accessibility and contributes to search visibility. For a full guide, see the article on how to use images on your website
• Apply lazy loading to all below-the-fold images
• Run a page speed test after adding new images. A single unoptimized image can undo all other speed improvements on the page

Ongoing

• Check new images before each upload. Unoptimized images can slip through easily when working quickly
• Run a speed test after any significant batch of new images is published
• Review older images if the site predates current optimization practices. Legacy image libraries are a common and overlooked source of speed problems

For a guide on testing your full site's performance, see the article on how to test your website speed.

How WEMASY handles image optimization

WEMASY's website builder automatically compresses and converts images when they are uploaded. Images are served in WebP format where the browser supports it, with fallback formats for older devices. Multiple sizes are generated on upload so mobile visitors receive appropriately sized files without any manual configuration.

Lazy loading is applied by default to below-the-fold images across all WEMASY-built pages. Alt text can be added in the image editor within the platform. Page speed scores, including LCP, are visible in the WEMASY analytics dashboard, with image-related issues flagged per page alongside specific recommendations.

See what is included at the WEMASY website builder, or review plan options on the pricing page.

Frequently asked questions