1

How can I host an image at 100% size on the web and keep a sharp image? Is the web browser down sampling my images?

If I create an image at 100% size (example 1000px wide), and display it naturally on a website, the image is somewhat blurry/pixelated. However, if I create the same image at 200% (2000px wide), and display at 50%, the image is sharp. The end result is both images being 1000px wide, but one image is blurry and the other sharp. We have experimented with resolution and dpi and the results stay the same.

I need the image 100% to be 1000px wide.

This is the image created at 100% and viewed in browser at 100% enter image description here

This is the image if I create it at 200% and view it on browser at 50% enter image description here

15
  • I can't replicate the issue. Images usually display at their native size in a browser unless your system is zooming it. Check your system zoom. Some systems with high resolution displays are set to zoom by default.
    – Billy Kerr
    May 18, 2018 at 18:00
  • It seems to be pixelated on all computers and browsers. The browsers are at 100%. No css is involved either. I have also tried multiple file formats and settings and nothing changes the results. May 18, 2018 at 19:01
  • Try enforcing width and height in the img tag: <img src="sharp.png" height="1000" width="1000"> and make sure your image is 72 px/in.
    – Webster
    May 18, 2018 at 19:09
  • I've edited the post to further explain what is happening. May 18, 2018 at 19:24
  • 1
    I think you are seeing it as pixelated because diagonal lines ARE pixelated on pixel displays. They always have been. Anti-aliasing (slight blurring/shading) takes care of a lot of jaggedness. When letterforms are rasterized at 72 ppi, they do not have perfectly smooth lines. Your method of using higher resolution and displaying at smaller size is effective and works in a lot of situations. The display engine is using the higher resolution to do better anti-aliasing of your letterforms. Also, it allows higher zoom before jaggies appear.
    – user8356
    May 18, 2018 at 19:37

3 Answers 3

1

Based on the comments, it appears the issue is that you are viewing these on a retina screen.

Apple's retina screens have decoupled the actual pixels of the screen from the pixel dimensions of the image.

Prior to retina screens, an image loaded in a web browser that was 100px x 100px would take up exactly 100x100 screen pixels.

Retina screens (which is just Apple's term for super-high-resolution screens) had a problem where if they rendered images and text at 'actual pixel size' everything would be way too small to be legible. As such, retina screens attempt to render content at the same size as non-retina screens, but use more pixels to do so.

So for easy math, let's say a retina screen is twice the resolution of a standard screen.

If you create a 100x100 image and view it on a normal screen, it will look sharp as each image pixel uses one screen pixel.

On a retina screen, however, that 100x100 image will take up 200x200 screen pixels. The browser translates the 100 virtual pixels into 200 real pixels. To do so, it has to make up all the missing pixels via interpolation which causes the blur you see.

The fix (in this example) is to make your images 200x200 actual pixels, then size them in your HTML or code to render at 100x100 pixels.

On a normal screen, it will look the same. The extra pixels are just thrown away. But on a retina screen, it will now look sharp as each image pixel is now using one screen pixel.

1

I am having the same problem and I found the cause is that I set my display as scaled to 125%.

In Windows 10, above "Display Resolution", there is a dropdown box for "Change the size of text, apps, and other items". If I set it to 125%, the png looks fine in Photo Viewer, but looks blurry in the browser even the png is NOT scaled in html.

If I switch the display scale back to 100%, the same png will look fine in the same html document in the browser.

0

You can apply a CSS rule that renders 100% images even sharper when resized. For example, if you have an image with a natural width of 1000 pixels, and it is resized to 800px, the browser may render the image with a slight blur/anti-aliased effect.

CSS

.sharpen {
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}

In this code example, I grabbed your 100% image and resized it with the new CSS rule: https://codepen.io/doppl3r/pen/YLdQxx?editors=1100

The right image text should appear sharper. To prove this, change the max-width from 400px to 150px

1
  • 1
    I'm aware that code can fix this, but If I'm supplying this image for a client, that is not an option. I'm more confused why an image at 100% size is not displaying high quality. May 18, 2018 at 20:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.