A text-heavy blog can get away with a lot. A gallery, a portfolio, or a shop cannot. Every photograph on the page has to be downloaded before the page feels finished, and on a slow connection that adds up fast. Visitors start scrolling, images pop in late, the layout jumps, and some people leave before they ever see your best work.
The fix is rarely one plugin or one setting. Image-heavy sites are slow because several small problems stack: oversized files, the wrong format, no lazy loading, a gallery plugin that loads everything at once, and no CDN. Work through them in order and the same site can go from heavy and jumpy to fast without looking any worse.
Why image-heavy pages are different
On a normal post, the text arrives first and the page is usable almost immediately. On a gallery page, images are the content. If twenty full-size photographs load at once, the browser has to fetch, decode, and paint all of them, and the largest one usually decides your Largest Contentful Paint score. That is why a portfolio can score badly even when the hosting and caching are fine.
There is also a mobile problem hiding inside the desktop problem. A photographer uploads a 6000-pixel-wide original, WordPress serves a scaled version, but the page still ships a file far bigger than any phone screen needs. Mobile visitors on patchy connections pay for pixels they will never see.
Start with a real audit, not a guess
Before changing anything, find out where the weight actually is. Open one of your heaviest pages in PageSpeed Insights and look at the image-related findings: oversized images, inefficient image formats, and offscreen images. Then open the same page in your browser, open DevTools, go to the Network tab, filter by Img, and sort by size. You will usually find a short list of culprits: a hero image, a few gallery thumbnails that are actually full-size files, and a logo or background image nobody remembered.
Note the numbers. Write down the page weight, the largest image files, and the LCP element. You need a baseline, because image work is easy to overdo — compress too hard and the photos look flat, lazy load the wrong thing and the hero appears late. For a repeatable testing routine, see our guide on how to test your WordPress site speed the right way: https://wpspeedaudits.site/how-to-test-wordpress-site-speed/
Step 1: Serve the right size, not the original
This is the single biggest win on most image-heavy sites, and it costs nothing. WordPress already creates several sizes of every upload, but themes and gallery plugins do not always use them. A thumbnail slot that displays at 400 pixels wide should not load a 2400-pixel file.
Check three things. First, in your Media Library, look at the actual dimensions of the images your gallery uses — if the file is several times wider than its display size, it is oversized. Second, check that your theme and gallery plugin are using srcset, the built-in WordPress feature that lets the browser pick the right size for the screen. Most modern themes do this automatically; a custom gallery or an old slider may not. Third, stop uploading originals straight from the camera. Resize before upload to something sensible — for most web use, 1600 to 2000 pixels on the long edge is plenty for a large display image, and far less is needed for thumbnails.
If older uploads are the problem, regenerate thumbnails after changing image sizes. The Regenerate Thumbnails plugin, or the thumbnail regeneration built into many optimization plugins, rebuilds the missing sizes so the right file exists for every slot. Do this on a staging copy first if your library is large, because it can take a while.
Step 2: Pick a modern format, and let the plugin do the conversion
JPEG and PNG still have their place — JPEG for photographs, PNG for graphics that need transparency — but modern formats are smaller for the same quality. WebP is now supported in all major browsers and typically cuts a photograph’s file size noticeably compared with JPEG. AVIF can go smaller still, but encoding is slower and support, while good, is not quite as universal.
You do not need to convert files by hand. An image optimization plugin such as ShortPixel or Imagify can generate WebP or AVIF versions and serve them to browsers that support them, falling back to the original for everyone else. Turn the feature on, run it across your existing library in batches, and spot-check a few images at full size before you run it on everything. If you want the detailed comparison before choosing, read WebP vs AVIF: which image format is faster for WordPress: https://wpspeedaudits.site/webp-vs-avif-wordpress/
One caution: do not serve AVIF as your only format. Keep the fallback working, and check your gallery lightbox and any social sharing previews after switching, because some tools still pick up the original file.
Step 3: Compress properly — quality settings matter more than the plugin
Compression is where most sites either underdo it or overdo it. Uploading untouched camera files wastes bandwidth. Crushing every photo to the lowest quality setting saves bytes but makes skin tones blotchy and skies banded, which is exactly what a portfolio cannot afford.
A sensible starting point for photographs is lossy compression at a quality level in the low-to-mid 80s, then judge by eye, not by the percentage saved. Compress a few representative images — a portrait, a landscape, a detailed product shot — and view them at full size on a decent screen. If you cannot see a difference at normal viewing distance, the setting is right. For a deeper walkthrough of settings and bulk workflows, see how to compress images for WordPress without losing quality: https://wpspeedaudits.site/compress-images-wordpress-without-losing-quality/
Two practical rules help. Resize before you compress, because compressing a huge file and then serving a smaller version wastes the work. And compress once, in one place — running two optimization plugins over the same library usually just degrades quality without saving much more.
Step 4: Lazy load everything below the fold — and nothing above it
Lazy loading is built into WordPress: images below the fold get loading=”lazy” automatically in most setups. That alone can transform a gallery page, because the browser only downloads the images the visitor actually scrolls to. But two mistakes undo the benefit.
The first is lazy loading the hero or the first gallery image. That image sets your LCP score, and delaying it makes the page look slower, not faster. Exclude the hero image, the featured image, and the first visible gallery row from lazy loading. Most optimization plugins and gallery plugins have an exclusion setting for this — use it, and verify in PageSpeed Insights that the LCP image is no longer flagged as lazily loaded.
The second is forgetting layout shift. When a lazy-loaded image finally arrives and has no reserved space, the page jumps and your CLS score suffers. Make sure your images carry width and height attributes, or an aspect-ratio box, so the browser reserves the space before the file arrives. For the full method, including plugin options and above-the-fold exclusions, read our complete guide to lazy loading images in WordPress: https://wpspeedaudits.site/lazy-load-images-wordpress-guide/
Step 5: Fix the gallery itself
Sometimes the gallery plugin is the bottleneck, not the images. Some gallery plugins load every full-size image on page load even when they only show thumbnails, preload the entire lightbox set, or add their own JavaScript and CSS on every page whether a gallery is present or not.
Test this directly: temporarily switch a test gallery to a simpler layout, or disable the gallery plugin’s extras, and compare the page weight and script count. If the plugin loads full-size files for thumbnails, look for a setting that forces it to use the thumbnail size, or switch to a plugin that does. If it loads its scripts site-wide, use a script manager or your caching plugin’s per-page controls to load them only on gallery pages.
Also reconsider sliders and carousels. A slider that preloads five large slides when only one is visible is a gallery problem in disguise. On mobile especially, a simple grid that visitors scroll through is often faster and easier to use than an autoplay carousel. If you keep a slider, limit the number of preloaded slides and turn autoplay off.
Step 6: Use a CDN for images — and check what it actually changes
A content delivery network serves your images from a server near each visitor instead of from your origin server alone. For an image-heavy site with visitors in more than one region, that distance matters: a photograph served from a nearby edge location starts rendering sooner than one fetched across the world.
You have two broad choices. A general CDN rewrites your image URLs to its edge network. An image CDN goes further: it can resize, convert formats, and compress on the fly, serving each visitor the best version for their device. That second option is attractive for galleries and shops, but it is not always necessary — a good optimization plugin plus a general CDN already covers most sites. The decision framework, including costs and when each option wins, is covered in our comparison of an image CDN versus an image optimization plugin: https://wpspeedaudits.site/image-cdn-vs-image-optimization-plugin/
Whichever route you take, verify it. After setup, open a gallery page, check an image URL and its response headers, and confirm the file is actually coming from the CDN and not still from your origin. A CDN that is configured but not serving files is a surprisingly common silent failure.
Step 7: Mind the extras around the images
Images rarely travel alone. Background videos, autoplay video posters, embedded social feeds, and share buttons all add weight to the same page. A single autoplay background video can outweigh every photograph on the page. Replace video backgrounds on gallery pages with a still poster image, or at least make sure the video is compressed, muted, and not set to preload the whole file.
The same goes for shop pages. Product galleries, related-product carousels, and zoom plugins each add images and scripts. Keep related products to a small number, use the same thumbnail size consistently, and turn off image zoom if your customers rarely use it — zoom usually loads a second, larger copy of every product image.
Finally, watch your theme. Some themes add decorative images, background textures, and oversized header images on every page. If a background image is only decorative, compress it hard or replace it with CSS. If a header image appears on gallery pages where it competes with the real content, consider a simpler header for those templates.
A checklist to run before you call it done
Work through this list on your heaviest gallery, portfolio, or shop page, then repeat it on one more page type before rolling changes out site-wide.
First, confirm no image is much wider than its display size, and regenerate thumbnails if you changed sizes. Second, confirm a modern format is being served with a working fallback. Third, spot-check compression quality at full size on a few different kinds of photos. Fourth, confirm below-fold images lazy load, the hero does not, and space is reserved so nothing jumps. Fifth, confirm the gallery loads thumbnails, not full-size files, and its scripts only run where needed. Sixth, confirm the CDN is actually serving the images. Seventh, re-run PageSpeed Insights and compare against your baseline — page weight, LCP, and CLS should all have moved, not just one of them.
Image-heavy sites reward patience. No single change here will make a gallery instant, but together they remove the stacked problems that made it slow: right sizes, modern formats, sensible compression, lazy loading done correctly, a gallery that behaves, and delivery from nearby servers. Your photographs stay the star of the page. They just stop making visitors wait for them.