Image Optimization: 8 Ways To Boost Store Speed (2026)

Online shoppers use images to inspect product details and understand what a brand sells. Those visuals give an online store much of its identity—which is why image optimization is so important. Images accounted for more bytes than any other content type on the median home page in the 2025 Web Almanac: 1,058 kilobytes on desktop and 911 kilobytes on mobile. Heavy image files increase load times and delay Largest Contentful Paint. Slower pages make visitors wait before they can view a product. Image optimization keeps photos sharp across screen sizes, and reduces the data required to display them.

This guide covers how to reduce image file sizes and deliver the right version to each device. 

What is image optimization?

Image optimization adjusts an image’s file format, dimensions, and resolution so it loads quickly and displays clearly on desktop and mobile devices.

For instance, smaller files reduce the amount of data a browser downloads, while responsive sizing sends each visitor an image that matches their screen.

Three elements impact image size and display quality:

• Image file format
• Image dimensions (height and width)
• Screen resolution

You can also optimize images on your website so they’re easier for search engines to find (a.k.a. image SEO), which impacts page performance. When an image is the largest visible element, its load time contributes to Largest Contentful Paint (LCP), one of Google’s Core Web Vitals that affects search visibility. 

Standard HTML image elements allow Google to find and index the file for Google Search and Google Images.

Why do you optimize images?

Images are important for a good online shopping experience. After all, customers won’t buy your products if they cannot see them. 

Image optimization helps lower the amount of data your webpage has to load and is a core tenet of good ecommerce web design, which results in the following benefits:

Balanced speed and quality

Image optimization keeps product details clear and reduces the amount of data a shopper’s browser downloads. 

On more than 70% of web pages, the largest element in the initial viewport is an image. The speed at which that image loads determines the page’s LCP, which measures how quickly the main content appears. 

Google recommends maintaining good Core Web Vitals for Search, because their core ranking systems seek to reward a positive page experience.

For SEO, image optimization also helps search engines interpret and discover each file. Concise file names identify the subject, and descriptive alt text adds context for search engines and screen-reader users. An image sitemap communicates files Google may not find in the page source. (Find more on how to optimize these elements below.)

Improved search performance

SEO image optimization gives search engines more information about each visual, so they can match it with relevant queries. 

MozCast’s live SERP tracker shows that images appear in roughly 19% of the Google results it monitors. Those placements give shoppers another way to reach a product page through Google Images or an image pack (the block of image thumbnails sometimes displayed) in standard search results.

8 ways for optimizing images for the web

Use these eight steps to reduce image file sizes, plus give shoppers and search engines clear information about each visual: 

1. Use concise and direct image names
2. Optimize your alt attributes carefully
3. Choose your image dimensions and product angles wisely
4. Resize your images
5. Choose the right image format
6. Use image sitemaps
7. Use a good image content delivery network (CDN)
8. Test your images

1. Use concise and direct image names

Rename each image before uploading it. Google uses file names as a light clue about an image’s subject, so be sure to replace camera-generated names with words that identify the product. For example, rename DCMIMAGE10.jpg to 2012-ford-mustang-lx-red.jpg.

When choosing a name, use the product words customers enter in search. Website analytics and keyword research can help identify those precise terms. 

Keep the file name short, separate words with hyphens, and avoid repeated keywords.

2. Optimize your alt attributes carefully

Alt text is a short description of an image that helps people using screen readers understand its content. It also allows Google to understand what the image shows, which can help improve its visibility in search results. 

As a best practice, write a short, plain-language description for each informative product image. Include a model or serial number when it identifies the item.

Match the description to the specific image:

<img src="2012-ford-mustang-lx-red.jpg" alt="Red 2012 Ford Mustang LX">

Use an empty alt attribute (alt="") for decorative images.

3. Choose your image dimensions and product angles wisely

Match image dimensions to the largest size displayed on your site. Then choose images with various product angles that strategically answer different shopper questions. 

For instance, with a car listing, useful views include the exterior, interior, rear, and engine.

Give each view a distinct file name and alt text, such as:

• File name: 2012-ford-mustang-lx-red-interior.jpg
• Alt text: Red 2012 Ford Mustang LX interior with leather trim

4. Resize your images

Resize images for the largest space they occupy, then deliver smaller versions to narrower screens. For a 200 by 200 pixel slot, use a 400 by 400 pixel source for two-times displays. Your website can then automatically choose the best image version based on a visitor's screen size.

Since many shoppers browse on phones—in fact, Similarweb’s 2025 Global State of Ecommerce report found that ecommerce app sessions rose 13% year over year—providing correctly-sized images is crucial. It can help the page load faster, without sacrificing image quality. As a general rule, keep final web images at 200 kilobytes or smaller. Shopify’s product photography guidance calls 200 kilobytes a good target and recommends checking compressed files for blotchy details. 

If you sell on Shopify, upload the highest-quality source available. Shopify’s CDN automatically creates and presents optimized versions of images for different devices and browsers. 

5. Choose the right image format

Choose a format based on the image content and transparency. This table compares common web image formats:

The file format you choose affects image quality, file size, and page speed—so it's worth choosing the right one for your specific needs.

Each image format uses a different type of compression. For JPEG, WebP, and AVIF files, lower the quality settings until you notice a visible drop in image quality, then scale it back—as you do so, be sure to inspect the image at all its display size. PNG compression reduces the color palette, while SVG compression removes unused metadata and code.

If you’re compressing images yourself, use tools designed for each format:

• Squoosh: JPEG, WebP, and AVIF
• TinyPNG: PNG
• SVGOMG: SVG

Sites that manage formats directly can use the <picture> element to provide JPEG or PNG fallbacks.

Whereas, Shopify’s CDN automatically detects browser capabilities and serves a compatible image format—including WebP or AVIF—so you don’t need to create multiple versions yourself. 

6. Use image sitemaps

Image sitemaps help Google find images that might otherwise be difficult to find, such as those loaded through JavaScript. 

If your images aren’t appearing on Google Search or Google Images, add image tags to an existing XML sitemap or create a separate image sitemap, then submit the file through Google Search Console. You can also declare its location in robots.txt:

Sitemap: https://example.com/sitemap.xml

Shopify automatically creates and updates a sitemap.xml file. The file covers products, collections, pages, and blog posts. It also includes each product’s primary image. Submit it through Search Console at yourstore.com/sitemap.xml.

7. Use a good image content delivery network (CDN)

An image CDN stores files across a network of servers, and delivers them from a location close to each visitor. The CDN can resize images for different screens and select a format supported by the shopper’s browser.

For Shopify stores, always upload the highest-quality source image. Shopify’s CDN optimizes the storefront version and selects a compatible format. Supported browsers receive WebP or AVIF files.

Shopify merchants also get access to a professional services team to help improve your website speed, conversion rate, and search engine optimization. 

8. Test your images

Run image tests one variable at a time. Review conversion rate and page speed together to measure the full effect of each change:

• Test the number of product images per page. Since load times are an issue for some non-hosted ecommerce sites, you may find reducing the number of images on a page will increase click-through rates and sales.
• Test what angles your customers prefer. Surveying and talking to your customers is a great habit to get into. Use customer feedback to select image views, then test them.
• Test how many product listings you should have on category pages. Is it 10, 20, or 100 products? Test the number of products you list on category pages to see what works best for your customers.

Image optimization tools

These are the top image optimization tools and plug-ins you can use for your ecommerce website.

Tiny SEO Speed Image Optimizer

Tiny SEO Speed Image Optimizer compresses and resizes store images in bulk. The same workflow can update alt text and file names. The app keeps backups of optimized images.

Crush: Speed & Image Optimizer

Crush handles manual and automatic compression for product and theme images. You set compression and image SEO rules once, and the app applies them to new images.

Hextom: Bulk Image Edit & SEO

Hextom combines bulk compression with resizing, cropping, and watermarks. Its editor can update alt text and file names, plus it has backup tools that let merchants restore edited images.

Squoosh

Squoosh compresses and converts images in the browser. Open an image, adjust the output settings, and compare the optimized preview with the original before saving. Processing takes place on your device.

TinyPNG

TinyPNG compresses AVIF, WebP, JPEG, PNG, and APNG files through a browser-based uploader. The Tinify API automates compression and resizing. An official WordPress plug-in processes images during upload.

SVGOMG

SVGOMG minifies SVG code through a visual interface powered by SVGO. Upload a file or paste its markup, then review the optimization settings before downloading the smaller SVG.

Keep photos functional with image optimization

Optimizing your images is essential to running a successful online business. It enhances the look of your products, creates a smooth shopping experience, and helps you get found online. 

Shopify’s CDN automatically selects a compatible image format for each browser. Sidekick generates hero banners, marketing images, and blog illustrations from text prompts or reference photos. Stores can refine generated images through follow-up instructions and save selected files to their store’s media library.