Image Optimization Guides
Practical explanations of image formats, compression, SEO, and web performance — so you can make informed decisions when processing images.
These guides cover the fundamentals that most image-processing decisions hinge on. Whether you are choosing between WebP and AVIF, deciding what quality setting to use for a JPEG, or trying to improve your site's Largest Contentful Paint score, the answers depend on understanding the underlying concepts. These guides walk through them clearly and practically.
All guides
Compression is how you trade image quality for smaller file sizes — but how that trade-off works differs significantly between lossy formats (JPEG, WebP, AVIF) and lossless formats (PNG). This guide explains what actually happens during compression and how to pick quality settings that work for your specific use case.
Read guide →
Each image format has a different set of strengths — different compression behavior, transparency support, animation support, and browser compatibility. This guide compares all the major formats so you can choose the right one without guessing.
Read guide →
Images are the leading cause of slow page loads and poor LCP scores. This guide covers the specific steps — format choice, dimensions, lazy loading, preloading, srcset, and more — that make the biggest practical difference for your Core Web Vitals.
Read guide →
Search engines can index images and surface them in Google Image Search, but only if they can understand what the image is and its context on the page. This guide covers file naming, alt text, structured data, and the other technical factors that affect image SEO.
Read guide →
Converting a PDF page to an image requires choosing the right format and DPI for your use case. This guide covers every scenario — screen, email, print, archival — with a recommended settings table and step-by-step instructions.
Read guide →
Large image files slow down pages, fail email uploads, and hit form size limits. This guide walks through each technique — resizing to display dimensions, switching to WebP, adjusting quality, and hitting specific file size targets — in order of impact.
Read guide →
Alt text is the foundation of image accessibility — but there is more to it than adding a description. This guide covers all four image types, how to write alt text that is genuinely useful, WCAG 2.1 requirements, color contrast for images, and how to test accessibility before you publish.
Read guide →
Quick answers
Short answers to common questions — follow the links for full explanations.
Should I use WebP or AVIF for web images?
▼
For most web use, WebP is the safer choice — it has near-universal browser support and saves 25–35% compared to JPEG at similar quality. AVIF offers better compression (40–50% smaller than JPEG) but encoding is slower and support, while now broad, is not as complete as WebP. If your audience is primarily on modern browsers and file size is a priority, AVIF is worth considering. If compatibility matters more, stick with WebP. Full format comparison →
What JPEG quality setting should I use for web images?
▼
For most web images, a quality setting between 75 and 85 gives a good balance of file size and visual quality. Quality 80 is a common starting point. At quality 90+, files are noticeably larger with diminishing visual returns. At quality 70 or below, compression artifacts start to become visible, especially in smooth gradients and skin tones. Full compression guide →
Why are my images slowing down my website?
▼
The most common causes are: images served at much larger dimensions than they are displayed (a 4000px image used in a 800px slot), uncompressed or lightly compressed files, and the LCP image not being loaded with priority. Start by checking the actual display dimensions vs. the image dimensions in browser dev tools, then run the images through a compressor and convert to WebP. Full performance guide →
When should I use PNG instead of JPEG?
▼
Use PNG when the image needs a transparent background, or when it contains sharp edges, text, or flat colors (like logos, icons, or screenshots). JPEG compression creates visible artifacts on these types of images. For photographs and complex natural scenes without transparency, JPEG or WebP produces much smaller files at similar quality. Full format guide →
Does compressing images hurt SEO?
▼
Reasonable compression does not hurt SEO and generally helps it. Smaller images load faster, which improves Core Web Vitals scores — LCP in particular — which are a ranking factor. The risk is over-compression: if quality drops so low that images become visibly degraded, that is a user experience problem. The target for most web images is 75–85 quality for JPEG, which produces good visual results at a fraction of the original file size. Image SEO guide →
Tools referenced in these guides