How to prepare website images: Size, alt text, and search readability

A herb-repotting tutorial has ten photos, all compressed, yet readers cannot tell which shows the roots being inspected and which shows soil being added. Start image work by asking what each picture must explain. Dimensions, description, and download size should serve that purpose.

Treat each image as a small asset package with a job: keep the master, make a web version, explain its use, and inspect the published page. This makes problems easier to trace after a redesign or tool change and keeps image-search performance from resting on one plugin score.

Decide what information each image adds

Before inserting an image, write the question it answers. A close-up of the roots might show whether the root ball is overcrowded; a finished photo might show the distance between the soil surface and pot rim. Although both show the same plant, they serve different purposes and should not share an identical file name and description.

If removing an image would make readers miss a necessary step, make sure the important information is understandable in text too. For a complex flowchart, spell out the sequence and conditions in the article; dense labels in a small picture cannot carry the entire lesson. Placing the image near its related section also helps people and search systems understand its context.

A plain background texture or other decoration that adds no information needs different treatment. Do not create noise by forcing keywords into every image field. Mark images as informative, functional, or decorative first; that gives you a consistent basis for writing alt text later.

Export dimensions and formats for the way images appear

Check the content column, phone layout, and need for enlarged viewing before choosing export dimensions. A photo master may be much larger than the page needs, but lesson details must not become blurry. Keep the high-quality original, and adjust the crop, resolution, and compression in a separate web version so you can remake it later.

Try suitable formats for photos, transparent graphics, and screenshots with text. Google Images supports formats including JPEG, PNG, WebP, AVIF, and SVG, but support does not mean one format is smallest for every asset. Compare actual file size and clarity, especially fine screenshot text, edges, transparency, and color changes.

Responsive images can offer several sizes for the browser to choose under different conditions. Google recommends a standard img element; when using srcset or picture, still provide a fallback src URL. Do not treat an image shown only as a CSS background as a content image available for Google Images indexing. Check the output, not just the editor thumbnail.

Give file names and alt text separate jobs

Before upload, use a short, recognizable name such as herb-root-check instead of a camera serial number. A file name can provide context without stacking city names, brands, and every popular query. On an existing site, renaming also requires handling old references; bulk changes can break images.

Write alt text for the image's meaning in this article. For a root photo, 'After removing the plant from the pot, dense roots coil along the pot wall' helps someone who cannot see it understand this step. The emphasis could change if the same photo appears on a pot sales page. Alt text is not a permanent advertising slogan for an asset, and it need not begin 'This is an image of.'

The W3C's decision process also covers function and decoration: an image-only button needs text for its action or destination, while a purely decorative img can have an empty alt attribute. An empty value differs from omitting the attribute. A caption adds visible context for all readers; filling it in does not replace alt text.

Check image fields on each WordPress page

After uploading or choosing media through the Image block, check resolution, crop, and related text. WordPress documentation says changing alt text in block settings affects only that page or post; Media Library alt text is the default for future insertions. After editing the library, inspect the actual output of important older posts as well.

Reducing the displayed width does not necessarily reduce the downloaded file. Open the public page and check that the browser loads an image version and file size suited to the layout. If the theme crops a landscape picture into a square, make sure roots, gestures, and essential labels remain in frame.

Galleries, post covers, and content blocks can have different settings, so sample them separately. For the repotting article, check a close-up of one step, a full view, and a diagram, then verify that the remaining images follow the same process. Checking only the home-page cover does not prove the whole media library is ready.

1. Organize master and web versions; note purpose, dimensions, and source.
2. Insert an Image block and choose a resolution and crop that suit the layout.
3. Write alt text for this page's context or confirm that the image is decorative.
4. Check the actual image, text fields, and phone display on the public page.

Use Smush to assist, starting with a small comparison batch

The official Smush plugin page lists compression on upload, individual and bulk processing, and lazy loading; it marks features such as the image CDN as Pro. Before installing, check the current version and plan. If the host or another plugin already processes images, establish which tool is responsible for each stage.

In a recoverable environment, first choose a few representative images and keep the files and page views from before and after processing. Confirm that the settings preserve lesson details before considering a bulk run. Back up masters separately and check what the tool can actually restore; a 'compression complete' message does not prove that originals, thumbnails, and off-site files are all recoverable.

A plugin's compression ratio cannot stand in for content review. If fine root fibers disappear, screenshot text becomes hard to read, or diagram lines blend into the background, adjust quality or exclude that image. A compression tool also cannot decide what a photo means in its section; alt text and captions still require editorial judgment.

Check readability at publication and keep an update record

Check whether readers can understand each image in the flow of the article, whether its URL loads, and whether essential information is hidden in tiny text. Cropped, missing, or overflowing images on phones are concrete issues to record. 'Bad image SEO' alone does not identify a problem you can fix.

Use an asset log to retain file names, articles using each image, master locations, sources or original-art records, exported versions, and alt text. For licensed photos, keep the creator, license terms, and source link too, so you know whether you may remake them later. This log also helps when replacing images or removing unused assets.

Afterward, record download weight, visual quality, and search readability separately. An image being discoverable does not guarantee indexing or any ranking, and a smaller file does not guarantee a faster whole page. Keep the reason and result for each change so the next round can target the image, layout, or other loading resources.

Check how the article's sharing card presents its image.

Set an order for technical SEO checks on the site.

Back up WordPress files and data before major image changes.

• Tutorials
• Apps & software
• Marketing & SEO
• SEO