Image optimization handbook surrounded by formats, responsive images, compression, performance, delivery, and product photography

Image optimization guides

109 guides to smaller files, sharper images and faster pages.

Start with the direct answer in each guide, then use its examples and exceptions to choose a method. Format capabilities, design suggestions, platform requirements, and measured results answer different questions; check the source and intended use before applying a number.

Start here

Image workflows 7 min read

Keep AI-image labels when optimizing product photos for Google Shopping

A tested sharp example shows how resizing strips AI-image metadata. Keep the source label and check the file your product feed serves.

Image workflows 7 min read

Crop one product photo for a card, a hero and a zoom view

Use one shirt photo to compare a square card, a wide hero, a mobile crop and a zoom source. Includes exact crop coordinates, CSS and responsive picture markup.

Loading and performance 7 min read

Sharp 0.35 changed AVIF encoding: retest your quality settings

We compared Sharp 0.34.5 and 0.35.3 on four identical fixtures. See file sizes, encoding times, downloadable detail crops and a script to reproduce the results.

Image formats

(27 guides)

Compression settings, transparency and format support

What happens when you save the same JPEG ten times?

A controlled test of fresh exports, repeated saves and a one-pixel edit between saves, with every generation, crop and measurement published.

Adobe DNG Converter: A Complete Guide to the Digital Negative Format

The free Adobe DNG Converter explained: how DNG works, lossless against lossy DNG, batch conversion, and when you should not convert at all.

EXIF Orientation: Why Your Photos Open Sideways and How to Fix It

EXIF orientation explained: all 8 values, why one app rotates a photo correctly and another does not, and how to fix it with exiftool or sharp.

How to Remove JPEG Artifacts and Fix Blurry Compressed Images

Reduce JPEG blocking, ringing and banding: why lost data never returns, which techniques actually work, and when to re-export from source.

Featured 13 min read

10 Ways to Convert Any Image to JPG on Any Device

Turn any image into a JPG on Windows, macOS, iPhone, Android, Linux, browser or command line - and find out what your file really is.

Featured 16 min read

8 Ways to Convert an Image to Vector (JPG and PNG to SVG)

Turn a JPG or PNG into a vector with Inkscape, Illustrator, potrace, VTracer or a manual redraw - and see when tracing is the wrong answer.

Featured 14 min read

9 Ways to Convert Images to WebP in Bulk

Convert PNG and JPG to WebP with cwebp, sharp, ImageMagick, libvips or a CDN: which quality matches your JPEG, and when lossless wins.

Featured 14 min read

8 Ways to Convert HEIC to JPG (iPhone, Mac, Windows and Batch)

Convert iPhone HEIC photos to JPG with Shortcuts, Finder, sips, ImageMagick, libheif or Windows - plus the setting that stops HEICs at source.

10 Image Export Settings You're Probably Getting Wrong

The export settings that ruin web images: quality at maximum, wrong colour space, chroma subsampling on graphics, the 300 DPI myth - and the fix.

Featured 19 min read

12 Image File Types Explained: When to Use Each

Twelve image formats compared - JPEG, PNG, GIF, WebP, AVIF, SVG, HEIC, JPEG XL, TIFF, RAW, BMP, ICO - on compression, transparency and support.

Featured 15 min read

9 Ways to Convert an Image to PDF (JPG, PNG and HEIC)

Turn photos into a PDF with macOS, Windows, iPhone, Android, img2pdf, ImageMagick or Acrobat - and stop the methods that re-encode your images.

Featured 10 min read

JPEG to JPG: There Is Nothing to Convert (and 7 Other Name Traps)

JPEG and JPG are one format; the short name is an MS-DOS leftover. Rename instead of converting, plus seven other extension traps.

Featured 16 min read

9 Ways to Convert a PDF to JPG or PNG (Without Losing Quality)

Turn PDF pages into images with pdftoppm, ImageMagick, Ghostscript, Preview or Acrobat - why DPI decides everything, and the common error.

Featured 12 min read

PNG to ICO: 9 Steps to a Favicon That Works Everywhere

Convert PNG to a multi-size ICO and ship the four favicon files that matter, plus the SVG dark-mode trick and the caching problem.

Featured 14 min read

PNG to JPG and Back: 9 Ways to Convert Without Wrecking the Image

Convert PNG to JPG or back on any platform: why transparency turns black, why JPG to PNG restores nothing, and which direction fits your image.

Featured 13 min read

9 Things to Get Right When Converting RAW to JPEG

CR2, NEF, ARW and DNG to JPEG: free tools, batch commands, the embedded preview trick, and the settings that exist only while the file is RAW.

Featured 14 min read

7 Ways to Turn a Video Into a GIF (and Why You Often Should Not)

Convert MP4 or MOV to GIF with ffmpeg palettes, gifski or a browser tool: the three levers that control size, and when an MP4 wins.

Featured 13 min read

8 Ways to Convert WebP to PNG or JPG (and Why Sites Serve WebP)

You saved a .webp file. Convert it with dwebp, ImageMagick, Preview or a browser tool - and see why PNG makes it bigger, not better.

Featured 20 min read

The Complete AVIF Guide: Next-Generation Image Format

AVIF in practice: encoder settings, quality tuning, browser support, HDR, and how it compares with WebP and JPEG on real photographs.

Featured 18 min read

The Complete WebP Guide: Everything You Need to Know

Master WebP image format with this comprehensive guide covering encoding, optimization, browser support, conversion strategies, and real-world implementation.

Featured 17 min read

Migrating from GIF to Modern Animated Formats

Complete guide to replacing GIFs with modern alternatives. Learn WebP animations, video formats, Lottie, and CSS animations for better performance and quality.

HDR Images on the Web: Complete Implementation Guide

Learn how to serve HDR images on the web. Covers HDR formats, display detection, tone mapping, and practical implementation for modern browsers and devices.

HEIC/HEIF: From iPhone to Web

Convert iPhone HEIC photos for web use. Learn about HEIF format, conversion tools, automation strategies, and why you shouldn't serve HEIC directly on the web.

JPEG Optimization Mastery: The Definitive Guide

JPEG optimization in depth: how the compression works, which quality setting to use, progressive encoding, chroma subsampling and MozJPEG.

JPEG XL: The Future Image Format (Adoption Guide)

JPEG XL explained: how its compression compares to WebP and AVIF, lossless JPEG transcoding, HDR support, and the current browser support after Chrome 155.

Featured 16 min read

PNG Optimization: Transparency Done Right

PNG optimization explained: PNG-8 against PNG-24 and PNG-32, transparency handling, compression tools, and when a modern format wins.

Featured 20 min read

SVG Best Practices for Web Performance

Master SVG optimization for the web. Learn accessibility, animation, icon systems, optimization tools, and performance techniques for scalable vector graphics.

Loading and performance

(38 guides)

Responsive images, caching and loading priorities

The image loads, but canvas export fails: fix image CORS

Debug a tainted canvas with a two-origin example: check crossorigin, response headers, redirects and cached images without a public proxy.

Why a small image upload can use so much memory

A 311 KiB PNG decoded to 61 MiB of pixels in our test. Measure the difference and add byte, pixel, format and animation limits to a Sharp upload pipeline.

Featured 7 min read

Sharp 0.35 changed AVIF encoding: retest your quality settings

We compared Sharp 0.34.5 and 0.35.3 on four identical fixtures. See file sizes, encoding times, downloadable detail crops and a script to reproduce the results.

Automatic Social Share Images: Build an OG Image Generator for Every Page

Generate an OG image for every page: static, build-time and on-demand approaches with @vercel/og, astro-og-canvas, Puppeteer and sharp.

Bootstrap Images: Every Class You Need, Plus What Bootstrap Won't Do for You

Bootstrap image classes explained: img-fluid, img-thumbnail, alignment, figures, cards and carousels, plus the responsive srcset it leaves to you.

CSS Background Images: image-set(), Responsive Loading, and CLS Fixes

CSS background images: why they hurt Core Web Vitals, how image-set() delivers AVIF and WebP, and when an img element is the better choice.

Hero Image Size: The Complete Guide to Hero Image Dimensions for Every Layout

Hero image size in practice: 1920x1080 or 2560x1440 at the source, aspect ratios per layout, text-overlay safe zones, and a weight budget.

Cache-Control for Images: The Complete Guide to Image Caching Headers

Image cache-control in practice: max-age, immutable, stale-while-revalidate and ETag, with copy-paste configs for nginx, Apache and Vercel.

Broken Image Fix: The Complete Guide to img onerror and Image Fallbacks

Fix broken images with the onerror handler, capture-phase listeners, placeholder swaps, React fallbacks and Service Worker recovery.

How to Change Image on Hover: CSS Image Hover Effects That Don't Hurt Performance

CSS image hover effects without layout shift: zoom, fade and overlay, with preload rules, touch fallbacks and accessibility parity.

The Complete Image Optimization Guide for the Web

Image optimization end to end: choose a format, size for the layout, compress at the right quality, deliver through a CDN, then check the result.

Image Placeholders: LQIP, Blurhash, and Thumbhash Explained

Image placeholders compared: solid colour, LQIP, Blurhash, Thumbhash, SQIP and CSS blurs, with decode cost and which suits your stack.

How to Lower Image Resolution: Pixels, File Size, and Quality Explained

Lower image resolution without wrecking quality: pick target dimensions for screen or print, then resize with built-in tools, ImageMagick or sharp.

How to Migrate Images to a CDN Without Losing SEO

An image CDN migration checklist: inventory every URL, choose a path strategy, set 301 redirects, warm the cache and watch Search Console.

Naming Images for SEO: Filename Rules, Examples, and Workflows

Image filenames for SEO: the hyphenated slug pattern, before and after examples, recipes per context, and how to rename without breaking URLs.

Hotlinking: What It Is, How to Detect It, and Whether Hotlink Protection Is Right for You

What hotlinking is, how to spot it in your logs, and whether to block it: nginx, Apache, signed URL and CDN examples, plus the watermark option.

Image Optimization for AI Search: A Practical GEO Guide

Make image pages understandable in AI search with clear answers, crawlable images, useful alt text, accurate product data, and verifiable sources.

Featured 18 min read

12 Image Optimization Mistakes That Slow Down Your Website

The 12 image mistakes that cost the most performance: oversized files, missing dimensions, lazy-loaded LCP images - how to spot and fix each.

Featured 17 min read

11 Image Optimization Myths That Refuse to Die

Eleven image optimization myths that refuse to die - 300 DPI, PNG quality, lazy loading everything, 3x retina - and what is actually true.

8 Image SEO Mistakes That Hurt Your Rankings

Eight image SEO mistakes that keep pages out of Google Images: weak filenames, poor alt text, unindexable lazy loading and missing sitemaps.

Featured 17 min read

9 Ways to Reduce Image File Size Without Losing Quality

Nine ways to shrink image files and keep them sharp: right-sizing, modern formats, quality tuning, metadata stripping and CDN negotiation.

Featured 14 min read

11 Responsive Image Mistakes That Ship Broken Layouts

srcset without sizes, lazy-loaded heroes, missing dimensions, art direction in the wrong element: the responsive image errors that waste bandwidth.

Image CDN for Image Hosting

Learn when to use an image CDN for hosting pictures, product media, responsive images, WebP/AVIF delivery, transformations, and global speed.

Image Resizing for the Web: The Complete Guide

Resize images for the web: pick dimensions from the layout, keep aspect ratios honest, and automate the work with a CDN or a build step.

Lighthouse Image Audit: Fix Every Image Warning

Fix every Lighthouse image warning: properly size images, serve modern formats, defer offscreen images and set explicit dimensions.

Automated Image QA and Testing: Catch Issues Before Production

Automate image QA: visual regression tests, performance budgets, and accessibility checks that catch broken images before production.

Batch Image Processing Workflows: Scale Your Optimization

Process thousands of images at once with command-line tools, scripts and cloud services, plus the checks that keep a batch job from corrupting files.

Browser DevTools for Image Debugging: Complete Guide

Diagnose image problems in DevTools: analyse loading order, inspect compression, and debug responsive images in Chrome, Firefox and Safari.

CI/CD Image Optimization Pipelines: Automate Your Workflow

Put image optimization in CI: GitHub Actions, GitLab CI and Jenkins configurations that compress and check every image on each deploy.

Color Spaces, Profiles, and the Web

Master color management for web images. Learn sRGB, Display P3, color profiles, wide gamut displays, and ensuring consistent color across devices.

Featured 22 min read

Image Optimization for Core Web Vitals

Fix LCP, CLS and INP problems caused by images: loading order, explicit dimensions, format choice, and the checks that prove it worked.

Image Metadata: EXIF, IPTC, and Privacy

Understand image metadata, its privacy implications, and optimization impact. Learn to read, strip, and manage EXIF, IPTC, and XMP metadata for web images.

Featured 15 min read

Image Preloading and Priority Hints

Master image preloading and fetchpriority for optimal performance. Learn when to preload, priority hints, responsive preloading, and avoiding common mistakes.

Image SEO: File Names, Structured Data, and Search Rankings

Image SEO that works: filenames, alt text, structured data, image sitemaps, and the crawling rules that decide whether Google indexes a photo.

Featured 18 min read

Lazy Loading Implementation Strategies

Image lazy loading done right: the native loading attribute, Intersection Observer, placeholders, and the images you must never defer.

Featured 25 min read

The Complete Responsive Images Guide

Responsive images with srcset, sizes and picture: resolution switching, art direction, and the patterns that stop the browser guessing wrong.

Retina/HiDPI Images: Complete Implementation Guide

Master retina and HiDPI image delivery. Learn device pixel ratios, srcset, responsive images, and optimization strategies for sharp images on all displays.

Featured 20 min read

Understanding Image Compression: Lossy vs Lossless Deep Dive

How image compression works: lossy against lossless, what the quality slider really changes, and how to judge the result with your own eyes.

Platform guides

(9 guides)

Image settings for your CMS or framework

Webflow Image Optimization: The Complete Guide

How Webflow handles image uploads, which settings matter, when to optimize before upload, and the mistakes that slow a Webflow site down.

Best WordPress Image Optimizer Plugins

Compare WordPress image optimizer plugins for compression, WebP, AVIF, lazy loading, CDN delivery, WooCommerce, and Core Web Vitals.

Angular Image Optimization with NgOptimizedImage

Angular's NgOptimizedImage directive: priority loading, automatic srcset, lazy loading, CDN loaders, and the patterns that fix LCP.

React Image Optimization: Complete Guide

Images in React: lazy loading, responsive srcset, WebP and AVIF delivery, CDN integration, and a reusable component for Vite or CRA projects.

Wix Image Optimization: Complete Guide

Image optimization on Wix: what Wix does automatically, how to prepare uploads, gallery settings, SEO fields, and the limits you cannot change.

Featured 22 min read

Next.js Image Component Mastery

The Next.js Image component in depth: configuration, sizing strategies, responsive patterns, remote loaders, and the props that fix LCP.

Featured 28 min read

Shopify Image Optimization Bible

Complete guide to image optimization in Shopify. Master Liquid image filters, theme development, product images, and performance optimization for faster stores.

Squarespace Image Optimization Guide

Optimize images on Squarespace for speed and quality. Learn upload best practices, focal points, galleries, banners, and performance tips for the platform.

Featured 26 min read

WordPress Image Performance Complete Guide

WordPress image performance: core features, WebP and AVIF support, responsive images, plugin choices and WooCommerce-specific fixes.

Comparisons

(10 guides)

Compare formats, tools and delivery services

JPG vs PNG: Which Format Should You Use (and When Both Lose)

JPG against PNG on compression, transparency, colour depth, size and support, with real numbers for photos and screenshots.

PNG vs WebP: Which Format Should You Use in 2026?

PNG against WebP: lossless to lossless, lossy WebP to lossless PNG, transparency, animation, support and tooling - and when PNG still wins.

Featured 17 min read

9 Ways to Extract Text From an Image (OCR Methods Compared)

Get text out of a photo with your phone, Google Drive, Windows, macOS, Tesseract or a cloud OCR API - plus how to raise accuracy on bad scans.

12 Free Image Tools Every Web Developer Should Bookmark

Twelve genuinely free image tools - Squoosh, sharp, ImageMagick, FFmpeg, SVGO, oxipng, MozJPEG, ExifTool - with the command for each job.

Featured 15 min read

12 Image Converters Compared: Browser, Desktop, CLI and API

Twelve image converters compared on batch size, formats, speed, privacy and cost: browser tools, XnConvert, ImageMagick, libvips and sharp.

8 Signs Your Website Needs an Image CDN

Eight signs an image CDN is worth it - variant explosion, uncontrolled uploads, latency, format lag - plus when a build step still wins.

Image Compression Tools Compared: TinyPNG vs Squoosh vs ShortPixel & More

TinyPNG, Squoosh, ShortPixel, ImageOptim, sharp and CDN compression compared on output size, quality and speed, with measured results.

Build Tool Image Plugins Compared

Compare image optimization plugins for Webpack, Vite, Rollup, and other build tools. Configuration examples, performance tips, and recommendations.

Featured 24 min read

Image CDN Comparison: Cloudinary, Imgix, Sirv and More

Compare leading image CDN services. Features, pricing, performance, and use cases for Cloudinary, Imgix, Sirv, Bunny, Cloudflare, and more.

Featured 20 min read

WebP vs AVIF vs JPEG XL: Which Format When?

Comprehensive comparison of modern image formats. Learn the strengths, weaknesses, browser support, and ideal use cases for WebP, AVIF, and JPEG XL.

Image workflows

(22 guides)

Product photography, galleries and batch processing

Featured 7 min read

Keep AI-image labels when optimizing product photos for Google Shopping

A tested sharp example shows how resizing strips AI-image metadata. Keep the source label and check the file your product feed serves.

Featured 7 min read

Crop one product photo for a card, a hero and a zoom view

Use one shirt photo to compare a square card, a wide hero, a mobile crop and a zoom source. Includes exact crop coordinates, CSS and responsive picture markup.

AI Alt Text: How Alt Text Generators Work and When to Use Them

An AI alt text generator writes image descriptions in seconds. Learn how auto alt text works, where it fails, and how to combine generation with human editing.

Free Stock Photos: Licenses, Sources, and How to Optimize What You Download

Where to find free stock photos you can legally use, what each licence allows, and how to resize and compress every download before it ships.

How to Create a Photo Gallery Website That Loads Fast

Build a photo gallery that stays fast past 50 images: layout choice, thumbnail budgets, lazy loading, lightbox behaviour and CLS-free masonry.

How to Watermark Photos: Every Method Compared

Watermark photos with text, logos or tiled patterns using ImageMagick, sharp, Pillow, Photoshop actions, or a CDN that stamps on the fly.

9 Image Accessibility Mistakes That Exclude Real Users

Nine image accessibility mistakes beyond alt text: text baked into images, colour-only meaning, unlabelled icon buttons, and the fix for each.

Featured 12 min read

7 Ways to Turn an Image Into an Editable Word or Excel File

Get text and tables out of an image into Word, Excel or Google Docs, including Excel's Data From Picture and Tesseract TSV output.

Featured 17 min read

10 Product Photo Mistakes That Hurt E-commerce Conversions

Ten product photo mistakes that cost sales: inconsistent framing, cluttered backgrounds, one angle, no scale reference - with the fix for each.

Featured 15 min read

7 Ways to Upscale an Image Without Making It Look Fake

Upscale an image honestly: find the real original, try Lanczos with sharpening, Real-ESRGAN or waifu2x - and know when upscaling cannot help.

360 Product Viewer: Images, Spins and Zoom

Build a fast 360 product viewer with the right image count, sizing, compression, lazy loading, zoom, and Sirv Media Viewer setup.

Image Background Removal: Tools, Techniques & Automation

Complete guide to removing image backgrounds for web, e-commerce, and marketing. Compare AI tools, APIs, CSS techniques, and batch processing workflows.

Visual Search Optimization: Google Lens, Pinterest & Beyond

Optimize for visual search: how Google Lens and Pinterest Lens find images, and the markup, cropping and quality choices that help them.

Accessible Images for Screen Readers: A Developer's Guide

How screen readers announce images: alt text, ARIA labels, role attributes, and the testing steps that catch what automated checks miss.

Featured 14 min read

AI Image Generation: Optimizing for Web Use

Optimize AI-generated images for the web: post-processing, format choice, and what Gemini 3 Pro and GPT Image 1.5 output needs before you ship it.

Maps and Data Visualization Images: Optimization Guide

Optimize charts, maps and infographics: when to use SVG over raster, responsive strategies, and how to describe a chart for screen readers.

Featured 25 min read

E-commerce Product Image Optimization

Product image optimization for online stores: gallery and zoom implementation, colour accuracy, and the sizes that keep a product page fast.

Email Image Optimization: The Complete Guide

Images in email: which formats clients support, size limits, retina handling, and the fallbacks that keep a campaign readable everywhere.

Image Alt Text: The Complete Writing Guide

How to write alt text that helps screen reader users and search engines, with worked examples, decision rules, and the mistakes to avoid.

Photography Portfolio Optimization Guide

Optimize a photography portfolio: colour accuracy, gallery performance, high-resolution delivery, watermarking, and SEO for photographers.

Screenshots and Documentation Images: Optimization Guide

Crisp screenshots for documentation: format choice, capture and annotation practice, and automation that keeps the images current.

Featured 24 min read

User-Generated Content Image Optimization at Scale

Handle user-uploaded images at scale. Learn processing pipelines, moderation, storage strategies, optimization techniques, and best practices for UGC.