Make pictures lighter and deliver them

Prepare smaller versions of the pictures on your public pages, compare them with the originals, then let visitors receive them.

The idea in four steps

1. Allow it. In Settings you confirm that the pictures on your public pages may be processed.
2. Prepare. Image Manager finds the pictures on your public pages and makes lighter copies on your own hosting.
3. Look. You compare copy and original.
4. Deliver. You switch delivery on; from then on visitors get the lighter copy where your theme supports it.

Originals are never replaced. You can go back to the original for one picture or for all at any time.

Your yes comes first

Image Manager processes only pictures you have confirmed are public. On the Optimize tab that is the tick "These are public website images. I will keep private or member-only media excluded."; on the Settings tab, "I have checked that selected images are public, not private or member-only media." It is off at the start. Until it is on, nothing can be optimized, and a picture says "Public-image approval is required before a copy can be made."

Choose how strong

Graphics and pictures with transparent parts are always treated without loss. No mode resizes, crops, sharpens or edits your original. A copy is only kept when it saves at least 5 percent and at least 1 KB; otherwise the picture is listed as skipped: it was already good.

How large a picture may be is your choice: Largest picture to make lighter on the Settings tab. From the start, pictures up to 2,560 × 2,560 pixels (WordPress's own limit for uploads, so the main file of most photos) are made lighter when your hosting gives WordPress the memory for them. Before each picture Image Manager checks that memory; a picture that is larger than your choice, or does not fit, is not made lighter itself, and its result says why. The smaller sizes WordPress made of it are, and those are what most pages show.

The choices of one run (Optimize tab)

These choices are for this run only; your defaults on the Settings tab stay as they are.

Every setting on the Settings tab

Select Save settings. Saving changes no original file.

Under the settings, its own card Deliver pictures through your CDN has the CDN address, the switch Deliver pictures through this CDN and Check and save (see Delivery through your own CDN).

After choosing a larger Largest picture to make lighter, the pictures skipped earlier for their size are not tried again by themselves: in the results, use the Bulk editor with Retry using each image's saved policy on all matching results.

Run it

Open Optimize.

• Scan only shows what would be done, without doing it.
• Optimize site images starts, with the choices above.
• The work continues in the background and saves its progress. Pause, Resume and Stop are always there. Closing the browser does not stop it.

Image Manager starts from your home page, your shop page and the pages they link to (one step, up to 30 pages per scan), plus your products. A private or password-protected page is never made public by this.

Look at the results

The Library tab lists every picture with its result (Optimization results on the Optimize tab shows the run's results). Open one to see original and copies side by side at full size. Per picture you can:

• Use original: this picture is delivered as it was, the copies are kept.
• Use optimized: back to the lighter copy.
• Exclude image: leave this picture alone in future runs (Include image takes it back).
• Retry optimization with the current mode.
• Compare compression: try another mode on this one picture. Preparing the comparison changes nothing visitors see; you look at the result and approve it, or leave it.

Many pictures at once

The Bulk editor under the results does the same for many pictures. Choose the Action (Optimize / recompress, Retry using each image's saved policy, Use original images, Allow optimized delivery, Exclude from optimization, Include again, Check public-page delivery) and Apply to (Checked images on this page, All images on this page, or all matching results on every page). For Optimize you choose the same things as for a run. Tick the confirmation and select Run bulk action. The selection is fixed when you start: pictures found later do not join it. Originals are never deleted.

Deliver, then check

Switch on Offer optimized images on supported website output in Settings. Then check a real page:

A browser chooses among the sizes a page offers, depending on the screen. So "prepared" and "loaded" are two different questions; the two checks answer one each.

Lighter copies are delivered for ordinary pictures in posts and pages, pictures of your theme, and the classic WooCommerce product gallery. Zoom and lightbox keep the original. Custom galleries, some page builders, WooCommerce's block-based product pictures and a CDN or offload plugin may keep delivering the original; check a page that uses them.

Lazy loading

A lazy-loaded picture is fetched only when the visitor scrolls near it, so the first screen of a page comes faster. WordPress does this by itself for the pictures it builds (in posts, pages, products, widgets and galleries) and skips the ones it expects on the first screen. Some themes, page builders and plugins print pictures without WordPress, and those load at once. Lazy-load pictures that WordPress does not reach (Settings tab, off at the start) gives them the same treatment:

• Only pictures WordPress did not already decide about are touched, so WordPress's choices always stand.
• The first three pictures of the page (WordPress's own number) and pictures in the page header always load at once.
• A picture without a width and height is left alone, as WordPress does, so the page does not jump while it loads.
• So is one marked to load first (fetchpriority="high"), one another lazy-loading tool already handles, and one with the class skip-lazy: add that class to a picture that must always load at once.

Backgrounds set in CSS, videos and embedded frames are not changed. On a site where WordPress builds every picture, this setting changes nothing, which is the expected result.

Pictures sized to fit the page

WordPress gives each picture several files of different widths and lets the browser choose. To choose well, the browser needs to know how wide the picture is shown on the page, and WordPress often cannot tell it: it says "as wide as the file, or the whole screen". So a picture shown small in a grid of three can still download a big file. (For pictures further down the page, WordPress and modern browsers already work this out; the pictures of the first screen are the ones that miss out.)

Image Manager measures your real pages instead:

1. On the Optimize tab, the part Pictures sized to fit the page lists the pages it knows (your home page and the pages its scan found). Select Measure pages and keep the screen open. Each page is opened out of sight in that screen, at every width from a small phone (320 pixels) to a large monitor (1,920 pixels), and Image Manager notes how wide every picture is. It takes a few seconds per page; Stop ends it after the current page. Nothing leaves your site and no visitor is measured.
2. The report then shows, per page, how many pictures were fitted, how many your theme already sizes itself (those stay as your theme made them) and how many are left as they are (a picture with only one file, a product gallery, or a picture that changes with the screen width).
3. On the Settings tab, switch on Fit pictures to the page and save. From then on, each fitted picture on a measured page tells the browser its measured width. The width is never stated smaller than measured, so pictures never turn blurry.
4. Optional: Make the sizes these pages need. Where a picture has no file close to a width your pages need on phones, tablets and computer screens, Image Manager can make one: up to six per picture, never larger than the original and never cropped. Tick the confirmation and select the button; it runs like an ordinary optimization. The new files are offered when Offer optimized images on supported website output is on.

Measure again after changing your theme or the layout of a page. Forget the measurements (tick the confirmation) deletes all of them; pictures then go back to what your theme says, and files already made stay. The cart, checkout and account pages and pages you did not measure are never changed. Clear your page cache after switching Fit pictures to the page on or off.

Delivery through your own CDN

A CDN (content delivery network) keeps copies of your pictures on servers close to your visitors. If you already have one with its own address that fetches from your site (a "pull zone", for example at Bunny CDN, KeyCDN or Amazon CloudFront), Image Manager can send your pictures through it. There is no AffStackDev service in between and nothing to sign up for with us. If your whole site already runs through a CDN at your own address (Cloudflare, for example), you need nothing here.

1. In your CDN account, set your site's address as the origin and switch off any picture optimizing the CDN offers (Image Manager already makes the lighter files, and the check needs them unchanged).
2. On the Settings tab, in Deliver pictures through your CDN, enter the CDN address (it starts with https://), tick Deliver pictures through this CDN and select Check and save.
3. Image Manager puts a new small test picture on your site, asks the CDN for it and compares the two. Only if they are identical is the CDN switched on. The test picture is removed again, and the card shows the result of the check.

Then the pictures in your uploads folder (originals, sizes and Image Manager's lighter copies) are loaded from the CDN on your public pages. Your theme's own files, scripts and fonts, download files, and the cart, checkout, account and admin pages stay on your site's address.

Image Manager checks the CDN again every day. If the CDN stops returning the right file, Image Manager switches it off by itself and your site serves the pictures again; the card and Tools say so. Check and save again when the CDN works. After switching on or off, clear your page cache. When you replace a picture, it keeps its address, so purge it in your CDN account to show the new one at once.

If something does not work