DEV Community

Cover image for Optimizing PNG vs JPG: Tips and Tools for WordPress
Bianca Rus
Bianca Rus

Posted on

Optimizing PNG vs JPG: Tips and Tools for WordPress

A slow WordPress site is usually an image problem. Not a hosting problem, not a plugin problem, an image problem. And more often than not, it comes down to two things: using the wrong format and skipping compression entirely.

This post covers when to use PNG vs JPG, how WordPress handles images under the hood, and which tools and plugins can automate most of the optimization work for you.

PNG vs JPG — When to Use Which

JPG uses lossy compression. It discards some image data during compression, but at quality levels around 80-85, the difference is invisible to the human eye for most photographs. File sizes drop dramatically. This is the right format for any photographic content, blog headers, team photos, product shots, background images.

PNG is lossless. Nothing gets thrown away, which means the file is larger but pixel-perfect. Use it when you need transparency, or when the image contains sharp edges like text, logos, icons, or UI screenshots. JPG compression tends to create visible artifacts around hard edges, and that's where PNG earns its keep.

A rough guide:

  • Team photo, landscape, food shot → JPG
  • Company logo, icon, screenshot with text → PNG
  • Simple graphic that doesn't need transparency → could go either way, test both

The trap a lot of people fall into is defaulting to PNG for everything because it "looks better." And technically, that's true,but a multi-megabyte PNG and a much smaller JPG of the same photo will look identical on screen, and only one of them will tank your page speed.

Here's a side-by-side comparison of the same image saved as JPG and PNG:

The PNG version is over 8× larger, with no visible difference in quality.

This is why using PNG for photos is one of the fastest ways to slow down a WordPress site.

How WordPress Handles Uploaded Images

This is worth understanding because it makes the optimization problem worse than you'd expect.

WordPress doesn't just store the image you upload. It generates multiple resized versions, thumbnail, medium, medium_large, large, plus any custom sizes registered by your theme or plugins. Some themes register three or four additional sizes. So a single upload can turn into six, seven, eight files on disk.

None of these get compressed. WordPress resizes them but doesn't optimize them. That 5MB PNG you uploaded is now a 5MB original plus five or six slightly smaller but equally uncompressed copies sitting in /wp-content/uploads/.

Scale that across a few hundred posts and the uploads folder can easily hit several gigabytes. Which is exactly why automated compression matters, nobody is going to manually optimize every generated thumbnail.

Tips and Tools That Make a Difference

Start with the format decision

Before reaching for any plugin, make sure images are in the right format to begin with. A quick test: save the same image as JPG and PNG, compare sizes. If the JPG is a fraction of the PNG size and looks the same, there's no reason to keep the PNG version.

This is the single highest-impact thing you can do, and it costs nothing.

Automate compression with a plugin

Manual optimization works on small projects. On any site where content gets published regularly, it breaks down fast. Someone forgets, someone doesn't know how, and suddenly there are 200 unoptimized images in the media library.

A compression plugin solves this by optimizing images automatically on upload and offering bulk optimization for the existing library.

A few worth looking at:

ShortPixel Image Optimizer is usually the best as it handles lossy, glossy, and lossless compression, does automatic WebP and AVIF conversion, and has solid bulk optimization with CDN included in each plan, even the Free one. It tends to be the most well-rounded option, works reliably, easy to configure, best compression results across both JPG and PNG.

Imagify is a good alternative, especially for sites already using WP Rocket since they're from the same company and integrate well. Has a reasonable free tier for smaller sites but doesn't have as good compression as ShortPixel and lacks a lot of their advanced features.

EWWW Image Optimizer takes a different approach,it can run compression locally on the server without sending images to an external API, which means it will consume your server's resources when optimizing the images. That's a selling point for projects with strict data handling requirements.

Smush covers the basics well but it's not as advanced as the others. A safe default if you don't want to overthink it.

Any of these is dramatically better than having no image optimization at all. And the number of WordPress sites running without any compression plugin is honestly surprising.

Enable WebP (and maybe AVIF)

WebP delivers noticeably better compression than both JPG and PNG at equivalent visual quality. Browser support is essentially universal at this point. AVIF pushes the compression even further, though browser support is still catching up.

Most optimization plugins can generate WebP versions automatically and serve them via <picture> elements or .htaccess rules, modern browsers get WebP, older ones fall back to JPG/PNG. ShortPixel handles this with a single toggle in settings and also supports CDN delivery.

Not enabling WebP/AVIF conversion in 2026 is basically leaving free performance gains on the table.

Lazy load correctly

Since WordPress 5.5, images get loading="lazy" by default. That's the easy part. The part people get wrong is lazy loading above-the-fold images, specifically the LCP (Largest Contentful Paint) element.

If the hero image at the top of the page is being lazy loaded, that's actively hurting Core Web Vitals. It should get fetchpriority="high" instead. WordPress 6.3 introduced smarter heuristics for this via wp_get_loading_optimization_attributes, but it's still worth verifying that your theme isn't doing something weird.

Check your responsive images setup

WordPress generates srcset attributes on images automatically, letting the browser request the most appropriate size for the current viewport. This works great out of the box, unless the theme is fighting it.

Common issues: themes that hardcode image dimensions in templates, CSS background images that pull the full-size original regardless of screen size, or custom image sizes that are way larger than needed. Worth a quick audit, especially on mobile where bandwidth is more constrained.

Checking Your Results

PageSpeed Insights will flag unoptimized images directly, look for the "Serve images in next-gen formats" and "Efficiently encode images" audits. Both should pass once a compression plugin with WebP conversion is active.

For a more detailed view, WebPageTest shows a full waterfall of every resource loaded, making it easy to spot which images are the heaviest.

To Sum It Up

If you fix only one thing on your WordPress site this month, fix your images first. Nothing else will give you this much performance improvement for this little effort.

Quick checklist before you close this tab:

  • Use JPG for photos, PNG for graphics with transparency or sharp edges
  • Install a compression plugin (ShortPixel, Imagify, EWWW, Smush — pick one)
  • Enable WebP/AVIF conversion
  • Don't lazy load your LCP image, use fetchpriority="high" instead
  • Verify that srcset is working and your theme isn't overriding it

That's it. 5 minutes of setup, and your site is faster than 90% of the WordPress installations out there.


What tools are you using for image optimization in WordPress? Always curious to see what other setups look like — drop a comment.

Top comments (0)