Dimensions and file size are different things
Dimensions are the width and height in pixels. File size is how much storage the file uses, measured in KB or MB. A picture can have large dimensions and a small file size, or the other way around. For a website you usually need to control both: the dimensions so the picture looks sharp, and the file size so the page loads fast.
Rules of thumb for dimensions
These are general guidelines, not strict rules, because every design is different.
- Full-width banner or hero picture: up to about 1920 pixels wide is enough for most screens.
- Pictures inside an article: roughly 800 to 1200 pixels wide.
- Thumbnails and cards: roughly 300 to 600 pixels wide.
- Icons, logos and avatars: 512 x 512 pixels is a common upper size.
On high-density screens such as many phones, an image shown at 600 pixels wide looks sharper if the file is closer to 1200 pixels wide. Use that trick only for pictures where sharpness matters, because bigger files load slower.
Rules of thumb for file size
- Aim for photos under roughly 200KB where you can.
- Large hero pictures are often kept under about 500KB.
- Simple graphics and logos can be much smaller.
Choose the right format
JPG suits photos. PNG suits logos, screenshots and pictures with transparent areas. WebP is often smaller than both and is supported by current major browsers, so it is a good choice for modern sites. For a closer comparison read JPG vs PNG vs WebP.
A simple workflow
- Start from the largest original you have.
- Resize it to the width the page really needs.
- Compress it to a sensible file size.
- Check the result on a phone screen, and keep the original in case you need it later.
Why use PicFitter
- Free to use, with no signup or watermark.
- Private: your images are processed in your browser and are not uploaded.
- Quick: nothing to install, and results come in seconds.
- Works anywhere: on your phone, tablet or computer.