Crawvix

How to Optimize Images on WordPress, Shopify, Wix and Squarespace

Crawvix Editorial Team · Published November 1, 2026 · Last updated November 1, 2026 · 11 min read

To optimize images on a website builder or CMS, upload each picture at a sensible size, compress it before you upload it, write useful alt text, and let the platform handle resizing, lazy loading and delivery. Every platform does some of that work automatically, but none does all of it. Oversized photos, giant hero banners and sliders remain the most common reasons an otherwise tidy site loads slowly.

This guide is for site owners who use a hosted builder or a CMS, and for developers who maintain those sites. It explains how to optimize images WordPress, Shopify, Wix and Squarespace sites all share in common, what each platform typically does for you, what you still need to check, and how to confirm the result with PageSpeed Insights. Platforms change their features often, so use the platform sections as a map of where to look and check your platform's current documentation before relying on any detail.

Before you begin

You will need:

  • Admin access to the site, including the media library or files area.
  • The original image files, not only the copies already on the site. Re-uploading from the original gives better quality than compressing a compressed copy.
  • A free image tool that can resize and export JPEG, PNG or WebP.
  • One image-heavy page, such as the home page or a product page, tested in PageSpeed Insights first, so you have a baseline.

The main risk is replacing images used in many places. Keep the originals and check the page on a phone after each change.

Images are usually the heaviest part of a page, and on many pages the largest visible element is an image. That element is what the Largest Contentful Paint (LCP) metric measures. Google's Core Web Vitals "good" thresholds, at the 75th percentile of real visits, are LCP at or under 2.5 seconds, Cumulative Layout Shift (CLS) at or under 0.1 and Interaction to Next Paint (INP) at or under 200 milliseconds. Images mainly affect the first two.

Alt text, the short description stored in the alt attribute, is read aloud by screen readers and used by search engines to understand an image. Neither speed nor alt text guarantees a ranking, but both make a page work better for visitors.

How to optimize images on WordPress and every other platform: what they have in common

Habit What to do Why it helps
Sensible dimensions Resize to roughly the largest size the image is shown at, with extra for high-density screens. A 6,000 pixel camera photo in an 800 pixel column wastes bandwidth.
Compress before upload Export JPEG or WebP at a quality that still looks good. Smaller files download faster on mobile connections.
Alt text Fill in the alt field for every meaningful image. Helps screen reader users and gives search engines context.
No giant heroes or sliders Use one well-sized hero image, not a rotating carousel. The first big image is often the LCP element, and each extra slide adds weight.
Lazy loading Load images below the first screen only when they are near view. Saves data for pictures a visitor may never reach.
Responsive output Offer smaller versions for small screens. A phone should not download a desktop-sized file.
Modern formats Use WebP, or AVIF where supported, if the platform does not convert for you. They are often smaller than JPEG or PNG.
Caching and a CDN Serve images from a CDN with caching enabled. Repeat and distant visitors load faster.
Theme and app discipline Remove unused plugins, apps and features. Extra scripts compete with images for bandwidth.

A CDN (content delivery network) is a group of servers around the world that serve your files from a location near each visitor. Lazy loading means the browser postpones fetching an image until it is near the visible part of the page. Responsive images are different-sized files of the same picture, listed in a srcset attribute, so the browser can choose one. WebP and AVIF are newer formats that often give smaller files than JPEG; check current browser support at caniuse.com before relying on AVIF.

What a good hero image looks like

A hero image is the large picture shown first, often behind a headline. It is a frequent LCP candidate, so three rules usually serve well: do not lazy load it, give it explicit width and height so the browser can reserve space, and keep it light. There is no single correct file size, but a hero of several megabytes is rarely necessary.

<img src="/images/hero-1200.webp"
     srcset="/images/hero-600.webp 600w, /images/hero-1200.webp 1200w, /images/hero-1800.webp 1800w"
     sizes="100vw"
     width="1800" height="900"
     alt="Customers choosing plants in a greenhouse"
     fetchpriority="high">

Optimize images WordPress sites: what core does and what is left to you

WordPress is the platform where results depend most on your theme and plugins, because you control the whole stack.

What WordPress typically does for you:

  • It creates several resized copies of each upload.
  • Current versions add srcset and sizes to images inserted through the editor and through functions such as wp_get_attachment_image().
  • Since version 5.5, images generally get loading="lazy", and recent versions skip it for what they judge to be the first, above-the-fold image. Behavior varies by version and theme, so check your page source.
  • Very large uploads may be scaled down automatically, and current releases accept WebP uploads. Newer ones also accept AVIF. Check the documentation for your version.

What you still need to do:

In theme code, prefer core functions to hand-written tags, because they output dimensions and responsive attributes for you:

<?php echo wp_get_attachment_image( $attachment_id, 'large', false, array( 'class' => 'hero' ) ); ?>

For wider launch checks, see WordPress SEO Checklist: Settings to Check Before and After Launch.

Shopify: product images, themes and apps

Shopify hosts your media and typically serves it through its own CDN, so you do not normally set up a separate one.

What Shopify typically does for you: it stores uploads and serves resized versions from the CDN, its theme tooling can output srcset and sizes when the theme asks for several widths, and it often delivers a modern format to browsers that support it. Confirm that last point on a live page rather than assuming it.

What you still need to do:

  • Stay within the platform's upload limits and avoid very large originals. Check the current limits in the Shopify help centre.
  • Add alt text to product media and to images in pages and blog posts.
  • Review your theme. One that loads every collection image eagerly, or uses a large auto-playing slideshow, can undo the platform's work.
  • Audit installed apps. Many add scripts to every page. Remove unused ones one at a time and retest.

Theme developers can write responsive output in Liquid. The pattern below is typical; check the current Liquid documentation for the options your theme supports.

{{ product.featured_image
   | image_url: width: 1200
   | image_tag: widths: '400, 800, 1200', sizes: '(min-width: 750px) 50vw, 100vw', loading: 'lazy' }}

For a hero or the first product image, leave out loading: 'lazy'. See also Shopify Technical SEO: Collections, Variants and Duplicate URLs.

Wix: the media manager and the editor

Wix is a hosted builder, so most delivery decisions are made for you. It typically stores uploads in a media manager, serves them from its own infrastructure and resizes or re-encodes them for the display size.

What you still need to do:

  • Upload images that are not far larger than the space they fill. Automation reduces the damage of an oversized upload but does not remove it.
  • Add alt text through the image settings in the editor. Select a picture and look for an option about alt text or describing the image. Names and locations change, so use the editor's help search if you cannot find it.
  • Avoid stacking many large strips, galleries and slideshows on one page. Each is a separate download.
  • Remove unused apps and embeds.

You have limited control over fetchpriority or srcset here. Your leverage is what you upload and how much you place on each page.

Squarespace: image blocks, galleries and site styles

Squarespace is also hosted and typically creates several sizes of each upload and serves a suitable one.

What you still need to do:

  • Upload sensibly sized images. The help centre lists recommended dimensions and file sizes, which change over time, so check the current guidance.
  • Add alt text in the image block settings and in gallery or product image settings, usually in the panel that opens when you edit an image.
  • Use fewer full-width banners and avoid auto-advancing galleries on the home page.
  • Remove code injections you no longer need.

For the wider checklist, see Squarespace SEO Setup Checklist: What You Can and Cannot Control.

Step-by-step instructions

Step 1: Measure a baseline

Run your key pages through PageSpeed Insights at pagespeed.web.dev. Note the mobile result, the LCP value and the element reported as largest.

What success looks like: you have recorded numbers for at least three pages: the home page, a content page and a product or service page.

Step 2: Find your heaviest images

In browser developer tools, open the Network tab, filter by images, reload and sort by size.

What success looks like: you know your five heaviest images.

Step 3: Resize and compress the originals

Resize each to about its largest displayed width, with extra for high-density screens. Export as JPEG or WebP at a quality that still looks good. Use PNG only for transparency or crisp flat graphics.

What success looks like: each file is clearly smaller and still sharp on a phone and a desktop.

Step 4: Upload and replace

Upload the new files and swap them in, using the platform's replace function if it has one. Use descriptive file names such as blue-ceramic-mug.webp.

What success looks like: the page shows the new image and nothing references the old large copy.

Step 5: Write alt text

For each meaningful image, write one short sentence describing what it shows in context. Leave alt text empty on purely decorative images so screen readers skip them, and do not stuff keywords. See Image SEO: Alt Text, File Names and Formats That Help Search.

What success looks like: no meaningful image lacks alt text.

Step 6: Fix the top of the page

Make sure the first image is not lazy loaded, has width and height or reserved space, and is not an auto-rotating slider.

What success looks like: the hero loads promptly and the page does not jump.

Step 7: Trim themes, plugins and apps

Remove unused plugins, apps, embeds and code snippets one at a time, retesting after each. See Third-Party Scripts and Performance: Measure and Tame Them.

What success looks like: a shorter list of add-ons, each with a reason to be there.

Step 8: Retest with PageSpeed Insights

Run the same pages again. Field data comes from real visitors over a period and updates slowly; lab data comes from a single test run and changes right away. Look at the image-related diagnostics, such as image size, format and offscreen images. Audit names change between Lighthouse versions, so look for the intent, not the wording.

What success looks like: image diagnostics shrink and lab LCP moves in the right direction. Better numbers show progress; they do not promise a ranking.

Final verification checklist

  • Each key page has a baseline and a retest.
  • The hero image is not lazy loaded and has reserved space.
  • Meaningful images have alt text; decorative ones have empty alt text on purpose.
  • Sliders are removed or limited, and unused plugins and apps are gone.
  • Images come from a CDN or host with caching enabled.

Common mistakes to avoid

  • Relying on the platform to fix everything. Automatic resizing helps, but a huge upload still costs more than a right-sized one.
  • Lazy loading the hero. It can delay the largest element.
  • Keyword-stuffed alt text. Describe the image, not your target phrase.
  • Judging success by one test run. Lab results vary, so test a few times.

Frequently asked questions

What is the best image format for a website?

There is no single best format. JPEG suits photographs, PNG suits graphics needing transparency, and WebP often gives smaller files than both. AVIF can be smaller still, but check current browser support at caniuse.com before relying on it.

Do I need a plugin to optimize images on WordPress?

Not always. WordPress creates resized copies and adds responsive and lazy-loading attributes itself. A plugin can compress existing images or convert them to WebP, but resizing and compressing before upload also works and adds no extra code.

Does Shopify compress images automatically?

Shopify typically serves resized images through its CDN and may deliver a modern format to supporting browsers. It is still sensible to upload files that are not oversized. Check the Shopify help centre for current behavior.

How big should website images be?

Match the file to the space it fills, with extra width for high-density screens. There is no universal byte limit, but a photo of several megabytes is rarely needed on a page.

Should every image have alt text?

Every meaningful image should. Purely decorative images should have an empty alt="" so assistive technology can skip them. Write a short, specific description, not a list of keywords.

Do Wix and Squarespace let me edit image HTML?

Mostly no. Both generate the markup, so you control the files you upload, the alt text and the layout. Check each platform's current documentation for advanced options.

How do I know if my image changes worked?

Retest the same pages in PageSpeed Insights and compare against your baseline. Look at LCP, the largest element and the image diagnostics, and allow for variation between runs.

Official references

Next step: Check your images with Image Doctor and see how Crawvix checks a website. This guide gives technical information and no guarantee of rankings, traffic or indexing.

In this category

All 10 Platforms guides