Guide
Even experienced users make these errors. Avoiding them saves time, preserves quality, and produces professional results every time.
Formats
Format choice determines file size, quality, and compatibility.
PNG is a lossless format with excellent compression for flat graphics and text, but it produces enormous files for photographs. A 12-megapixel photo saved as PNG can exceed 30 megabytes, while the same image as JPEG at 85 percent quality fits in under 3 megabytes. The visual difference is usually imperceptible. Reserve PNG for screenshots, logos, icons, and any image requiring transparency. For photos, JPEG or WebP is almost always the better choice.
JPEG compression is designed for continuous-tone images like photographs. When applied to sharp text, line art, or screenshots, JPEG creates blocky artifacts around edges and makes text fuzzy. If you have ever saved a screenshot as JPEG and noticed blurry text, you have experienced this problem. PNG or WebP handle these graphics far better. Even at high JPEG quality settings, the artifacts around sharp edges are visible. Use JPEG for photos and PNG for graphics.
WebP offers superior compression compared to JPEG and PNG, but it is not universally supported. Older browsers and some content management systems may fail to display WebP images. If you convert all images to WebP without providing JPEG fallbacks, you may lose visitors on older devices or corporate networks with outdated software. The safe approach is to use WebP as the primary format with JPEG fallback through the picture element or server-side content negotiation.
Sizing
Wrong dimensions waste bandwidth, distort images, and look unprofessional.
Uploading a 4000x3000 pixel image to a website that displays it at 400x300 pixels is a common mistake. The browser downloads the full 12-megapixel file and then scales it down. This wastes bandwidth, slows page loading, and consumes mobile data unnecessarily. The correct approach is to resize the image to the exact display dimensions before uploading. If you need multiple display sizes, create a responsive image set with multiple versions at different resolutions.
Enlarging a small image to make it bigger does not create detail. The pixels are simply stretched, producing a blurry or pixelated result. No amount of sharpening can recover information that was never captured. If you need a larger image, you must obtain a higher-resolution source. Some AI-based upscaling tools can improve results for specific content types, but they are not magic. The fundamental rule is that you can always downscale, but you cannot reliably upscale.
Stretching an image to fit a container without preserving the aspect ratio produces distorted subjects. Circles become ovals, faces become narrow or wide, and buildings look crooked. Always maintain the original aspect ratio when resizing, or crop intentionally to a different ratio. If a platform requires a specific aspect ratio, crop to that ratio rather than distorting the image. Your audience will notice the difference immediately, even if they cannot articulate what is wrong.
Quality
Poor compression settings destroy detail and create artifacts.
Every time you save a JPEG, it is recompressed. Opening a JPEG, making a tiny adjustment, and saving it again introduces new compression artifacts on top of the old ones. Repeating this process five or ten times creates visible blockiness and color banding. The solution is to keep a lossless master copy in PNG or TIFF, make all edits to that copy, and only export to JPEG once at the final step. If you must re-edit a JPEG, accept some quality loss or re-export from the original master.
Many users drag the quality slider to the minimum to achieve a small file size, not realizing the damage until the image is published. Skin tones develop patchy blocks, skies show color banding, and text becomes illegible. A better strategy is to resize first to the exact display dimensions, then find the lowest quality setting that still looks acceptable. For most web photos, 75 to 85 percent quality is the sweet spot. Going below 60 percent is rarely acceptable for professional use.
Previewing at 100 percent zoom in an editing tool is not the same as viewing the final result on a website, phone, or printed page. The image may look fine in the editor but terrible when displayed at actual size or when the platform applies its own compression. Always preview the final image in the real destination context. Zoom in on faces, text, and fine detail. If you are printing, check the image at the intended print size. Catching problems early is much faster than republishing.
Workflow
The order of operations matters more than most people realize.
Compressing a full-resolution image before resizing is a common workflow error. The compression introduces artifacts that the resize algorithm can exaggerate. Resizing after compression can also make the artifacts more visible because the blocks no longer align with the pixel grid. The correct sequence is to rotate and crop first, then resize to the target dimensions, then compress once at the final quality setting. This produces the cleanest possible output with the smallest file size.
When you add text, watermarks, or decorative overlays to an image and then crop, the added elements may be cut off or positioned awkwardly near the edge. A watermark placed in the corner may end up too close to the border after cropping. Text centered on the image may no longer be centered in the final frame. Always establish the final crop and dimensions first, then add overlays. This ensures the added elements are positioned correctly in the final composition.
Removing metadata is the final step before sharing, not an early step in the workflow. If you strip metadata and then continue editing, the editing software may add new metadata including software name, creation date, and sometimes location information. The only way to guarantee a clean file is to perform all visual edits first, then remove metadata as the last step before distribution. Keep the original file with metadata intact for your own archive and organizational needs.
Next
Continue learning about image preparation best practices.
The correct editing sequence for preserving quality and avoiding errors.
How to hit exact file size limits for any platform or upload system.
Understand JPEG, PNG, WebP, and GIF to choose the right format every time.
FAQ
Quick answers to common questions about this topic.
The most common mistake is serving images much larger than their display dimensions, such as loading a 4000px photo in an 800px container. This wastes 75%+ of bandwidth and slows page loads dramatically. Always resize images to their rendered dimensions (with 2x for retina), then compress. Check natural vs rendered dimensions in browser DevTools.
Yes, JPEG uses lossy compression, so every re-save recompresses and degrades the image, accumulating artifacts (generation loss). Edit from a lossless master (RAW, TIFF, PNG), apply all edits in one session, and export the final JPEG/WebP once. If you must re-edit, return to the master rather than editing an already-compressed JPEG.
Retina/high-DPI displays have 2x or 3x pixel density. An image displayed at 400px CSS width needs to be 800px actual pixels (2x) to appear sharp. Serving only 1x images makes them look blurry on modern screens. Use srcset with 1x and 2x sources so the browser selects the appropriate resolution for each device.
Images in Adobe RGB or Display P3 may appear washed out or desaturated when displayed as sRGB on the web, which defaults to sRGB. Always convert images to sRGB color profile before web upload. Browsers assume sRGB if no profile is embedded. Use image editing software to convert, and embed the sRGB ICC profile for consistency.
Yes, CSS resizing only changes display size; the browser still downloads the full-resolution file, wasting bandwidth and memory. A 4000px image displayed at 400px via CSS still downloads the full file. Resize images to actual display dimensions on the server or build step. CSS should only handle minor responsive adjustments, not replace proper resizing.