Macro photo of a glass loupe resting on strips of film negatives over a warm amber light table, the edges falling into deep teal shadow, for WordPress image optimization, lazy loading and LCP.

هذا المقال متوفر باللغة العربية — اقرأ بالعربية

Most slow WordPress sites I open for clients in Cairo, Riyadh or Dubai have the same problem sitting at the top of the page: a 4 MB hero photo straight from a phone, a gallery of full size product shots, and a slider nobody asked for. WordPress image optimization is usually the fastest win you can get, because images are often the heaviest part of a page and the largest element a visitor sees first. This guide covers what WordPress already does for you, what it doesn’t, and a simple routine you can follow for every new upload.

Everything here is based on the WordPress core developer notes, the WordPress plugin directory and Google’s web.dev guides, all linked at the end. I’ve kept out anything I couldn’t check against those sources.

Why images matter so much for speed

Google measures page experience with Core Web Vitals. One of them, Largest Contentful Paint (LCP), measures how long it takes for the largest content element in the viewport to show up. On most blog posts, landing pages and product pages, that element is an image: the hero banner, the featured image or the main product photo. If that one file is heavy or loads late, the whole page feels slow, even if everything else is fine.

Images also affect layout stability. When an image loads without reserved space, the text below it jumps down. That movement is counted in another Core Web Vital, Cumulative Layout Shift (CLS). Google’s web.dev guide on CLS lists images without dimensions as a common cause.

For MENA audiences there’s a practical side too. Many of your visitors browse on mobile data, often on mid range phones. Every extra megabyte costs them time and sometimes money. A lighter page is simply more polite to them. If you want the wider picture beyond images (hosting, caching, fonts and scripts), our full speed guide for Arabic sites covers it step by step.

What WordPress already does with your images

A lot of site owners install three image plugins before checking what core WordPress already handles. Here is what you get out of the box today, with the version that introduced each feature.

Feature Since What it does
Responsive images (srcset and sizes) WordPress 4.4 Lets the browser pick a smaller copy of the image for smaller screens
Big image scaling WordPress 5.3 Scales huge uploads down to a 2560px maximum and keeps the original
Native lazy loading WordPress 5.5 Adds loading=”lazy” so images further down load only when needed
WebP uploads WordPress 5.8 Lets you upload and use WebP images like JPEG or PNG
fetchpriority=”high” WordPress 6.3 Tells the browser to fetch the likely LCP image first
AVIF uploads WordPress 6.5 Lets you upload AVIF images, if your server supports it

Responsive images

When you upload an image, WordPress creates several smaller copies (sub-sizes). Since WordPress 4.4 it adds srcset and sizes attributes to image markup, so a phone can download a small copy instead of the full width file. Since WordPress 5.3 there are also two extra default sizes, 1536×1536 and 2048×2048. You don’t have to do anything to get this, but your theme has to output images through the normal WordPress functions. Some page builders and sliders print their own markup and skip it.

Big image scaling

Since WordPress 5.3, if an uploaded image is taller or wider than 2560px, WordPress creates a scaled down version and uses it as the largest available size. The original file stays in the uploads folder. This protects you from the classic mistake of uploading a raw camera photo. The threshold can be changed with the big_image_size_threshold filter. Returning false turns the scaling off, which I rarely recommend.

add_filter( 'big_image_size_threshold', function () {
    return 1920;
} );

Lazy loading and fetch priority

WordPress 5.5 added the native loading="lazy" attribute to images, so images further down the page wait until the visitor scrolls near them. Lazy loading the main image at the top of the page is bad for LCP, though, so later releases (5.9, 6.2 and 6.3) improved how WordPress decides which images to skip. WordPress 6.3 also started adding fetchpriority="high" to the image it thinks is most likely the LCP image. The core team’s note says this typically improves LCP by 5 to 10 percent.

The catch: WordPress can only guess. If your theme loads the hero image as a CSS background or through a slider script, core can’t mark it, and you may need to handle it in the theme.

WordPress image optimization: picking the right format

The format you upload changes the file size more than almost any other setting. Here’s the short version, based on MDN’s image format guide and the WordPress core notes.

Format Best for Notes
JPEG Photos Universal support, larger files than modern formats
PNG Screenshots, graphics with transparency Lossless, often very heavy for photos
WebP Photos and graphics Supported by all major browsers, usually smaller than JPEG
AVIF Photos Can be up to 50% smaller than JPEG at the same quality, needs server support in WordPress
SVG Logos, icons Not allowed in the media library by default for security reasons

The WordPress 6.5 developer note says AVIF images can be up to 50% smaller than JPEGs at the same quality, and that AVIF is supported in all major browsers. The important condition is your server: WordPress relies on the image library on your hosting (Imagick or GD) to process AVIF. You can check by going to Tools, then Site Health, the Info tab, and the Media Handling section. Look for AVIF in the list of supported formats. If it isn’t there, ask your host, or stick with WebP for now.

A note on SVG logos: WordPress blocks SVG uploads by default because an SVG file can contain scripts. If you need SVG, use a plugin that sanitizes the files, and only allow trusted users to upload them.

Converting uploads automatically with Modern Image Formats

Core WordPress lets you upload WebP and AVIF files, but it doesn’t convert your JPEG uploads for you. That’s where the WordPress Performance Team’s own plugin comes in. It’s called Modern Image Formats (it used to be called WebP Uploads), and it has more than a hundred thousand active installations on WordPress.org.

According to its plugin page:

  • It generates AVIF images if your server supports them, and WebP otherwise.
  • When both are available, you choose the output format under Settings, then Media.
  • It works on new uploads only. Older images are converted only if you regenerate them, for example with the Regenerate Thumbnails plugin or the WP-CLI command wp media regenerate.
  • By default, only the sub-sizes are created in the modern format. The original JPEG or PNG stays as it is.
  • An “Output fallback images” checkbox makes it generate both the original format and the modern format for every size.

The plugin is also one of the features offered by the Performance Lab plugin, which groups the team’s feature plugins (Image Placeholders, Image Prioritizer, Enhanced Responsive Images and others) in one place. You can install Modern Image Formats on its own if that’s the only part you need. Both currently require a recent WordPress version, so update core first.

Before you regenerate a whole media library, take a backup and test on staging. On a store with thousands of product photos, regeneration can take a while and use a lot of disk space, because each image gets new files for every size.

A simple routine for every image you upload

Plugins help, but the biggest savings happen before the file reaches WordPress. This is the routine I give to clients and content teams.

  1. Resize first. A blog image rarely needs to be wider than your content area. A full width hero rarely needs more than about 1920px. Don’t rely on WordPress to fix a 6000px photo.
  2. Export in a modern format. Most editing tools export WebP and AVIF. Free browser tools like Squoosh, which the WordPress core team mentions, also work.
  3. Check the file size. If a regular blog image is still heavy after export, lower the quality slightly and compare by eye.
  4. Name the file properly. Use a short descriptive file name in Latin letters, like cairo-office-team.webp. Arabic file names work, but they turn into long encoded URLs that are hard to share and debug.
  5. Write alt text. Describe what the image shows, in the language of the post. On a bilingual site, the Arabic post gets Arabic alt text.
  6. Insert it with the editor. Use the Image block or the featured image box, so WordPress adds width, height, srcset and loading attributes.

Alt text on bilingual sites

If you run WPML or Polylang, check how your setup handles media translation. A common mistake is that the Arabic page reuses the English image with English alt text. Screen reader users get the wrong language, and search engines get a mismatched signal. Translate the alt text, and if the image contains text (a banner with a headline, for example), make a separate Arabic version.

Fixing the hero image

The hero is where most of the LCP problems live. Here’s what to check, in order.

  • Is it lazy loaded? Open the page, right click the image, choose Inspect, and look for loading="lazy". The top image shouldn’t have it.
  • Does it have fetchpriority=”high”? If WordPress picked it as the LCP image, you’ll see the attribute. Google’s guide on Fetch Priority explains why it helps.
  • Is it a CSS background? Backgrounds set in CSS are discovered later by the browser and don’t get srcset. Where you can, use a real image element instead.
  • Is it inside a slider? Sliders often load several large images and extra JavaScript before showing the first slide. One strong static image usually performs better.
  • Does it have width and height? Without them, the page jumps when the image loads.

If your theme makes these fixes hard, that’s worth knowing before your next redesign. When you’re choosing a new one, our roundup of store themes tested with Arabic and RTL is a good starting point for online shops.

Images in WooCommerce stores

Stores have more images than any other kind of site, so small mistakes multiply. A few habits make a big difference:

  • Agree on one aspect ratio for product photos (square is common) so category grids line up and don’t shift.
  • Upload product photos at a sensible size instead of the raw studio file.
  • Limit gallery images to the ones that help the customer decide.
  • Check the category pages on a phone, not only the single product page. Grids with many thumbnails are where heavy images hurt most.

How to measure the result

Don’t guess. Measure before and after, on the same pages.

Tool What to look at Why
PageSpeed Insights LCP and the LCP element Shows which image is the LCP element
Browser DevTools Network tab, filtered by Img Shows the size of every image on the page
Search Console Core Web Vitals report Shows real user data over time

In PageSpeed Insights, open the LCP section of the diagnostics and it will show which element it measured. If that’s an image, you know exactly which file to work on first. Real user data in Search Console takes a few weeks to update, so don’t panic if the report doesn’t move the next day.

Common mistakes I see

  • Installing several image plugins at once. Two plugins converting or lazy loading the same images can conflict. Pick one approach.
  • Lazy loading everything with a plugin. Some speed plugins add lazy loading to the hero image too. Exclude the top image.
  • Compressing the logo into mush. Logos and text heavy graphics need a lossless format or SVG, not aggressive JPEG compression.
  • Forgetting old content. New uploads are optimized, but the five hundred images from 2019 aren’t. Regenerate or replace the ones on your top pages.
  • Deleting originals to save space. Keep a backup of the originals. You may need them for a redesign or for a format that doesn’t exist yet.

If you’d rather have someone handle this as part of regular care for the site, image checks are part of our ongoing WordPress care plans.

Frequently asked questions

Should I switch every image to AVIF?

Only if your server supports AVIF (check Site Health, Media Handling). If it does, AVIF usually gives smaller files for photos. If not, WebP is a safe choice with support in all major browsers.

Do I still need an image optimization plugin?

Not always. WordPress handles responsive images, lazy loading and fetch priority on its own. A plugin like Modern Image Formats is useful if you want your JPEG uploads converted automatically. If you already export in WebP or AVIF, you may not need one.

Will converting images break my old posts?

Modern Image Formats only affects new uploads unless you regenerate. Regenerating creates new files, so take a backup and test on staging first, especially on large stores.

Does image optimization help SEO?

Indirectly, yes. Faster LCP and less layout shift improve page experience, and good alt text helps Google understand your images. It won’t replace good content, but it removes a common technical weakness.

A final word

Start with the hero image on your three most visited pages. Make it the right size and format, make sure it isn’t lazy loaded, and measure again. That alone often fixes most of the problem. After that, set up the routine for new uploads, and deal with the old library gradually.

References