You upload a sharp, high-quality photo and it appears blurry or pixelated on the website. This is one of the most frustrating experiences in web publishing, and it almost always has one of three causes: the platform re-compressed the image at a low quality setting, you uploaded an image too small for the display size, or there is a dimension mismatch between the image and the container. This guide identifies each cause and how to prevent it.
Cause 1: platform re-compression
Most web platforms — social media, website builders, CMS systems, e-commerce platforms — compress images after upload to reduce storage costs and improve page load times. The compression they apply is often aggressive and optimized for average file size reduction, not for your specific image.
The result is a version of your photo that went through two compression passes: once when you exported it from your camera or editor, and again when the platform re-compressed it. Each lossy compression pass introduces new artifacts on top of existing ones. Smooth gradients develop banding. Sharp edges become soft. Fine detail disappears.
Mitigation strategies:
- Upload at a higher quality than you think you need. Platforms that re-compress are working with your uploaded version. If you upload at JPEG quality 95, the platform's re-compression starts from a cleaner baseline than if you uploaded at quality 70.
- Upload at the exact display dimensions if you know them. A platform that receives an image already at the target size may skip or reduce resizing, which avoids one of the degradation steps.
- Check the platform's documentation for recommended upload specifications. Many platforms publish the dimensions and format they recommend for best quality.
Cause 2: uploading a smaller image than the display size
If you upload a 600-pixel-wide image and it is displayed at 1200 pixels wide, the browser must scale it up to fit the container. Scaling up an image beyond its original dimensions — upscaling — reveals the underlying pixel grid. The image looks soft, blurry, or blocky depending on the scaling algorithm.
This happens when:
- You resize a photo too aggressively before upload, going smaller than the display size
- You use a photo taken on an old device with a low-resolution camera
- You take a screenshot on a non-retina display and display it in a retina context
- You upload a thumbnail-sized version of an image to a slot that shows it large
The fix is to use a source image that is at least as large as the display size, and preferably 2× as large for high-density (retina) screens. A display width of 800 CSS pixels on a retina screen needs a 1600-pixel image to appear sharp.
Cause 3: retina / high-density display mismatch
Retina and high-density displays (also called HiDPI or 2x displays) use two physical pixels to display each CSS pixel. A standard 100×100 CSS pixel area uses a 200×200 physical pixel grid on these screens. If you provide an image that is only 100×100 pixels for a slot that needs 200×200, it appears blurry on retina devices while looking fine on standard displays.
Most modern laptops, iPhones, iPads, high-end Android phones, and many desktop monitors are high-density displays. If your audience uses modern devices and your images look sharp on your monitor but blurry when others view them, a retina mismatch is the likely cause.
The fix: provide images at 2× the CSS display dimensions. For a 400-pixel-wide CSS slot, upload an 800-pixel-wide image.
Cause 4: wrong format causing visual artifacts that look like blur
Heavy JPEG compression can produce artifacts that appear as blurring rather than blockiness — particularly in smooth gradient areas like sky, skin, and out-of-focus backgrounds. What looks like a blurry image may actually be a heavily compressed JPEG where fine detail has been quantized away.
The test: zoom in to a sharp edge in the image (a text character, a high-contrast outline). If the edge looks soft and surrounded by color noise, the issue is JPEG compression artifacts. If the edge is sharp but the overall image lacks detail, the issue is insufficient resolution.
Fix JPEG artifacts by uploading at a higher quality setting or converting to WebP, which handles gradients more cleanly at equivalent file sizes.
Cause 5: the DPI confusion
Image editors often display a "DPI" or "PPI" value in file settings. Some people reduce this value thinking it will reduce file size or change how the image looks on screen. It does neither. DPI (dots per inch) is only meaningful for print — it tells a printer how densely to lay down ink. Screens use pixels, not dots per inch, and the DPI value in a JPEG or PNG is ignored by all browsers.
Reducing an image from 300 DPI to 72 DPI in an image editor does not make it smaller or blurrier on screen — unless the editor also resampled (resized) the pixel dimensions at the same time. Check whether the pixel dimensions changed. If they did not, the DPI change had no effect on the web version.
Prevention checklist
- Upload images at 2× the CSS display width for retina sharpness
- Upload at JPEG quality 85+ or WebP quality 82+ before platform re-compression
- Check the platform's recommended image dimensions before uploading
- Never upscale a small image to fill a large slot — start from a high-resolution source
- Use WebP or AVIF instead of JPEG where platform support allows — they handle quality compression more gracefully
Frequently asked questions
Why does my image look blurry after uploading it?
Almost always one of three causes: the platform re-compressed it at low quality, you uploaded an image smaller than the display slot (so it's upscaled), or there's a retina display mismatch where the slot needs twice the pixels you provided.
How do I stop images getting blurry on upload?
Upload at roughly 2× the CSS display width, export at JPEG quality 85+ or WebP 82+ so the platform re-compresses from a clean baseline, and follow any dimensions the platform recommends.
What is a retina display mismatch?
High-density screens use two physical pixels per CSS pixel, so a 400-pixel slot actually needs an 800-pixel image. Provide a smaller one and it looks sharp on standard screens but soft on retina devices.
Does changing DPI fix a blurry web image?
No. Browsers ignore the DPI tag entirely and render by pixel dimensions. Changing 300 DPI to 72 DPI does nothing on screen unless the editor also resampled the pixel count.