Choose dimensions and formats before compression
Resize from the intended display size
A 5000-pixel camera image is unnecessary in a 900-pixel blog column. Export near the largest real display size while allowing for responsive and high-density screens.
Practical check: A 1600×900 featured image is often more practical than uploading the original 24-megapixel photograph.
Use JPEG for photographs
JPEG handles complex photographs efficiently and supports adjustable quality. Excessive compression creates blockiness around edges and gradients.
Practical check: Compare the optimized image at normal display size, not only while zoomed in.
Use PNG and WebP for the right reasons
PNG is useful for transparency and crisp graphics but can be large. WebP often reduces photographic or graphic file size while preserving acceptable quality.
Practical check: Keep PNG when lossless detail is essential; for a smaller alternative, compare a WebP export from the Image Compressor. WebP can also support transparency.
For more detail on the trade-offs, see the JPG, PNG and WebP comparison. Choose from real exports, not the extension alone.
| Format | Starting use case | Check before publishing |
|---|---|---|
| JPEG | Photographs without transparency | Fine detail, edges and compression artifacts |
| PNG | Graphics needing lossless detail or transparency | Whether the file is unnecessarily large |
| WebP | Photos or graphics when the output looks good | Transparency, sharp text and actual bytes saved |
| AVIF | A modern alternative to compare when supported | Server processing support, export time and compatibility with the site workflow |
WordPress added AVIF support in version 6.5, but the hosting image-processing library must support it. Check the actual media workflow before adopting it; WordPress support alone does not mean every server can create derivatives. See the WordPress AVIF support notes.
Dimension example: a 900 CSS-pixel content column might use a 1,800-pixel source for a 2× display. This is an example, not a universal required width. Check the largest real placement and the source quality; do not upscale a small original.
Compress images without visibly damaging them
Start with a moderate quality setting
Quality around the middle-high range is a sensible starting point for many photographs, but every image behaves differently. Detailed textures and gradients reveal artifacts sooner.
Practical check: Use the Image Compressor, compare the preview, and adjust quality based on visible results rather than chasing the smallest number.
Set maximum width and height
Dimension limits stop oversized uploads and reduce pixels before compression. Preserve aspect ratio to avoid stretched products, people, or logos.
Practical check: For a content image, set the maximum width based on the site layout; do not upscale a small source image.
Compare original and compressed file sizes
Record the size reduction and inspect the result on desktop and mobile. A 10 KB saving is not worth visible damage; a major saving with no obvious loss is a useful win.
Practical check: Download the optimized version with a clear filename and keep the source file outside WordPress.
The current Image Compressor exposes JPEG, WebP and PNG output, quality controls for lossy exports, and maximum dimensions. PNG does not use the JPEG/WebP quality slider in the same way. Compare the output, since recompression can sometimes make a small source larger. The separate Image Resizer currently exports JPEG; keep transparency requirements in mind.
Helpful tools for this stage: Image Compressor, Image Resizer, Image Alt Text Idea Generator. Use them for focused tasks and review every result before implementation.
Prepare filenames and alt text for publishing
Rename files before upload
Descriptive lowercase filenames help editors identify media and avoid camera names such as IMG_4837.jpg. Use a short phrase relevant to the image, not a list of keywords.
Practical check: Example: local-seo-audit-dashboard.webp is easier to manage than final-new-2.webp.
Write alt text for the image’s purpose
Alt text should communicate meaningful visual information to someone who cannot see the image. Decorative images may need empty alt text.
Practical check: Describe what matters in context: 'Owner reviewing campaign results on a laptop' is better than 'digital marketing image'.
Choose ALT according to purpose and context, not a focus keyword or filename. Use empty ALT for a truly decorative image; functional images need to convey the action. The W3C image ALT decision tree helps distinguish these cases.
Use consistent featured-image dimensions
A consistent aspect ratio creates a cleaner blog archive and reduces layout surprises. Prepare social crops separately if platforms require them.
Practical check: Keep important subjects away from crop-sensitive edges and preview the card layout after upload.
Manage images inside WordPress
Avoid storing unnecessary duplicates
Repeated uploads of slightly different files clutter the media library and make updates confusing. Decide which optimized asset is final before uploading.
Practical check: Delete unused media carefully only after confirming it is not referenced elsewhere.
Add image details during upload
Set useful alt text, title information for editors, and captions only when a visible caption helps readers. Do not paste keyword lists into attachment fields.
Practical check: The Image Alt Text Idea Generator can suggest a direction, but the editor must verify the actual visual.
Check lazy loading and layout stability
WordPress generally supports responsive images and lazy loading, but templates still need correct dimensions and sensible placements.
Practical check: Reserve image dimensions so content does not jump while the file loads, especially near the top of a page.
Verify responsive sizes on the public page
WordPress normally generates smaller attachment sizes and adds srcset and sizes to supported image markup. The browser chooses an appropriate source. Inserting a full-size image does not necessarily mean every device downloads that original, but custom templates and incorrect size hints can undermine the benefit.
Inspect the public image element and its selected source on a narrow screen. Check that the derivatives exist and that the size hint matches the layout. The WordPress responsive-image documentation explains how these attributes are generated.
Keep correct width and height attributes so the browser can reserve the aspect ratio while the image loads. Responsive CSS can still scale it. Reserving space helps prevent image-related layout shifts; see the layout-stability guidance.
Connect image choices to performance and SEO
Protect the largest visible image
The main hero or featured image can affect Largest Contentful Paint. Compress it carefully, serve appropriate dimensions, and avoid delaying it unnecessarily.
Practical check: Test the real page rather than assuming every image should be lazy-loaded.
Do not lazy-load the main image already visible in the initial viewport merely because other images are deferred. Below-the-fold images can usually use lazy loading; the likely LCP image should be available promptly. Check the rendered attributes rather than applying the same rule to every image. See browser-level lazy-loading guidance.
Use images that add information
A useful diagram, screenshot, or example supports understanding. Decorative images that add weight without value deserve scrutiny.
Practical check: For a how-to guide, a clear process graphic may help more than a generic stock photo.
Create a pre-publish image checklist
Verify dimensions, format, file size, filename, alt text, crop, mobile display, and licensing before publishing.
Practical check: Make the checklist part of the editorial workflow so optimization is not left until after a slow page is reported.
A repeatable publishing workflow
- Identify the image’s purpose, largest display size and transparency needs.
- Export an optimized copy; compare fine text, gradients and edges at the intended viewing size.
- Rename it descriptively and write ALT from what the image actually shows.
- Upload once, select the appropriate placement and preview featured-image crops.
- Open the public page on desktop and mobile; check sharpness, chosen responsive source, dimensions, loading and layout stability.
If a CDN or page cache still serves the old image, check the public asset URL and the cache layer before repeatedly re-uploading. A scoped purge or a new versioned filename may be appropriate in your own workflow; do not disable caching sitewide to solve one stale asset. Keep the original offline for future exports.
Useful image SEO begins with relevant visuals and a readable page, not keyword lists in attachment fields. Google’s image SEO guidance also recommends discoverable HTML images, responsive delivery and a fallback source URL.
Frequently asked questions
Is WebP always better than JPEG?
WebP often produces smaller files, but visual quality, compatibility requirements, and workflow matter. Compare real outputs.
What quality should I use for image compression?
Start with a moderate setting and inspect the result. There is no universal setting for every photograph or graphic.
Does alt text improve SEO?
Useful alt text supports accessibility and helps explain meaningful images. It should describe the visual purpose, not stuff keywords.
Should every image be lazy-loaded?
Images below the initial viewport often benefit, while the main visible image may need different treatment for performance.
Are browser-based image tools private?
Local browser processing avoids intentionally uploading the file to the tool server, but users should still handle sensitive images carefully.
What image size should a blog use?
Match the largest practical display width and use a consistent featured-image aspect ratio, such as 1600×900 when appropriate.
A fast image workflow happens before the WordPress upload button. Resize, choose the format, compress, inspect, name, and describe the image once; the published page then needs far less cleanup.