Bad image compression or unsharpness with embedded images

  • Author
    Posts
  • #3409261

    Here is a problem I know since the year 2015. It sometimes annoyed me more or less. It is sometimes not apparent and other times it is.

    Basically, it is about how images are compressed and how they look like when they’re embedded. Some embedded images are extremely unsharp, and this is especially apparent with photos where there is either a lot of structure, clarity or a lot of shapes/outlines in the image.

    I believe the problem started after you introduced WebP image format:
    https://en.blog.wordpress.com/2015/12/04/webp-images-support/

    Since then, image compression got so bad that it basically started to alter some embedded images.

    Recently it started to annoy me more and more. Because photography and photo editing is now basically the main focus on my blog. As a photographer and editor, I spend my time in tools like Lightroom and edit the images, to later discover that they’re completely altered as soon as they get embedded on my site. With the main issue as said, that clarity goes away or that the images become unsharp when embedded.

    While not a special photograph, one of my more recent uploads demonstrates the issue fairly well…

    Check this post: https://diaryofdennis.com/2019/12/18/interesting-path-with-overgrown-trees/

    and compare it with the direct link to the uploaded image: https://diaryofdennis.files.wordpress.com/2019/12/winter-path-in-reinfeld.jpg

    Especially take a look at the ivy or the outlines of the tree branches to see the difference in sharpness. It doesn’t matter if seen with Chrome of Firefox, one thing is clear… the embedded image is unsharp to a degree that it looks almost like there was gaussian blur applied to the image, while the direct link is as sharp as the original file on my hard drive.

    Before 2015, this has never been an issue. I am pretty sure it started when you introduces WebP image format. Somehow the way the images are compressed has changed at that time.

    The only thing I noticed but I am not entirely sure about that, is that when I stick with I resize my images to the width of the main column with sidebar of my theme (Beacon theme), the images appear to me a little sharper compared to when I would resize to any other px width. An example would be… I usually resize to 1200px width and embedded images turn very unsharp, but if I go with the main column width 878px of the Beacon theme, it appears to me as if embedded images are slightly sharper. Maybe that is a placebo, I don’t know, but somehow it seems like that.

    But the main issue is definitely visible… embedded images are extremely more unsharp than the images loaded as a direct link.

    This is sad because also amateur photographers and editors want to present their images to their readers exactly as they have been edited in Photoshop, Lightroom or wherever. But they’re not presented like that when embedded.
    I googled the issue in the past and it seems I haven’t been the first person to spot the issue.

    Any developer’s opinion on that?

    The blog I need help with is diaryofdennis.com.

    #3409353

    Hi –

    Thanks for getting in touch. In addition to the example shared, could you also provide a few more instances where this has been an issue? Please share both links and screen shots of what you see. Screen shots can get added right in to the media library of the site.

    https://en.support.wordpress.com/make-a-screenshot/
    https://en.support.wordpress.com/add-media/

    It will also be helpful to have the following information:
    – size of screen viewing the site on
    – browser involved
    – browser version number https://supportdetails.com/
    – extensions enabled?
    – internet speed https://speedtest.net/
    – does a different browser work any differently?

    Thanks!

    #3409590

    Hi,

    As I said, it happens with every embedded image since 2015. It’s just more or less apparent depending on the subject. Of course, an image with materials like rough surfaces, a lot of outlines, structure or clarity will make it more apparent… due to the nature that there is simply more structure or outlines in the scene.

    Yes, I have more examples…

    Stone surface:

    Compare the surface/texture of the stone…

    Embedded: https://diaryofdennis.com/2018/07/16/the-port-edge/

    Direct link: https://diaryofdennis.files.wordpress.com/2018/07/port-area-1.jpg

    Screenshot of embedded: https://diaryofdennis.files.wordpress.com/2019/12/full-size-blog-screenshot-1.jpg

    Screenshot of direct link: https://diaryofdennis.files.wordpress.com/2019/12/full-size-blog-screenshot-2.jpg

    Switch through both screenshots fast and see just how much more crisp the surface is at the direct link and how much more blurry it is when embedded.

    Winter landscape:

    Compare the tree branches….

    Embedded: https://diaryofdennis.com/2018/03/16/winter-landscape/

    Direct link: https://diaryofdennis.files.wordpress.com/2018/03/black-and-white-landscape.jpg

    Screenshot of embedded: https://diaryofdennis.files.wordpress.com/2019/12/full-size-blog-screenshot-3.jpg

    Screenshot of direct link: https://diaryofdennis.files.wordpress.com/2019/12/full-size-blog-screenshot-4.jpg

    Couldn’t be more blatant. The embedded image is compressed to the point that it almost looks like there is a 0.1-0.5% Gaussian blur curtain in front of it. The embedded image absolutely doesn’t represent how it came out of Lightroom after edit…. while the direct link absolutely represents it. It’s clearly visible… embedded version has too much compression, direct link shows no issues at all.

    Autumn leave:

    Just check the texture of the leave…

    Embedded: https://diaryofdennis.com/2019/10/14/autumn-colors/

    Direct link: https://diaryofdennis.files.wordpress.com/2019/10/autumn-leaves.jpg

    Embedded, the leave has zero structure, it’s like there is Gaussian blur applied to the leave. With the direct link you clearly see structure on the leave.

    I could post tons of examples. It’s visible with every single embedded image… it’s just that you’re less likely to notice it when there is not much structure/outlines/textures in the image.

    Further information:

    Size of screen viewing the site on: 1920×1080

    Browser involved: Doesn’t matter. Tested with both… Firefox and Chrome, with plugins enabled and disabled.

    Browser version number: Firefox 71.0 (64-Bit), Chrome 79.0.3945.88 Offizieller Build (64-Bit)

    Extensions enabled: Tested with and without extensions.

    Internet speed: Always around 15000 kbit/s. It’s a 16000 kbit/s contract. Very stable connection.

    Does a different browser work any differently? As said. Nope. Doesn’t matter. Doesn’t even matter if I switch PC’s…. when I visit my mother and use her screen, it’s the same. Embedded images are overly compressed… direct images are pretty crisp. The best way to overlook it is to use my Huawei phone or my Samsung tablet… but guess what, it’s quite a bit more difficult for the eye to spot sharpness issues on very small screens.

    Not sure what’s going on behind the hood… but to me it just looks like there is some really heavy compression applied to embedded images. Might be cool for faster loading times… but honestly? That’s not an accurate representation of the photographers work at all. It actually looks like if I would use maximum compression during export or conversion of images. So, what is the point of trying to edit and export the image with certain images if the embedded result on the own website makes it look far worse? That’s the issue.

    #3409639

    kokkieh
    Staff

    I don’t see what you’re seeing on my end:

    Compare the surface/texture of the stone…

    Embedded: https://diaryofdennis.com/2018/07/16/the-port-edge/

    Direct link: https://diaryofdennis.files.wordpress.com/2018/07/port-area-1.jpg

    Screenshot of embedded: https://diaryofdennis.files.wordpress.com/2019/12/full-size-blog-screenshot-1.jpg

    Here’s how it looks to me: https://cloudup.com/cCjl2FI0oSS

    Just check the texture of the leave…

    Embedded: https://diaryofdennis.com/2019/10/14/autumn-colors/

    Direct link: https://diaryofdennis.files.wordpress.com/2019/10/autumn-leaves.jpg

    Embedded, the leave has zero structure, it’s like there is Gaussian blur applied to the leave. With the direct link you clearly see structure on the leave.

    Viewing it on your site I can see every vein and every serration along the edge for every leaf, every bump and indentation on the surface, same as on the direct image link. Here’s a screen shot of what I see:

    https://cloudup.com/cOd5G-mj7Fh

    The tree likewise displays with the fine details on the branches, though in this case I see some quality loss once I upload a screen shot to Cloudup due to that service’s compression, but viewing your site in my browser I don’t see any quality loss compared to the file itself.

    And this is on a Retina screen where any loss in quality would be even more noticeable than on a regular computer monitor. Using Firefox 71.0

    So I’m afraid I really don’t know what’s going on on your end.

    On the three examples above that appear lower-quality to you, right-click on each image, and select Inspect Element. That will open the browser inspector showing the HTML for those respective posts, with the img tag highlighted.

    Please take a sreenshot of that for me for each image, and upload those to your media library. Then I can compare if your site is perhaps loading the images using different URLs or size parameters on your end than it is on mine, which might provide us with additional clues here.

    #3409738

    Hi,

    The same problem is visible on your uploads as well.

    Here are the inspected elements…

    https://diaryofdennis.files.wordpress.com/2019/12/inspect-embedded-image-1.jpg

    https://diaryofdennis.files.wordpress.com/2019/12/inspect-embedded-image-2.jpg

    https://diaryofdennis.files.wordpress.com/2019/12/inspect-embedded-image-3.jpg

    I started to wonder if this is normal behaviour when an image gets resampled/resized…. so I made an experiment.

    I opened one of the images with IrfanView at original size. I opened the same image again but resized it from 1200px to 878px size. Same problem occurs as you can see on my desktop screenshot… The resized image gets more blurry…

    https://diaryofdennis.files.wordpress.com/2019/12/original-vs-downsized.jpg

    Next, I resized the 1200px image to 878px but marked “apply sharpen after resample” and the result was basically an 878px downsize that maintained original image sharpness of the 1200px file… See on the right blurry surface, on the left sharp stone surface…

    https://diaryofdennis.files.wordpress.com/2019/12/apply-sharpen-after-resample.jpg

    That leads me to believe, if you resize an image, it’ll lose a bit of sharpness. And I think exactly the same happens with the embedded images in WordPress.

    So, the solution might be indeed to choose 878px as export width, and then upload and embed it to the blog. I assume, since the image doesn’t have to get shrinked anymore, it’ll be displayed as sharp as it got exported. That’s my assumption. And that’s probably why I thought that I once noticed exactly that when I uploaded at 878px in the past (not sure which one it was). The problem however is, that resolution will be smaller, and thus the direct link image of less quality/size.

    I am not sure how to test this without annoying my readers with a test post. If I get an idea, I come back and post the results.

    So far I assume WebP doesn’t sharpen the decreased images when they’re embedded. But hey, I am not a web developer. So, maybe I am wrong.

    But it definitely makes me curious to test it somehow.

    #3409777

    Hi,

    Tested this. Editing an image in Lightroom and doing two exports with the same export settings except the resolution… one image with 878px width (at the top) and one with 1200px width (at the bottom)…

    https://diaryofdennis.files.wordpress.com/2019/12/878px-vs-1200px-trees.jpg

    Can’t unsee this. The 878px file embedded looks sharper than the 1200px embedded file. The 1200px has a slight haze of blurriness.

    So, yes… to maintain same quality as the export, we need to export to the width of the main column.

    Pancake… look where the tiny holes are…

    https://diaryofdennis.files.wordpress.com/2019/12/878px-vs-1200px-pancake.jpg

    878px at the top, 1200 px at the bottom. 878px has more sharpness… especially visible at the tiniest airholes.

    Tell me I’m not going insane :D

    #3409912

    supernovia
    Staff

    @diaryofdennis it sounds like you’re saying Lightroom does a better job of resizing images than the browsers are doing:

    So, yes… to maintain same quality as the export, we need to export to the width of the main column.

    If I’ve understood you correctly, no that’s not insane at all. Yes, you will get crisper results if you resize in a high-quality graphics program like Lightroom instead of having the browser do it for you.

    Want to test that out in a post and see if you like the results?

    #3409936

    Want to test that out in a post and see if you like the results?

    I did that already as I mentioned in my previous post. And yes, 878px export embedded into the 878px column is way sharper than 1200px export and embedded into the 878px column.

    But the issue has not been that bad before 2015 until you started to convert image uploads to WebP. So, I assume the way you serve embedded images now, happens with pretty aggressive compression.

    #3409991

    supernovia
    Staff

    The trouble is that the image embedded here:
    Embedded: https://diaryofdennis.com/2018/07/16/the-port-edge/

    Is in fact this exact same image:
    https://diaryofdennis.files.wordpress.com/2018/07/port-area-1.jpg

    If you right-click the image and open it in a new tab, you’ll see it’s just your browser (not WordPress) resizing the image for you.

    Honestly, I think you’re the only person who is going to notice a difference, but if you want to you’d be welcome to just resize images before uploading. That way you can get them perfect and the browser won’t squish them at all for you.

The topic ‘Bad image compression or unsharpness with embedded images’ is closed to new replies.