Properly Size Images
To properly size images, match the image file to the way it will actually be displayed, sent, or uploaded. That means choosing useful pixel dimensions, keeping the file size reasonable, compressing without hiding important details, and using responsive image markup when the image appears on a website.
Use Gmail in Chrome? Install Devenia Send for Gmail from the Chrome Web Store. The checker below works on this page before you attach a file anywhere.
Last updated: May 27, 2026
Quick answer
A properly sized image is large enough to look clear in its final use, but not so large that it wastes bandwidth, fails an upload, or makes an email too heavy. For websites, start from the display size in the layout and provide responsive versions for smaller and higher-density screens. For email and uploads, resize oversized phone or camera images first, then compress only as much as needed to fit the limit.
- For web pages: size images around the rendered display size, then use responsive `srcset` and `sizes` where the layout changes.
- For email: keep the full attachment set comfortably below the provider limit and preserve readable details.
- For upload forms: check the stated MB limit, accepted format, and required dimensions before exporting.
- For quality: inspect text, faces, product details, forms, labels, and edges after resizing.
Check the file first
Choose the file before you decide whether to compress it, split it, or send a link. The checker gives you the size result and shows whether the file is likely to fit a safer email target.
Pick the PDF, image, or video you want to email. The size check is free.
Email size result
- Files
- Not selected
- Total size
- 0 MB
- Email service
- Most email services
- Safe email target
- Safe target: 20 MB
- Compression needed
- Choose a file and we will show this.
Your result will appear here after you choose a file.
Optional
Sending to work or school?
You do not normally need this. If you are sending to a work, school, or company address, paste it here and we will check the mail service when we can.
You can leave this empty. It is only here if you want to check a work, school, or company email address.
Optional Devenia help
Rather have us make the smaller copy?
The check and advice above are free. You can try the changes yourself, or ask Devenia to make a smaller copy for you.
We use this to send the finished file and receipt.
On this page: What properly sized means | Dimensions and display size | Web performance | Responsive images | Email and uploads | Compression and formats | Troubleshooting | Checklist | FAQ
What properly sized images means
“Properly size images” means avoiding two opposite problems. The first problem is sending or serving an image that is much larger than anyone needs. A 4000 pixel photo displayed as a 600 pixel card still costs users the larger download unless the site serves a smaller version. The second problem is making the image so small or compressed that it looks blurry, unreadable, or untrustworthy.
The right size depends on the destination. A blog hero, a product gallery image, a Gmail attachment, a job application upload, and a screenshot for support may all need different exports. Do not start with a random percentage. Start with the final use.
| Use case | What to size for | What to check |
|---|---|---|
| Website content image | Rendered layout width plus responsive variants | Mobile size, desktop size, and high-density displays |
| Hero or banner image | Largest real display size, crop, and performance budget | LCP impact, sharp focal point, and no layout shift |
| Email attachment | Total attachment size and readable details | Faces, text, labels, forms, and file size |
| Upload form | The exact MB limit, format, and dimension rule | Accepted JPG, PNG, WebP, or PDF format |
| Screenshot | Readable interface text | Small UI labels and error messages |
When in doubt, keep a high-quality original and export a smaller copy for the specific task. That gives you room to try another size without repeatedly saving over the only version you have.
Image dimensions, display size, and file size
Image dimensions are the width and height in pixels, such as 2400 x 1600. Display size is how much space the image uses in the final page, email preview, document, or upload result. File size is the storage size in KB or MB. These are related, but they are not the same thing.
A file can have large pixel dimensions and still be moderately compressed. Another file can have smaller dimensions but be saved in a format that makes it larger than expected. For practical work, dimensions usually come first. If the image is far bigger than the display area, resize the dimensions before pushing compression quality too low.
For many ordinary web content images, an export around 1200-1600 pixels wide is enough when the image sits inside an article column. For a full-width hero, you may need larger versions, especially on wide screens. For email viewing, many photos work well around 1600-2500 pixels on the long edge, but text-heavy photos, product defects, IDs, receipts, and forms may need more careful checking.
Do not treat these as fixed rules. A small logo, a product thumbnail, a detailed diagram, a retina screen, and a full-width background need different decisions. The practical question is always: how large will the image appear, and what must remain visible?
Properly size images for web performance
Oversized web images waste bytes. They can slow the first view of a page, increase mobile data use, and make performance tools report image-delivery issues. Chrome Lighthouse historically reported this as “Properly size images”; newer Lighthouse reporting groups related issues under image delivery insights, but the practical fix is the same: do not make visitors download image pixels that the layout will not use.
Start by checking the rendered size in the browser. If an image is displayed around 700 pixels wide in the layout, a 3000 pixel source is usually excessive for that slot. A high-density display may benefit from a sharper 2x candidate, but that still does not mean every mobile visitor should receive the largest desktop file.
- Find the rendered size. Use your browser inspector or design system to see how wide the image appears at common breakpoints.
- Create useful variants. Export a small, medium, and large version instead of one huge image for every screen.
- Declare dimensions. Include image width and height so the browser can reserve the right aspect-ratio space while the file loads.
- Compress each variant. A smaller display version can often use stronger compression because tiny artifacts are less visible at that size.
- Test mobile and desktop. Check both visual quality and actual downloaded file size.
For images below the first screen, lazy loading can reduce work during the initial page load. For an important hero image near the top of the page, avoid lazy loading unless you have confirmed it does not delay the main content.
Use responsive images when the layout changes
Responsive images let the browser choose from multiple image files. This matters because the browser knows things your template does not, including viewport width, device pixel ratio, and sometimes connection conditions. The common pattern is to provide several image candidates with `srcset` and tell the browser the expected display size with `sizes`.
A width-based `srcset` might offer 480w, 960w, and 1440w versions of the same image. The `sizes` attribute explains how wide that image will appear in the layout, such as full width on small screens and half width on larger screens. The browser can then choose the smallest file that still looks appropriate.
Use width descriptors such as `800w` when the image display size changes with the layout. Use density descriptors such as `1x` and `2x` when the display dimensions are fixed but you want a sharper option for high-density screens. Do not mix width descriptors and density descriptors in the same `srcset`.
Use the `
Properly size images for email and uploads
Email and upload sizing is less about page speed and more about getting accepted without making the image useless. The file must fit the limit, but the recipient still needs to see the point of the image.
If you are sending images by Gmail, Outlook, Yahoo Mail, Apple Mail, or another provider, check the total attachment size, not just one image. Several medium photos can exceed the limit together. If you use Gmail, the Devenia Send checker above can help you check whether a file is likely to fit or needs compression before you send.
For ordinary email photos, resize dimensions first. A full-resolution phone photo may be more than the recipient needs for a support message, sales quote, family update, or document preview. If the image includes text, product defects, serial numbers, signatures, or form fields, open the final copy and inspect those areas before attaching it.
Upload forms can be stricter than email. A job portal, school system, government form, marketplace, or support form may require a specific format such as JPG or PNG and a maximum such as 10 MB, 5 MB, 2 MB, or 1 MB. Follow the posted rule first. If the form asks for a PDF, use Compress PDF instead of turning each page into a separate image.
For more focused workflows, see Reduce Image File Size, Reduce Image File Size Online, Compress Photos for Email, and Reduce Image File Size to 100KB.
Compression and format choices
After dimensions, choose the right format and compression level. JPEG is usually the practical choice for photos because it can reduce file size strongly, but it is lossy. PNG is useful for screenshots, interface images, sharp text, and transparency, but it can be large for normal camera photos. WebP and AVIF can be smaller for websites when browser and platform support fit your workflow.
| Image type | Good format | Why |
|---|---|---|
| Photo | JPEG, WebP, or AVIF | Good compression for real-world images. |
| Screenshot | PNG or WebP | Keeps text and interface edges clear. |
| Transparent logo | PNG, WebP, or SVG when appropriate | Preserves transparency or vector sharpness. |
| Simple icon | SVG when allowed | Scales without needing multiple bitmap sizes. |
| Document scan | PDF or JPEG depending on destination | Use the format requested by the recipient or form. |
Lower quality in small steps. If you compress too far, you may see blocky backgrounds, fuzzy text, halos around edges, banding in gradients, or smeared facial detail. A smaller image that cannot be read or trusted is not properly sized.
Troubleshooting oversized or blurry images
The image is still too large
Check whether the pixel dimensions are still far larger than the final use. If the dimensions are reasonable, switch to a more suitable format or lower quality slightly. For screenshots, crop unused areas before compressing.
The image looks blurry
You may have resized too small, compressed too heavily, or uploaded a small image into a larger display slot. Export a larger copy, use less compression, and check whether the website or app is stretching the image beyond its natural size.
The website still reports image sizing issues
Confirm the actual file being downloaded, not only the image you uploaded. Some themes, plugins, or templates may still reference the full-size file. Check mobile and desktop separately because each viewport can receive a different image candidate.
The upload form rejects the file
Read the error message carefully. The problem may be file size, dimensions, file type, filename, or total upload size. Export a copy that matches the exact rule instead of repeatedly compressing without changing the rejected condition.
Final checklist
- Keep the original image unchanged and export a task-specific copy.
- Check the final display size, email limit, or upload rule before resizing.
- Resize oversized dimensions before lowering quality aggressively.
- Use JPEG for most photos, PNG for screenshots or transparency, and WebP or AVIF where supported for web delivery.
- Use responsive image markup for website images that appear at different sizes.
- Declare width and height for web images so the browser can reserve space.
- Inspect small text, faces, labels, forms, and product details after export.
- For email, check the combined size of all images before sending.
FAQ
What does properly size images mean?
It means the image file is appropriate for its final use. It should be large enough to look clear, but not much larger than the display, email, or upload workflow requires.
Should I resize images or compress them first?
Resize dimensions first when the image is much larger than needed. After that, adjust compression quality only as much as needed to meet the file size target.
What size should images be for a website?
Base the size on the rendered layout. Article images often work well around the width of the content column, while hero images may need larger versions. Use responsive variants so mobile users do not download unnecessary desktop-sized files.
Why does a large image still look small on the page?
CSS can display a large source file in a smaller layout slot. The image may look small on the page while the browser still downloads the larger file unless responsive image sources are used.
Do I need 2x images for retina screens?
Sometimes. A high-density screen can benefit from a sharper image candidate, but you should provide it through responsive markup instead of forcing every visitor to download the largest file.
What is the best image format for properly sized images?
Use JPEG for most photos, PNG for screenshots or transparency, SVG for suitable icons or logos, and WebP or AVIF for web delivery when support fits your site and audience.