01
Image Formats Best Image Format for the Web
Compare JPEG, PNG, WebP and AVIF for photos, transparency, quality, browser support and file size—and choose the right format for each job.
Open guide →Research · practice · performance
The Journal
Practical field notes for making web images smaller, faster, easier to discover, and safer to publish.
RISF / INDEX
01—07
Compression · Resizing · Formats · WordPress
Performance · SEO · Privacy
Performance · SEO · Privacy
Featured essay
Journal / 001
Image Compression
Image Compression: The Complete Guide
Learn how image compression works, when to resize or change format, and how to make images smaller without unnecessary quality loss.
·8 min read
Read the guide ↗
Start with the fundamentals
Seven definitive guides.
Each pillar owns one subject area, then connects to a deeper series of focused articles.
02
WordPress Images How to Optimize Images for WordPress
Optimize WordPress images before and after upload with the right dimensions, formats, compression, responsive delivery and performance settings.
Open guide →03
Image Compression Image Compression: The Complete Guide
Learn how image compression works, when to resize or change format, and how to make images smaller without unnecessary quality loss.
Open guide →04
Website Performance Image Optimization for Website Speed
Improve image-heavy pages by combining compression, correct dimensions, responsive delivery, lazy loading and priority hints.
Open guide →05
Image Resizing & Dimensions Image Resizing: The Complete Guide to Dimensions, Resolution and Aspect Ratio
Understand image resizing, pixel dimensions, aspect ratio, CSS pixels, device density and responsive source sizes so web images are sharp without being wastefully large.
Open guide →06
Image SEO Image SEO: The Complete Guide
Make images easier for search engines and users to understand with crawlable HTML, useful alt text, relevant context, descriptive filenames and fast delivery.
Open guide →07
Privacy & EXIF Photo Metadata & Privacy: What Images Can Reveal
Understand EXIF and other photo metadata, when location or device details may be present, and how browser-side re-encoding changes what is retained.
Open guide →Explore the library
Browse by subject.
Not a chronological blog. Each subject is a connected learning path with a clear parent guide.
018 articles
Image Compression
- How to Compress Images Without Losing Visible Quality
- Lossy vs Lossless Image Compression
- What Image Compression Quality Should You Use?
028 articles
Image Formats
Explore Image Formats →038 articles
Image Resizing & Dimensions
Image resizing, dimensions, aspect ratio, resolution, hero sizes, pixel density, and practical web image sizing.
- Does DPI Matter for Web Images? The 72 DPI Myth Explained
- Pixels vs Resolution vs File Size: What Actually Matters on the Web?
- Best Hero Image Size for Desktop and Mobile
048 articles
Image SEO
Explore Image SEO →058 articles
Privacy & EXIF
- Does Compressing an Image Remove EXIF Data?
- What Metadata Can Be Stored Inside a Photo?
- Do Online Image Compressors Upload Your Photos?
068 articles
Website Performance
- Image Optimization for Website Speed
- How Images Affect Core Web Vitals
- How to Optimize the Largest Contentful Paint Image
078 articles
WordPress Images
- How to Optimize Images for WordPress
- How to Compress Images Before Uploading to WordPress
- How to Use WebP Images in WordPress
Latest research
Recently published.
Focused answers, technical explainers, and practical workflows for people who publish images on the web.
Does DPI Matter for Web Images? The 72 DPI Myth Explained
For normal web images, pixel dimensions and rendered CSS size matter more than a 72, 96 or 300 DPI metadata setting. Here’s what DPI/PPI actually changes.
·6 min read
Pixels vs Resolution vs File Size: What Actually Matters on the Web?
Pixels, CSS size, screen density, PPI and KB describe different things. Learn which measurements matter for web image sharpness, layout and performance.
·6 min read
Best Hero Image Size for Desktop and Mobile
Choose hero image dimensions from the real viewport and crop, then use responsive candidates and mobile art direction instead of one oversized image for every device.
·6 min read
Best Image Size for a Website: Hero, Banner, Blog and Content Images
Choose website image dimensions from the actual layout instead of a single magic size. Practical starting points for hero, banner, blog, content, cards and thumbnails.
·7 min read
Aspect Ratio Explained: How to Resize Images Without Stretching Them
Understand image aspect ratio, common ratios, proportional resizing, cover vs contain and how to calculate dimensions without stretching images.
·6 min read
Crop vs Resize: What’s the Difference?
Cropping changes composition; resizing changes pixel dimensions. Learn when to crop, resize, contain or cover an image without stretching it.
·6 min read
How to Resize an Image Without Losing Visible Quality
Resize images with fewer visible artifacts by starting from the best source, preserving aspect ratio, avoiding unnecessary upscaling and re-encoding only once.
·7 min read
Image Resizing & Dimensions Pillar
Image Resizing: The Complete Guide to Dimensions, Resolution and Aspect Ratio
Understand image resizing, pixel dimensions, aspect ratio, CSS pixels, device density and responsive source sizes so web images are sharp without being wastefully large.
·9 min read
Image Formats Pillar
Best Image Format for the Web
Compare JPEG, PNG, WebP and AVIF for photos, transparency, quality, browser support and file size—and choose the right format for each job.
·9 min read
Does Image Compression Reduce Resolution?
Compression and resolution are different. Learn when pixel dimensions stay unchanged, when resizing changes them, and what affects visible sharpness.
·6 min read