Back in 2021, we covered the basics of how images are used in WordPress. A lot has changed since then, so we’re revisiting this topic to highlight new tools, best practices, and techniques for working with images in WordPress. We’ll discuss:

What to do BEFORE you upload an image
Different image file types and how to decide which to use
Choosing the right aspect ratio
Optimizing your images for better performance
How to work with images on Pages, Posts, etc.
Managing your Media Library

Image File Types

Here is a detailed comparison table for the main image formats in WordPress 6.8.3, focusing on lossless/lossy compression, impact of compression on resolution, best use cases, core pros/cons, plugin needs, and relevant notes:

Format	Lossless	Lossy	Compression Impact	Best For & Use Case	Pros	Cons	Plugin Needed	Notes
JPEG/JPG	No	Yes	High compression creates blur and artifacts, can reduce detail and sharpness	Photos, blog images, social media	Small file size, universal support	No transparency, lossy, banding	No	Default compression adjustable (WP default: 82%)
PNG	Yes	No	No loss of detail at any compression level	Logos, graphics, images needing alpha	Lossless, supports transparency	Large files at high resolutions	No	Best for flat art, icons
GIF	Yes*	No	Indexed palette, color quantization may create dither/fade	Simple animation, small icons	Simple animation, universal support	256-color limited, poor for photos	No	Only lossless per palette, not suitable for detailed images
WebP	Yes	Yes	Lossy: minor quality loss at 80-90%; lossless: full pixel fidelity	Modern web images, graphics, animation	Smallest file size, alpha, animation	Needs modern browsers/servers	No	Natively supported, best all-rounder for performance
AVIF	Yes	Yes	Lossy: very high compression with less quality loss than JPEG/WebP; lossless: no loss	Hi-res web images, HDR, banners	Smallest files, HDR, wide color, alpha	Needs latest browsers/hosts	No	Native since 6.5+, requires PHP 8.1+ support
SVG	N/A	N/A	Infinite scaling, no pixel loss ever	Scalable icons, logos, vector art	Resolution independent, always crisp	Security concerns (upload)	Yes*	Plugin for upload (sanitization), no raster compression
HEIC/HEIF	No	Yes	Similar to JPEG, but higher compression at same quality	iPhone images, modern hi-res photos	Efficient, high quality	Limited browser support	No	Natively accepted, converted for display by some hosts

GIF is technically lossless per palette but restricted to 256 colors, so photographic images suffer from color loss and dithering.
SVG is purely vector and not subject to pixel-based compression or loss.
Plugin required for SVG upload due to security.

Compression notes: Lossy formats (JPEG, lossy WebP/AVIF, HEIC) have a direct tradeoff: more compression means smaller files but greater risk of visible blur, reduced detail, or color shifts. Adjusting the compression level lets you choose your preferred quality/size balance in WordPress or via plugins. Lossless formats preserve original resolution and color but produce larger files, especially at high detail.

🖼️ All About Images in WordPress – 2025 Update

1️⃣ Before You Upload an Image

A. Image Planning & Composition

Decide where the image will appear – hero, thumbnail, gallery, background.
Think orientation and composition (wide vs tall).
Common aspect ratios (16 : 9, 4 : 3, 1 : 1, 9 : 16).
Use the Focal Point tool to keep the subject visible in responsive crops.

B. Sizing and Resolution

“Size on screen ≠ file size.”
Typical targets: hero 1600-2000 px, blog 1200 px, thumb 400-800 px.
Avoid multi-MB phone originals.

C. File Names & Metadata

Descriptive, SEO-friendly names (mystic-seaport-sunset-ct.jpg).
Lowercase, no spaces.
Remove EXIF/GPS data for privacy.

D. Editing & Compression Before Upload

Online compressors: ShortPixel Online · Squoosh
Online editors: Photopea, Pixlr, BeFunky, Fotor, Ribbet.
Batch resize / rename / crop before upload.

2️⃣ Choosing the Right File Type

Format	Typical Use	Notes
JPEG/JPG	Photos	Small files, lossy
PNG	Logos, graphics, transparency	Lossless
GIF	Simple animations	Limited colors
SVG	Vector graphics	Needs plugin for safe upload
WebP	Modern alt to JPEG/PNG	Native support
AVIF	Newest format	Server support required; possible color shift
HEIC/HEIF	iPhone images	Convert before upload

WP 6.8.3 supports: .png · .jpg · .jpeg · .gif · .webp · .heic · .heif · .svg (via plugin)

(Demo idea: grid showing same image in each format and file size.)

3️⃣ Optimizing Images for Performance

A. Compression & Lazy Loading

Lossy vs lossless compression comparison.
Native loading="lazy" in WP core — disable for above-the-fold hero.

B. Optimization Plugins (Show and Compare)

C. CDN and External Delivery

CDN advantages: speed, auto-resizing.
Tools: Jetpack Site Accelerator, Cloudflare Images, Optimole CDN.
Caution with external URLs (permissions & ownership).

4️⃣ How Images Are Used in WordPress

A. Featured Images (Post Thumbnails)

How to set and display featured images.
Where they appear – archives, related posts, social shares (Open Graph).
Handling different aspect ratios per theme layout.

B. Images in Content

Image block: alignment, duotone filters, focal point, link to file or page.
Gallery block: grid or carousel layout, caption styles.
Lightboxes: Gallery Block Lightbox, Meow Lightbox.
Sliders / Slideshows: core Slideshow block (coming soon) or plugins (Slider Revolution, Kadence Slider, Spectra).

C. Background Images

Cover block: background image with overlay text and opacity.
Group block: set background image in block settings.
Tips for contrast and readability.

D. Galleries & Grids

Default Gallery block vs block-based plugins.
Masonry or Justified layouts.
Dynamic galleries by category or folder.

E. Reusable / Pattern Images

Images inside patterns and templates.
Site Editor backgrounds and global styles.

F. Special Uses

Logos & Site Icons (in Site Editor > Site Logo).
Favicon (“Site Icon” in Customizer or Site Editor Settings).
Social media preview thumbnails (SEO plugins like Yoast or Rank Math).

(Demo idea: create a post with featured image + gallery + cover block background.)

5️⃣ Managing Your Media Library

Upload methods: Media Library, drag-and-drop, Instant Images plugin (Unsplash, Openverse etc.).
Organizing files: folders via FileBird / Media Library Organizer.
Replacing and deleting (old testing images).
Regenerating thumbnails after theme change.
Bulk cleanup and checking unused media.
Transferring media during import/export.

6️⃣ Accessibility & SEO Essentials

A. Alt Text and Captions

Describe content and purpose; leave alt blank for decorative images.
Captions vs alt text – different audiences (screen reader vs visual).

B. Licensing & Copyrights

Safe sources: Openverse, WordPress Photos, Freepik, Freerangestock, Stockvault.
Creative Commons vs commercial licenses.
AI-generated image usage and attribution.

7️⃣ Maintenance & Troubleshooting

Missing images after migration (search-replace URLs).
External links and broken references.
Update social media thumbnails for reshared posts.
Media cleanup after redesign.

8️⃣ Advanced / Developer Corner (Quick Round)

srcset and sizes responsive attributes.
add_image_size() and custom thumbnail registrations.
theme.json controls for duotone and borders.
CSS object-fit, aspect-ratio, and blend modes.
Color palette extraction from images (for design systems).
Security for SVG uploads and user-submitted images.

9️⃣ Parking Lot / Optional Deep Dives

AI-generated image creation and captioning (MightyShare.io).
External storage (S3, Spaces).
Watermarking or batch replacement tools.
Advanced color palette workflows.
Integration with patterns and style libraries.

🔚 Wrap-Up & Resource Handout

Checklist Recap
✅ Prepare before upload ✅ Use right file type ✅ Optimize performance
✅ Add alt text ✅ Manage Media Library ✅ Mind licensing

Resource Links

Compression tools: ShortPixel · Squoosh
Editors: Photopea · Pixlr
Plugins: Meow Lightbox · Instant Images · Optimole · ShortPixel
Stock sources: Openverse · WP Photos · Freepik · Freerangestock · Stockvault
Video references: Brett in Tech – Top 10 Free Stock Photo Sites (2025)