Almost all jpg images on web pages are pixelated. I've tried other browsers and it's the same. Only JPEG images that get pixelated. PNGs display well.

This comparison image preview is a screenshot of two actual images and how they appeared on a website. It's basically the same image but different formats. The left one is a PNG and the right one is a JPG. If you look at the one on the right, the edges are clearly pixelated and the rest of the image doesn't look smooth at all compared to that with the PNG format of the same image.

Does anyone have any idea how to resolve this issue as it can really be visually disturbing when browsing? Any help would greatly be appreciated. Thanks in advance.

P.S.

I do not have any issues with jpg image quality on other programs other than on (websites) browsers.

  • 2
    Which internet browser are you using? What is your resolution at? – Eric F Oct 13 '14 at 14:03
  • @EricF I usually use Google Chrome but as mentioned above, the issue is experienced on all browsers so I don't think it is only on Chrome. Browsers I tried are Chrome, Firefox and EI. As for my screen resolution: 1366 x 768 – Lou Oct 13 '14 at 14:08
  • Just for the hell of it, have you tried reinstalling your main browser? Just an easy thing to try – Eric F Oct 13 '14 at 14:11
  • I don't think reinstalling a browser would make any difference as it is experienced on ALL browsers including the preinstalled IE on win8 – Lou Oct 13 '14 at 14:14
  • Its just something to rule out. – Eric F Oct 13 '14 at 14:19
up vote 0 down vote accepted

It sounds like you are behind some sort of optimization proxy server. These are common on mobile devices where images and what not are re-compressed by a server before being sent to you.

Another option is that you are zooming with your browser, which can make artifacts more visible.

  • As far as I know I am not using any sort of optimization proxies. My zooming is set to its default at 100% and zooming in/out doesn't make any difference. – Lou Oct 13 '14 at 14:26
  • @Lou Are you sure your other computers look better? Are you sure you didn't just get a new monitor and that now you're noticing the difference? If there is some optimization software, it might be ran by your ISP and you might not know about it. – Brad Oct 13 '14 at 16:00
  • I didn't get a new monitor as I am using a completely new laptop. I have a feeling it could be on the ISP side that's causing this. I use a USB internet stick to get online (ik, I'm poor lol). I tried to use it on a different laptop and although it is not as obvious, if I look closely, the images are pixelated but not as bad as they do on my laptop. I think I just didn't notice it on a different laptop since it has a small screen while my laptop has a larger screen. Does this mean I have to contact my ISP? @Brad – Lou Oct 19 '14 at 8:31
  • @Lou New laptop == new monitor. Yes, you could contact your ISP to see if they are compressing things more than normal. If you want to post an actual screen capture of a site you're looking at that looks poorly (in PNG format, not resized or anything), I can compare to what I'm seeing and can rule out any monitor or perception issues. – Brad Oct 19 '14 at 14:40
  • 1
    Turns out it really has something to do with my ISP. They seem to be compressing things. I tried the same internet connection with my sister's laptop and noticed pixelated JPG images but less noticeable since her laptop has a smaller screen resolution. Since my laptop has a bigger 1366 x 768 resolution, the issue is more visible. After several months of depending on my own internet, I finally managed to connect to someone else's WIFI and the images look normal. Disconnected from that wifi and connected on mine and the pixelation appears. My ISP seems crappy haha TY again – Lou Jan 19 '15 at 9:18

This is a typical artifact caused by quantization used in the JPEG encoding process, which discards high frequency contents of the image. It occurs at sharp edges, as those lead to high frequency components when the image is transformed by the discrete cosine transform.

PNG images do not suffer from this, since they are encoded in the pixel domain, and not based on frequencies. Also, PNGs are lossless, whereas in JPEG, the high frequencies are cut off (quantized) to save space.

You can't do anything about this, as it's the fault of the person who created the JPEG. They chose a too low quality setting (i.e., a too high quantizer).

That's also the reason why JPEG should be used for photographic content, whereas PNG (or other pixel-and vector-based image formats) is better suited for graphics and text. Some other nice examples of this effect are shown here.

  • so is there really no way to avoid this? I do not experience this issue on a different laptop which is why it bothers me more. @slhck – Lou Oct 13 '14 at 14:11
  • It's better on a different computer? Hm. And when you download the image (on your computer) and view it offline in some program, does it look better than in every browser? – slhck Oct 13 '14 at 14:12
  • As far as I remember, I didn't have this issue in my previous laptop. If I download (right click + save image) the image it will look the same as it did on the browser - pixelated. – Lou Oct 13 '14 at 14:23
  • @Lou It might have something to do with your graphics card configuration (i.e. if the images that are exactly the same, look pixelated on one computer but not the other). Have you tweaked with any kind of image enhancement setting? – Vinayak Oct 18 '14 at 2:35
  • @Vinayak I did a bit of tweaking before but I reset it back to default. If it is the graphics card is that possible to only affect JPEG images and have the PNGs look normal and the issue only experienced on browsers? – Lou Oct 19 '14 at 8:27

Your Answer

 

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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