Ideal Image Size for Websites: Pixels and KB for Every Image Type
The ideal image sizes for websites in pixels and KB: hero banners, blog images, product photos, thumbnails and logos, plus 2x images and a 6-step prep process.
The ideal image sizes for websites in pixels and KB: hero banners, blog images, product photos, thumbnails and logos, plus 2x images and a 6-step prep process.

A repeatable routine for preparing many product photos: set one standard, shoot and process in batches, crop square, compress to 100 to 200 KB and name files well.

How lazy loading and responsive images (srcset) work in WordPress, which images to lazy-load, how to check your hero image and fixes for common problems.

Convert iPhone HEIC photos to JPG: set your camera to Most Compatible, automatic transfer conversion, and how to convert existing photos on iPhone, Mac, Windows and Android.

When to convert PNG to JPG and when to keep PNG: file size, transparency, logos and screenshots, a step-by-step conversion and where WebP fits in.

AVIF vs WebP compared: file size, quality, transparency, browser and WordPress support, when to use each, how to serve both safely and a simple plan.

What SVG files are, vector vs raster explained, when SVG is the right choice, using SVG safely in WordPress and which logo files to ask your designer for.

Turn photos and scans into one PDF for free: scan with iPhone Notes or Google Drive, combine images on Windows and Mac, prepare pages and meet size limits.
Create a favicon that looks sharp everywhere: the sizes you need, design tips, how to add a Site Icon in WordPress and what Google needs for search results.

Why printed colours differ from your screen: RGB vs CMYK, what sRGB is, how to prepare images for print, pixel sizes at 300 DPI and common mistakes.