Library·SOP·SEO
Choose images that help readers, resize and compress oversized files without losing useful detail, add them in the WordPress block editor, write useful alternative text, and check the finished page on phone and desktop.
Last reviewed: · Editorial review
Clarity, structure and references reviewed in this version. This is not a test in a live account.
Choose images that help readers, resize and compress oversized files without losing useful detail, add them in the WordPress block editor, write useful alternative text, and check the finished page on phone and desktop.
This SOP covers:
This does not cover:
Review images one at a time. Keep, replace, or add an image only when it makes the page clearer or more useful.
For each image on the page, decide what a reader should learn or see from it. Keep an image that supports a nearby explanation, replace one that is unclear or unrelated, and add an image only when it helps with a real question or task.
Ask whether the image shows a detail, step, comparison, or result that would be harder to understand from the words alone. For a guide to growing tomatoes in pots, a clear photo of the pot's drainage holes beside the drainage instructions can help; a generic flower photo beside the same instructions adds little.
Keep a useful image. Replace it if the subject or quality is wrong. Add a new image only when it helps answer the reader's question. If an image is only visual decoration, it can stay, but it does not need a descriptive alternative text.
Use an image the site owns or has permission to use. Before using a third-party image, check its license and any required credit or restrictions. If permission is unclear, ask the site owner or choose a confirmed source before uploading it.
Get the image file onto your computer, keep an unchanged original, and name a working copy before editing it.
If the image is already in WordPress and you do not have its file, open Media > Library. Click its thumbnail to open Attachment details, then choose Download file. Find the downloaded image in your computer’s Downloads folder.
Make a copy of the image file. Keep the original unchanged and use the copy for resizing and compression. If you already have the image on your computer, start with that file.
Rename the working copy with a short description of what it shows, using hyphens between words. For example, tomato-pot-drainage-holes.jpg is clearer than IMG17348.jpg. Keep the file extension, such as .jpg or .png, unchanged.
Prepare a smaller file only when the original is larger than this page needs. Keep the unchanged original, and follow these steps before replacing the draft image.
In the WordPress draft, select the Image block where this picture will go. If needed, place the original beside the paragraph it supports. Under Settings > Block > Dimensions, use Width if it shows a number. If it shows Auto, enter a trial value, such as 800 px for a large article image, keep Height set to Auto, and preview the page. Adjust Width until the image fits the text column and its important detail is clear. Use the chosen width in Squoosh below; do not enlarge the original.
Open Squoosh and choose Drop OR Paste to load the working copy. Keep the unchanged original somewhere safe until you have checked the result.
In Squoosh, enable Resize, enter the width you noted, and keep the proportions so the image does not stretch. Do not enlarge the source. For a photo, choose MozJPEG (JPEG) and lower its quality setting a little at a time. For a transparent image or sharp line art, keep PNG. Compare the before and after at the same zoom and check both file sizes; keep only a smaller result that still shows important detail clearly.
Save or download the result. In your downloads folder, name it with a short description of what is shown, such as tomato-pot-drainage-holes.jpg, and keep the extension that matches the chosen file type. Use the export only if it is smaller and still clear. If detail degrades, raise quality or use the original. Keep the original until WordPress shows the new file clearly.
Use the block editor's Image block. Keep the alternative text focused on the image's purpose on this page.
Open the post or page in the WordPress block editor and add the prepared image near the paragraph it supports. If you placed the original in the draft to find the display width, replace that temporary image with the checked export.
Select the block inserter (+), choose Image, then upload the prepared file or choose it from the Media Library. If replacing an image, select it and use Replace. Use a permitted image saved in the Media Library instead of relying on a third-party file URL that could later stop working.
Place the image next to the text it supports. A photo of drainage holes belongs beside the instructions for checking drainage, not in an unrelated section.
Select each image and set alternative text in its block settings. Alternative text is a short text description for people who cannot see the image; WordPress may label it Alt text or Alternative text.
For an image that adds information, write the shortest description that gives the important detail in context. For example, Drainage holes under a tomato planter is useful beside a drainage check. If the image is a link, describe its destination or action. Do not repeat nearby text or stuff the description with keywords.
If an image adds no information and is not a link or button, mark it decorative or leave its alternative text empty. For a chart or detailed diagram, give the important data or explanation in nearby page text as well; a long alternative text is not a substitute for the full information.
Add a caption below the image only when it gives useful context or required photo credit. Do not use the caption to repeat the alternative text word for word.
Choose a display size and alignment that fit the surrounding content and keep important details visible.
Use the Image block's Resolution setting or resize handle to choose the closest available size for the space. Options vary by the uploaded file and theme. Do not stretch a small image until it looks blurry; move up one available size if needed.
Keep the part of the image the reader needs to see. Use the default or a supported width unless a wider image improves understanding. Avoid wrapping text around a large image, which can make the page harder to read on a phone.
A saved editor change is not the final check. Review the rendered page at the sizes people use.
Save your work and open the page preview. Check the image on a desktop-width view and a narrow phone-width view.
At desktop width, confirm the image is sharp, correctly cropped, and close to the text it explains. Check that any caption or credit is readable.
At phone width, confirm the image fits the screen, does not overlap text, and still shows the important detail. If the crop or text wrap hides it, return to the editor and adjust the image size or alignment.
Return to the editor and select each changed image. Confirm the file, page-specific alternative text or decorative setting, caption, and display size match the choices you made.
