Image dimensions directly affect website loading speed, Core Web Vitals scores, and user experience. Images that are too large slow down the page; images that are too small look blurry. In this guide, we'll cover how to properly resize images for the web, what dimensions to use, and what to watch out for.
Why Image Size Matters
Images are among the "heaviest" resources on a web page. According to HTTP Archive data, images account for roughly 50% of the total page weight on average. This directly affects several aspects:
- Loading speed. Every extra megabyte means additional seconds of waiting, especially on mobile networks.
- Core Web Vitals. The LCP (Largest Contentful Paint) metric is often tied to the main image on the page. An oversized image can tank this metric.
- Mobile data usage. Serving a 4000×3000 pixel image to a smartphone screen that's 375 pixels wide wastes the user's data and device resources.
- SEO. Google factors loading speed into rankings. Optimized images give you an edge in search results.
Preserving Aspect Ratio
When resizing, it's critical to maintain the aspect ratio. If the original image has 16:9 proportions and you set the size to 500×500, the image will be stretched or squished and will look distorted.
The correct approach is to set only one dimension (width or height) and calculate the other automatically. For example, when reducing a 1920×1080 image to a width of 800, the height will be proportionally calculated as 450 pixels. Our image resizer tool does this automatically — just specify one dimension.
Common Sizes for the Web
There are well-established standard image sizes for various purposes:
- og:image (Open Graph). 1200×630 pixels — the recommended size for social media sharing previews (Facebook, LinkedIn, Telegram).
- Twitter/X preview. 1200×675 pixels (16:9 ratio) for large image cards.
- Favicons. 32×32, 180×180 (Apple Touch Icon), 192×192 and 512×512 (for PWA manifests).
- Thumbnails. 150×150 or 300×300 pixels — typical sizes for product cards and galleries.
- Banners and hero images. 1920×1080 or 1440×600 — for full-screen background sections.
Resampling Algorithms
When resizing, the pixels of the original image need to be recalculated for the new resolution. This process is called resampling, and the choice of algorithm determines the quality of the result:
- Nearest Neighbor. The fastest but roughest — it simply picks the nearest pixel. Suitable for pixel art where sharp edges are needed.
- Bilinear interpolation. Averages the color of neighboring pixels. A good balance of speed and quality for most tasks.
- Bicubic interpolation. Takes 16 surrounding pixels into account using a cubic function. Produces smoother transitions and is better suited for photographs.
- Lanczos. The highest-quality algorithm, especially for significant downscaling. Preserves detail sharpness but is slower than the others.
Responsive Images
The modern web requires images to adapt to the user's device. The HTML srcset attribute lets you specify multiple versions of the same image at different sizes:
<img src="photo-800.jpg" srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w" sizes="(max-width: 600px) 400px, 800px">
The browser automatically selects the appropriate version based on screen width and pixel density (Retina). To use this, you need to prepare the image in multiple sizes — and our resize tool is an indispensable helper for this task.
Modern Image Formats
Beyond dimensions, the file format plays a key role in optimization:
- WebP. A Google format that delivers 25–35% smaller file sizes compared to JPEG at the same quality. Supported by all modern browsers.
- AVIF. An even more efficient format based on the AV1 codec. Savings of up to 50% compared to JPEG. Support is growing but not yet universal.
- SVG. For icons, logos, and illustrations with clean lines, the vector SVG format is the better choice — it scales without quality loss.
The optimal strategy: prepare the image at the needed size, save it in WebP with a JPEG fallback, and use the <picture> tag for automatic format selection.
Conclusion
Proper image sizing is a balance between quality and performance. Don't upload camera originals to your website — prepare multiple sizes for responsive delivery and use modern formats. You can start right now — resize an image in our online tool in just a couple of clicks.
