Webpage Size Calculator
Enter the layout width in CSS pixels, how much of it the image fills, the screen pixel ratio, the aspect ratio and the file format. The calculator gives the image size to export, srcset widths and a file size.
- Image size
- File size
- Srcset widths
Use 2x for most phones and high density laptops.
Export images at CSS width × layout share × pixel ratio. An image filling a 1200 px layout on a 2x screen should be 2400 × 1350 px at 16:9. As WebP that is about 486 kB.
Web image size chart
Full width, 16:9. Search for a layout.
| Layout | At 1x | At 2x |
|---|---|---|
| 360 px | 360 × 202 | 720 × 405 |
| 768 px | 768 × 432 | 1536 × 864 |
| 1024 px | 1024 × 576 | 2048 × 1152 |
| 1280 px | 1280 × 720 | 2560 × 1440 |
| 1440 px | 1440 × 810 | 2880 × 1620 |
| 1920 px | 1920 × 1080 | 3840 × 2160 |
Pixels.
Layout width and image
At 2x, 16:9. Slide the layout width.
The image area is drawn in the page.
How to size web images
Layout to pixels. Step through it.
Width
CSS layout width.
Use srcset so phones download the smaller files.
AVIF, WebP or JPEG
Image formats. Compare them.
Newest.
Widely used.
Classic.
AVIF and WebP are about a third to half the size of JPEG.
Before you publish
Image checks. Tick each item.
Tick each item as you go.
Set width and height on images to stop layout shift.
What you get
Image sizing. Each tile explains one result.
Width × height.
Size.
CSS size.
Widths.
Choice.
An image twice too wide costs four times the data.
Frequently Asked Questions
No question matches that search.
What size should images be for a website?
The display width in CSS pixels times the screen's pixel ratio.
What size is a full width hero image?
About two thousand four hundred pixels wide for a large retina screen.
How big should a web image file be?
Aim for under two hundred kilobytes for most images and five hundred for heroes.
Do I need two times images?
Yes for sharp results on phones and retina laptops.
What is srcset?
An HTML attribute that lets the browser pick the right size image.
Is WebP better than JPEG?
Usually, it gives the same quality at a smaller file size.
Sharp and fast
Export images at the right size and your page looks crisp and loads quickly.
More size calculators
Each one has its own calculator, worked examples and answers to common questions.