Image Size Cheat Sheet for Websites, Social Media, and Email
Image quality is rarely just about sharpness. A good online image is the right size for its container, cropped for the place it appears, compressed enough to load quickly, and exported in a format that fits the job. Oversized photos slow pages down. Images that are too small look soft. The best workflow is to decide the final use first, then resize, crop, compress, and export once.
Quick Reference: Common Image Sizes
- Website hero image: 1600 to 2400 pixels wide. Use a wide crop such as 16:9 or 21:9.
- Blog feature image: 1200 x 630 pixels is a practical default for previews and sharing cards.
- Product image: 1200 x 1200 pixels for square catalog images, with enough whitespace around the object.
- Thumbnail: 400 to 800 pixels wide, depending on the grid size and retina display needs.
- Email image: usually 600 to 1200 pixels wide. Keep file size conservative because email clients vary.
- Profile image: square, usually 512 x 512 or 1024 x 1024 pixels before upload.
These are not universal rules, but they are strong defaults. If a site theme displays a card at 360 pixels wide, uploading a 5000 pixel camera photo is wasteful. If a hero section stretches across a high-resolution monitor, a 900 pixel image will look visibly weak.
Step 1: Resize Before You Compress
Start with dimensions. Resizing changes the number of pixels in the image; compression changes how efficiently those pixels are stored. If you compress a huge original and then resize it later, you may do extra work and lose quality twice.
Use the Image Resizer when you know the final dimensions or maximum width. For website content, setting a maximum width is usually better than guessing quality settings. A 1800 pixel image at sane compression often looks better and loads faster than a 5000 pixel image crushed with aggressive compression.
Step 2: Crop for the Placement
Cropping is composition, not just trimming edges. A square product photo, a wide website hero, and a vertical social story all need different framing. If you reuse one crop everywhere, important details can get cut off by the destination platform or layout.
Use the Image Cropper for fixed aspect ratios such as 1:1, 4:5, 16:9, and wide banners. Keep the subject away from the edges so responsive layouts have room to adapt. This is especially important for hero images, where text or buttons may sit over part of the image on mobile.
Step 3: Choose the Right Format
- JPEG: best for photos without transparency. Good quality at small file sizes.
- PNG: best for transparency, screenshots, UI graphics, and images with sharp edges.
- WebP: usually the best web delivery format when browser support is acceptable.
The Format Converter helps when you need to switch between JPEG, PNG, and WebP. A common workflow is to keep an original PNG or JPEG for editing, then export a smaller WebP for website delivery.
Step 4: Compress for Loading Speed
After the dimensions and format are correct, use the Image Compressor. For most web photos, aim for the smallest file that still looks clean at the display size. Do not judge compression by zooming to 400 percent; judge it in the layout where the image will actually appear.
When You Need More Than Resizing
If the image needs visual editing before export, open it in Paint Studio. A browser-based editor is enough for many everyday jobs: touching up a screenshot, adding text, making a quick crop, adjusting brightness, or preparing a web graphic. For clean subject cutouts, the Background Remover is the faster starting point.
Final Checklist
- Does the image match the final layout size?
- Is the crop intentional for desktop and mobile?
- Is the format appropriate for photo, transparency, or web delivery?
- Is the file size small enough for fast loading?
- Does the image still look clean in the actual page design?
Good image optimization is not complicated. It is a repeatable workflow. Decide the destination, set the dimensions, crop with intent, export in the right format, and compress only after the image is ready.