Optimize Article Images for SEO, Clarity, and Mobile Reading

Optimizing article images starts with deciding what readers need to see. Then crop to clarify the subject, export at an appropriate size, reduce file weight while checking the result, and write alt text that describes the actual image. A small file that crops out an essential step still needs fixing.

This guide explains when to use photographs, illustrations, or diagrams. It includes a cropping comparison and a compression test with recorded dimensions and file sizes. The aim is to preserve useful information as an image moves from an editing screen to a phone.

1. Choose the image type around what readers need to understand

Before looking for an image, finish this sentence: “This image helps the reader see…” A specific answer makes it easier to choose the image and protect its important details.

• Use a real photograph for identification or evidence: a product’s shape, a material, the location of a component, its condition before repair, or the result of a real action. A sewing-quality guide needs a close enough view of the stitches. A person standing in a shop supplies context, not that evidence.
• Use an illustration to explain an idea: organizing content, scattered information, or a hypothetical situation. Illustrations can simplify distracting details. Identify them as illustrations when they might otherwise be mistaken for a real product, project, or result.
• Use a diagram for relationships or sequences: which step comes first, which branch applies, or how two options differ. If a diagram simply repeats paragraphs in tiny boxes, simplify it or keep that material as readable article text.
• Use a screenshot for an interface task: show the correct button, field, or status with enough surrounding context to locate it. Conceal private information before use.

An article can combine these formats if each has a clear purpose. The featured image introduces the topic; body images explain the section beside them. A new subheading does not automatically require another image.

Use your own images, material the owner has authorized, or sources with suitable usage terms. Keep source and permission information with the original file. When depicting a real product, do not let a generated image invent unconfirmed colors, textures, or features.

2. Decide the crop before compression

Cropping chooses which part of the scene remains. Resizing changes pixel dimensions. Compression changes how the image data is stored to reduce file size. Working in that order avoids carefully compressing an image whose composition still needs changing.

Return to what the image should show and identify its essential area. For an instructional photograph, that may include both a hand and the component being handled. In a room photograph, relationships between objects may matter, so cropping tightly could remove the meaning.

• Frame the image for its intended position: featured image, landscape body image, or detail.
• Leave some space around essential content so it can tolerate different display treatments.
• Do not stretch an image to fill a frame. Adjust the crop or choose another image when the proportions do not fit.
• Check a small preview first. Can readers recognize the subject without zooming?

A composition that looks good on desktop may make its main detail too small on a phone. web.dev’s art-direction guidance explains how different crops can serve different screens. If your CMS accepts only one version, choose a composition that still communicates at both sizes rather than assuming automatic cropping will be correct.

A cropping comparison from the same GPT-generated illustration

The original illustration is 1536 × 1024 pixels and shows a leaf, two picture frames, and a magnifying glass. Both comparison files below were exported at 390 × 390 pixels:

• Full composition: the whole image was reduced to 390 × 260 pixels, then padded above and below to create a 390 × 390 square.
• Center crop: the central 1024 × 1024 area was cropped and reduced to 390 × 390 pixels. The subject appears larger, but details at the sides are lost.

The full version preserves both frames and the handle, which helps when their relationship matters. The center crop enlarges the leaf but removes the large frame’s left edge and the end of the handle.

A tight crop is not always wrong. It may work if the purpose is to examine the leaf veins. If the whole composition matters, retain the objects or choose another crop. Sharpening or lighter compression cannot restore content already cropped out.

These are exports from one illustration, not product photographs or customer results. The CMS display still needs checking after upload.

3. Test a specific image before choosing the final version

For the compression test, Mạch Nội Dung used an AI-generated illustration created for the original article: a dark green leaf passes through two ivory frames, with a brass magnifying glass revealing its veins. Dark regions, a light background, and fine lines make details available for comparison. It is not a product photograph or an optical measurement.

The source PNG was converted with ImageMagick to two WebP versions using quality settings of 88 and 30. All three retained the same crop and dimensions of 1536 × 1024 pixels. The following measurements were recorded from exports on October 4, 2026, before upload to the CMS. A CMS that recompresses or converts an image may save a different file size.

• Source PNG: 2,421,942 bytes, or 2,365.2 KiB.
• WebP quality 88: 213,232 bytes, or 208.2 KiB.
• WebP quality 30: 45,958 bytes, or 44.9 KiB.

Here, 1 KiB equals 1,024 bytes. Compared with the source PNG, Q88 reduced file size by approximately 91.2%, and Q30 by approximately 98.1%. Those results apply to the format conversion and export settings for this particular image.

At the same displayed width, both WebP versions still show the leaf, frames, and magnifying glass. Look beyond the overall composition: compare the veins inside the glass, frame edges, and light background to decide whether enough detail remains for the intended use.

Mạch selected Q88 as the featured image for this article to prioritize illustration detail. Q30 remains an option for smaller placements or tighter file-size budgets. That is an editorial choice for this image set, not a universal quality threshold.

The test establishes that file size fell while pixel dimensions stayed unchanged. It does not show how much faster a page loaded or demonstrate an SEO ranking improvement. Measuring loading impact requires the actual page, network conditions, device, and image-delivery setup.

4. Choose dimensions and format for the display position

Before exporting, check the image’s displayed width in the article layout. File dimensions and visible page width are not necessarily the same. Higher-density screens may need more image pixels to retain clarity.

Responsive-image techniques allow browsers to choose among sizes. If the CMS generates these versions, inspect what it actually serves. Otherwise, choose a file suitable for the largest intended display and check desktop and mobile instead of uploading a many-thousand-pixel original for every placement.

Use these starting points, then compare the results visually:

• Photographs and tonal illustrations: try WebP or JPEG, and consider AVIF if the CMS supports it.
• Fine lines, small text, or precise detail: compare PNG or lossless WebP with a lossy export before choosing.
• Logos and geometric diagrams: a vector file may suit the task if the system handles it safely. Renaming a bitmap file with an SVG extension does not make it a vector.

These choices follow web.dev’s image-format guidance. A suitable format preserves the necessary information at a reasonable file size within your system. A newer extension is not a substitute for checking the result.

For a fair compression comparison, export from the same original with identical crops and dimensions. Increase compression until important detail begins to suffer, then return to a version that still meets the need. Watch thin lines, object edges, subtle gradients, and any small text or diacritics.

The “quality” number is an encoder parameter, not the percentage of visual quality remaining. The same number in JPEG and WebP does not mean equivalent results. web.dev explains these compression differences. Record the tool, format, and settings if you need to repeat a test.

A CMS upload limit is a technical constraint, not proof that an accepted file is the best choice. Equally, do not destroy text or useful detail merely to meet a self-imposed file-size target.

5. Write alt text for the final image and its context

Alt text conveys image information to people who cannot see it. W3C’s guidance for informative images bases the description on what the image contributes in context. Write it after choosing the final crop: a description accurate for the original may no longer fit the published version.

For the leaf illustration, an appropriate description is: “Illustration of a leaf passing through two ivory frames, with a brass magnifying glass revealing its veins.” It describes visible elements. “Best beautiful SEO-optimized image” provides no useful picture and introduces unsupported claims.

The padded version might use: “The leaf, both picture frames, and the full magnifying-glass handle inside a padded square.” The center crop needs different wording: “The same illustration cropped to exclude the left edge of the large frame and the end of the magnifying-glass handle.” Describe each image’s role in the comparison rather than copying one alt text across different tasks.

For comparison images, identify what is being compared. Keep measurements and longer explanations in adjacent text where everyone can read them. This combination of short alternatives and nearby detail aligns with W3C’s guidance for complex images.

A purely decorative image can use empty alt text, following W3C’s decorative-image guidance. Empty alt text is a deliberate choice, not a reason to leave every image undescribed.

Google Search Central recommends concise, descriptive filenames, placement near relevant text, and avoiding keyword-stuffed alt text. Naming an image for its subject is more useful than a generic “image-01.” Include a keyword only when it genuinely helps describe the image.

Keep alt text and captions distinct. Alt text supplies an alternative to the image. A caption helps readers understand its source, test conditions, or a point worth noticing. Use captions to identify illustrations or explain measurements instead of packing every detail into the alt text.

6. Check the saved article on mobile

Opening the image file alone is necessary but insufficient. On the page, column width, margins, thumbnail cropping, and CMS processing affect it. Check the saved preview, not just the editor.

• Read at normal size: is the main point clear without pinching to zoom? If image text is too small, shorten it, split the visual into meaningful parts, or move the information into article text.
• Check the crops: inspect the featured image in the article list and the image on the detail page. Are essential hands, objects, or labels missing?
• Match image and explanation: is it beside the right passage? Do “A/B” or “before/after” labels agree?
• Check CMS processing: reopen the saved file and inspect fine lines and accented text. A good export can change when the system regenerates it.
• Scroll through the whole page: look for horizontal overflow, unusual gaps, shifting text, and missing images.

Narrowing a desktop browser is a quick layout check. When possible, use a real phone too, particularly for text-heavy or detailed images. Zooming should not excuse an image that is unreadable at its normal size.

If the leading image appears slowly or shifts the text, involve the website administrator. web.dev’s image-performance guidance explains why immediately visible images should not be lazy-loaded and why declaring dimensions helps the browser reserve space. These are delivery and layout issues beyond editing the image file.

7. Finalize the image set before publishing

A final review should answer:

• What does each image help readers understand, and do any repeat the same role?
• Is its source appropriate, does it depict the right subject, and is it labeled as an illustration where needed?
• Does the crop preserve essential detail in both the large view and thumbnail?
• Is the export clear enough, and do the article’s measurements correspond to that exact file?
• Does the alt text describe the final version, with longer explanations available in readable text?
• Have the saved featured image, body images, and links been reopened and checked?

Keep originals separately so you can recrop if the layout changes. Clearly identify final files with their roles and alt text rather than handing over many similar test versions.

A good image set helps people recognize the topic, understand examples, and follow the article on the screen they use. Mạch Nội Dung’s website content care can help coordinate writing, imagery, and presentation in the CMS.