Image compression and optimization guides
139 articles on making images small, sharp and fast: reducing file size on any device or app, compressing to a set size, platform how-tos (Shopify, WordPress, Webflow, Next.js), Core Web Vitals and image SEO. Written as direct answers, not theory.
Compression
Prepare images for the web
Prepare web images in 10 steps: pick the format, resize to 2× the display width, compress at quality 75–85, strip metadata, then add alt text and lazy loading.
Compress to an exact size
To hit an exact KB target, set the pixel dimensions first, then lower JPEG quality. Size tables for 20, 50, 100, 200, 500 KB and 1 MB, plus a free tool.
Convert a photo MB to KB
1 MB is 1,024 KB (or 1,000). To turn a 3 MB photo into 500 KB or less, resize it to about 2,000 px, then save it as JPEG at quality 70–80. Examples inside.
Shrink file, keep dimensions
Keep the same width and height and still cut file size 30–80%: re-encode at quality 75–85, switch to JPEG or WebP, strip metadata, use a PNG palette.
Photo & signature for forms
Most exam and job portals want a JPEG photo of 20–50 KB and a signature of 10–20 KB. How to scan, crop and compress both to the exact range, free.
Reduce photo size for email
Gmail and Outlook.com allow 25 MB of attachments per email, iCloud 20 MB. Resize photos to 1,600–2,048 px JPEG (200–500 KB each) and send dozens at once.
Fix “image too large” errors
First check whether the limit is in MB (file size) or pixels (dimensions). Compress for MB limits, resize for pixel limits, save HEIC as JPG. Free fix.
Upload limits by platform
Max image file size and recommended dimensions for Gmail, WhatsApp, Discord, Slack, Instagram, X, LinkedIn, YouTube, Shopify, eBay, Amazon and more.
Image limits for AI chatbots
ChatGPT takes images up to 20 MB, Claude 10 MB, Gemini 100 MB per file. Resize to 1,500–2,000 px JPEG or WebP to upload faster and use fewer tokens.
Compress images for Discord
Discord's free upload limit is 20 MB per file (50 MB on Nitro Basic, 1 GB on Nitro). Save PNG screenshots as WebP or JPEG to cut them 60–90% and post fast.
Reduce photo size on iPhone
Shrink a 2–5 MB iPhone photo to 100–500 KB for free: Mail's size picker, a Shortcuts resize, camera format settings, or a compressor in Safari.
Reduce photo size on Android
Resize in Samsung Gallery, lower the camera resolution, understand Google Photos Storage saver, or compress to an exact KB size in Chrome. Free, no app.
Reduce image size on Mac
Shrink images on a Mac with built-in tools: Preview's Adjust Size and JPEG Quality slider, Finder's Convert Image, Photos export options, or sips in Terminal.
Reduce image size on Windows
Shrink images on Windows 11 for free: Photos' Resize image with a quality slider, Paint (Ctrl+W), PowerToys Image Resizer for batches, or a browser tool.
Reduce image size in Photoshop
Resample with Image Size, then export with Save for Web (Legacy) at quality 60–70 or Save a Copy as JPEG at level 7–8. Settings table for web, email and print.
Compress pictures in Word
Open Picture Format > Compress Pictures, untick Apply only to this picture, tick Delete cropped areas and pick 150 or 220 ppi. Steps for Windows and Mac.
Compress pictures in PowerPoint
Shrink a PowerPoint file: Compress Pictures for all images at 150 or 220 ppi, delete cropped areas, then File > Info > Compress Media for the videos.
Reduce PDF size (images)
Images are usually what makes a PDF big. Compress them before building the PDF, export with Minimum size, or use Acrobat's Compress a PDF or Preview's filter.
Check image size and dimensions
See an image's file size (KB or MB) and pixel dimensions on Windows, Mac, iPhone, Android or in a browser, plus a quick table of what size is too big.
What is image compression
Image compression shrinks files by storing pixels more efficiently (lossless) or dropping detail you barely see (lossy). How JPEG, PNG, WebP and AVIF do it.
Lossy vs lossless
Lossy compression drops detail for files 5–10× smaller; lossless keeps every pixel. Use lossy for photos you publish, lossless for masters, text and pixel art.
JPEG quality settings
JPEG quality scales quantization tables; it is not a percentage. Use 70–85 for the web, and note that 80 in Photoshop, GIMP and Lightroom are not the same.
Why PNG files are so large
PNG is lossless, so photos, 16-bit color, Retina screenshots and soft transparency make it huge. A 256-color palette or JPG/WebP for photos cuts 60–90%.
Image DPI for the web
DPI does not matter on the web: it is a metadata tag that changes neither file size nor on-screen size. Size web images in pixels; use 300 DPI for print.
Remove EXIF data from photos
Remove EXIF data (GPS, camera, date) before sharing: iPhone Options > Location, Windows Remove Properties, Mac Preview, or a browser tool that strips it all.
Does compression hurt quality?
Lossy compression removes data, but at quality 75–85 the change is invisible at normal size. What artifacts look like, which images show them, and how to check.
Smallest image format
AVIF makes the smallest photos, then WebP, then JPEG. Flat graphics: lossless WebP or PNG-8. Logos: SVG. Animations: WebP or AVIF instead of GIF.
Compress images for WordPress
Resize photos to 1200–2560 px and compress them to 100–300 KB before uploading. WordPress scales images over 2560 px and saves its own sizes at JPEG quality 82.
Compress images for Shopify
Upload Shopify product photos at 2048 × 2048 px and under about 500 KB. Shopify accepts up to 20 MB and 5000 × 5000 px, and its CDN serves WebP or AVIF.
Bulk compress images
Compress a whole folder at once: drop up to 100 images in a browser tool, or use mogrify, jpegoptim or pngquant, sips on Mac, or PowerToys on Windows.
Compress screenshots
Screenshots are big because they are PNG at 2× Retina resolution. A 256-color PNG or WebP lossless cuts 60–70% and keeps text sharp; JPEG blurs text edges.
Images for email newsletters
Export newsletter images at 1200–1400 px for a 600–700 px layout, save photos as JPEG under about 200 KB each, and keep one email's images under about 1 MB.
Tutorial
Best WebP quality setting
What quality should you use when converting to WebP? We tested photos, screenshots and graphics at every level. Get concrete recommendations per image type.
WebP for WordPress
Step-by-step guide to converting and uploading WebP images to WordPress, fixing upload errors, handling fallbacks and speeding up your site without extra plugins.
Bulk convert to WebP
The fastest way to batch convert hundreds of PNG and JPG images to WebP: drag, drop, set quality once, download a ZIP. Private, browser-based, no command line.
Resize images for web
Exact recommended pixel widths for hero images, blog photos, thumbnails, Open Graph and social media, plus how to resize and convert to WebP in one step.
WebP in Next.js
next/image can serve WebP, but huge files in /public still hurt. How to pre-convert static assets and CMS images for Next.js App Router.
WebP in Nuxt
Nuxt Image can output WebP. Pre-convert public/ and CMS images so IPX does less work and LCP stays green.
WebP in Astro
Astro can transform images at build time. Pre-convert large photos to WebP so builds stay fast and pages stay light.
WebP in Hugo
Hugo's resources.Process can resize. Convert page bundle images to WebP first so Hugo builds stay quick.
WebP in Gatsby
gatsby-plugin-image generates WebP. Pre-convert source images so GraphQL image processing does not dominate the build.
WebP in Remix
Remix does not magically convert images. Pre-convert public assets to WebP and use srcset or a loader you control.
WebP in SvelteKit
SvelteKit + Vite can transform imports. Pre-convert large photos so Vite plugins and adapters stay fast.
WebP in Eleventy
@11ty/eleventy-img generates WebP/AVIF. Pre-size sources so Eleventy builds on cheap CI stay under the time limit.
WebP in Laravel
Convert marketing assets to WebP locally, and convert user uploads with Intervention or the Fast WebP API.
WebP in Django
Django ImageField stores what you upload. Convert static assets to WebP and normalise uploads with Pillow or an API.
WebP in Rails
Active Storage can produce WebP variants. Pre-convert marketing assets and set variant formats so production stays light.
picture element + WebP
Use <picture> to serve WebP with a JPEG fallback. When you still need it in 2026, and how to generate both files in one workflow.
WebP on Mac
On macOS, convert folders to WebP in Safari or Chrome in the browser. No Automator, no Homebrew required.
WebP on Windows
Use Edge or Chrome to bulk convert to WebP on Windows. No Microsoft Store app, no Paint.NET plugin.
Platforms
WebP for Shopify
Shopify now serves WebP automatically, but oversized originals still hurt LCP. How to convert product photos to WebP before upload, recommended sizes, and a private bulk workflow.
WebP for Webflow
Webflow accepts WebP uploads and responsive images, but designers often drop 4× PNG exports. How to bulk convert Webflow assets to WebP without leaving the browser.
WebP for Squarespace
Squarespace sites often fail PageSpeed because of full-resolution gallery uploads. Convert gallery and blog images to WebP, then replace them without a plugin.
WebP for Wix
Wix Media Manager accepts WebP. Learn the widths Wix actually serves, how to bulk convert, and why 'Wix automatic optimisation' is not enough for LCP.
WebP for WooCommerce
WordPress serves WebP natively. WooCommerce product galleries still suffer from huge originals. Bulk convert catalogue images and skip bloated optimisation plugins.
WebP for Ghost
Ghost serves images through its CDN-friendly image pipeline. Convert feature and inline images to WebP before upload to cut article weight.
WebP for Drupal
Drupal's Image API can derive WebP styles, but source files are still your job. Bulk convert media to WebP and keep image styles simple.
WebP for Magento
Magento product images are a classic LCP problem. Convert catalogue files to WebP, align with image resize settings, and avoid stacking three optimisation extensions.
WebP for BigCommerce
BigCommerce image manager accepts modern formats. Pre-convert product and category images to WebP so stencil themes stay fast.
WebP for Framer
Framer sites look designed and often load like it: huge PNG frames. Convert assets to WebP at breakpoint width before you publish.
WebP for HubSpot
HubSpot file manager accepts WebP. Convert landing-page and blog images so ads and organic pages stop failing PageSpeed.
WebP for Elementor
Elementor pages fail PageSpeed when every widget gets a full-size PNG. Convert backgrounds and image widgets to WebP at the column width.
WebP for Divi
Divi layouts repeat full-width images. Convert module and background images to WebP to cut Divi's typical PageSpeed image debt.
WordPress WebP, no plugin
You do not need an image optimisation plugin to use WebP on WordPress. Upload correctly sized WebP files and let core srcset work.
WebP for Contentful
Contentful's Images API can format=webp, but huge masters still cost transform time and origin weight. Pre-convert assets to WebP.
WebP for Strapi
Strapi can upload WebP and generate responsive formats. Convert media to WebP locally so upload plugins stay simple.
WebP for Sanity
Sanity's CDN can auto-format, but oversized originals still slow Studio and first paints. Convert assets to WebP before they enter the dataset.
Webflow CMS WebP
Webflow Collection image fields multiply one bad upload across templates. Bulk convert CMS images to WebP and rebind the field.
Performance
Core Web Vitals & WebP
Learn how converting images to WebP improves Largest Contentful Paint, Cumulative Layout Shift and your PageSpeed Insights score, with a step-by-step optimisation checklist.
Reduce image size
Five techniques to shrink image files by 80–95% with no visible quality loss: modern formats, resizing, smart quality, metadata stripping and avoiding double compression.
Fix image LCP
If LCP is a photo or PNG, convert it to WebP at the rendered width, preload it, and stop lazy-loading the hero.
PageSpeed image audits
Clear 'next-gen formats', 'properly size images' and 'efficiently encode' by converting a batch to WebP at the right width.
Mobile page speed
On mobile, images are the heaviest bytes. Convert to WebP and cap width before you buy a new host or rewrite CSS.
Reduce CDN bandwidth
Images dominate egress. Convert the library to WebP and you cut CDN bills without changing hosts.
Recommended image sizes
Practical max widths for heroes, content, thumbnails and retina — then convert those files to WebP.
Retina and WebP
How to handle 2× and 3× displays with WebP without shipping 3× PNG screenshots.
Lazy load WebP
Native lazy loading is good for below-the-fold WebP and bad for the hero. How to combine both.
Next-gen formats audit
The Lighthouse next-gen formats audit wants WebP or AVIF. Convert the listed JPEGs and PNGs in your browser.
Good image file size
Target KB sizes for heroes, content photos and thumbnails, and how to hit them with WebP.
Why images are huge
The usual reasons images are huge — phone photos, PNG screenshots, 2× exports — and the WebP batch that fixes them.
Compress PNG
PNGs are huge because they are lossless. Convert UI to high-quality WebP and photos to WebP 80%.
Compress JPG
A second JPEG pass looks worse. Convert JPEG to WebP once at 80% from the best master you have.
Landing page WebP
Paid landing pages should convert the hero, logo row and proof shots to WebP before you touch the headline.
Google Ads landing pages
Slow landing pages waste spend. Convert Ads destination images to WebP so LCP and post-click experience improve.
Hosting and image weight
Media libraries eat disk. Convert the heaviest uploads to WebP and delete unused originals to reclaim gigabytes.
Formats
What is WebP?
Everything you need to know about the WebP image format: how it works, how much smaller it is than JPEG and PNG, browser support, pros and cons, and how to convert your images.
SEO
Image SEO best practices
12 actionable image SEO tips: file formats, names, alt text, dimensions, lazy loading, sitemaps and structured data. Get more traffic from Google Images and faster pages.
Optimise images for Google
Google cares about image weight (Web Vitals), file names, alt text and a real caption. Convert to WebP, then do the on-page SEO.
Alt text best practices
Alt text does not change because the file is WebP. How to write it, when to leave it empty, and how it works with conversion.
Do WebP images rank better?
WebP is not a ranking factor by name. Faster pages and healthier Core Web Vitals are. That is why WebP helps SEO.
Google Images + WebP
Google indexes WebP. Use crawlable img URLs, good alt, and do not hide images behind scripts.
Product schema + WebP
JSON-LD Product image URLs can be WebP for Google Search. Merchant Center and some ads feeds may still want JPEG.
OG tags and WebP
Use JPEG or PNG for og:image if you need reliable unfurls. Use WebP for on-page images.
WebP and Core Web Vitals
WebP mainly helps LCP. It can help CLS if you set dimensions, and does nothing for INP. How that ties to SEO.
Migrate a site to WebP
A practical migration: convert in batches, update HTML, redirect old .jpg URLs, keep OG JPEGs.
Duplicate images + WebP
Do not ship JPEG and WebP of the same photo on one page. One img URL, WebP. Keep JPEG only for OG or feeds.
Image sitemaps
If you maintain image sitemaps, list the WebP URLs you actually embed. Do not list leftover JPEGs.
WebP on AMP
amp-img supports WebP. Convert AMP article images the same way you convert the canonical page.
Workflow
vs Squoosh
Squoosh is excellent for one file and codec nerds. Fast WebP Converter is built for bulk folders, savings totals and a one-click ZIP.
vs TinyJPG
TinyPNG makes smaller JPEGs/PNGs and uploads your files. WebP is usually smaller still, and this converter never uploads.
vs Imagify
Imagify is a WordPress plugin that sends images to a SaaS API. Local WebP conversion avoids the plugin, the quota and the upload.
vs ShortPixel
ShortPixel is another upload-and-compress WP plugin. Use it for automation; use this converter for private bulk jobs and plugin-free sites.
vs CloudConvert
CloudConvert is a general file API that uploads your images. Use it for exotic formats; use a local converter for everyday PNG/JPEG → WebP.
vs ImageMagick
cwebp and ImageMagick are perfect in CI. Designers and marketers should convert folders in the browser.
Free, no upload
A free in-browser WebP converter: bulk convert, see the weight you save, download the first image. No account, no upload.
Best online WebP converter
Criteria: no upload, bulk, quality slider, resize, savings total, Safari support, no watermark. How this converter scores.
Convert without uploading
Use a browser encoder (canvas or WebAssembly). That is how this WebP converter works — files stay on the device.
Product photos to WebP
Studio JPEGs are too big for product pages. Bulk convert catalogue photos to WebP with widths that match your PDP and PLP.
Blog images to WebP
How to bulk convert article photos and UI screenshots to WebP with different quality for each type.
Portfolio photos to WebP
How photographers can convert portfolio JPEGs to WebP without flattening grain or killing blacks.
Real estate photos
Listing sites load 30+ photos. Convert them to WebP so mobile house-hunters are not waiting on 4 MB interiors.
Restaurant photos
Food photos are colorful and heavy. Convert menu and hero shots to WebP so reservation pages load on mobile data.
Screenshots to WebP
PNG screenshots shrink dramatically as WebP if you keep quality high enough for text. Recommended settings and max width.
Logos and icons
SVG is best for vector logos. Use WebP for raster logos, app icons and logo walls that started as PNG.
Hero images to WebP
The hero is usually LCP. Convert it to WebP at the real breakpoint width and preload the file you actually use.
WebP in email
Many email clients still prefer JPEG/PNG. When WebP works, when it fails, and how to convert campaign images anyway for the web versions.
Social images
Instagram and Facebook still want JPEG/PNG uploads. Convert the copies that live on your website to WebP.
HEIC to WebP
Safari can read HEIC. Convert iPhone photos to WebP locally — no upload — for websites, blogs and shops.
Figma to WebP
Figma PNG exports are lossless and huge. Convert them to WebP at 1× or 1.5× the layout width.
Photoshop to WebP
Photoshop can export WebP, but batching a folder is still painful. Convert flattened exports in the browser instead.
Canva to WebP
Canva PNG downloads are huge. Convert them to WebP before you upload to WordPress, Mailchimp landing pages or Webflow.
Lightroom to WebP
Lightroom still thinks in JPEG. Export a high-quality JPEG, then bulk convert to WebP for the website gallery.
Agency WebP workflow
A repeatable agency checklist: collect assets, split photos vs UI, convert to WebP, show the client the weight saved, then unlock the ZIP.
Client images, private
Client work, unpublished products and faces should not go to a random online compressor. Convert to WebP locally in the browser.
Ecommerce image sizes
Recommended pixel widths and WebP quality for PDP, PLP, zoom, swatches and banners — platform-agnostic.