PRACTICAL GUIDES
Image preparation guides
Practical guidance for image formats, compression, cropping and responsive delivery.
01How to choose JPG, PNG, WebP or AVIFA practical format guide for photographs, transparent graphics, interface assets and website compatibility.6 min read02Compress website images without obvious quality lossA repeatable way to balance image dimensions, encoding quality and page weight.7 min read03Compress an image to 100 KB, 200 KB or another target sizeMeet a fixed image upload limit while preserving as much detail as possible with local browser processing.5 min read04Choose the right crop and aspect ratioPlan crops for square cards, editorial images, video covers and social previews without losing important content.5 min read05Build responsive images with srcset and sizesServe an appropriate image width to phones, tablets and large screens instead of one oversized file.7 min read06Favicon sizes and files for modern websitesUnderstand favicon.ico, SVG favicons, Apple touch icons and PWA icons before adding them to a website.6 min read07Optimize SVG files safely for the webReduce SVG markup while preserving viewBox behavior, accessibility and intentional animation.6 min read08Create an Open Graph image that survives social croppingDesign a clear 1200 × 630 social preview with readable type, safe spacing and useful fallbacks.6 min read