Size & Resolution
How many pixels an image needs, how to change its dimensions, and why resizing sometimes ruins it.
Dimensions are the setting people change most often and understand least. "Make it smaller" can mean crop, resize or compress; enlarging a small image invents pixels that were never captured; and the same photo needs wildly different pixel counts for a thumbnail, a print and a retina screen.
These articles cover the whole size question: converting between millimetres, inches and pixels, what DPI actually means, how much resolution each output really needs, the interpolation maths behind scaling, and why an image can look blurry after a resize that should have been harmless. They also cover serving the right size to each device, so a phone never downloads a desktop-sized file.
Articles in This Topic
13- DPI vs. PPI: Understanding Resolution Rules for Print and Web
- Mastering Responsive Images with HTML srcset
- High-Density Displays: Why Images Look Fuzzy on Retina Screens
- Nearest Neighbor vs. Bilinear Scales: Image Upscaling Algorithms
- Image Aspect Ratio Explained (16:9, 4:3, 1:1)
- Image File Size vs Dimensions
- Image Interpolation Explained
- CSS object-fit: cover vs contain
- CM / MM / Inches to Pixels: Formula and Tables
- Crop vs Resize vs Compress: Picking the Right One
- Why Your Resized Image Looks Blurry
- Stopping Images From Causing Layout Shift
- Picture Element and Art Direction