Image compression destroys photos, how to disable?
-
WordPress.com compresses images and as a result photographs can become really fuzzy and unusable. How to turn this off?
The heavy compression may be ok for smaller images but 774 pixels wide photos look totally different than what they were mean to be.
The issue is exaggerated in drone photos that don’t have as much details to start with compared photos taken with a pro-camera. E.g. in my other blog https://learnsee.wordpress.com/2016/10/02/linnunlaulu-autumn-colours/ was submitted at exactly the 774px resolution that wordpress wants to use with this theme. The original 774px file that I uploaded had a lot more sharpness and detail.
I found solutions to stand-alone installations but not for wordpress.com.
If you don’t want to give the exact compression value to be selected by the site admin, you could give us an selection: emphasize site loading time or image quality (recommended for photographers).
The blog I need help with is: (visible only to logged in users)
-
There’s no way to turn off image compression on WordPressdotcom sites and until now image compression has been around 10% (that I know of) when you upload an image. But as you say you’re uploading images that have already been resized and optimized before uploading, there shouldn’t be that much difference.
I assume that your image is also 72 ppi?
What is the size in KB of the image before you upload and what is it after upload?
-
In today’s post
there is a huge difference in sharpness especially in the building near the left edge when I compare the image I uploaded and what I see on the blog.
The original image was saved using maximum JPG quality and size was 474KB. The JPG downloaded from the blog is 377KB. Earlier I uploaded compressed JPGs but now I must use all the resolution there is.
My understanding is that a display has ppi and image has just pixels.
On exactly same the resolution I have lots of 200-300KB JPGs that I’ve created myself that have the intended sharpness. They are smaller and have better image quality.
In a photography blog it would be very important to show the photos exactly as intended by the photographer. You don’t filter words in literature blogs!
-
Hi again, I’ve done some testing and cannot duplicate your results.
Regardless I’ve tagged this for Staff just to clarify with them whether there is any change in the 10% image compression when uploading images.
-
Hi there,
There hasn’t been any recent changes in how we compress uploaded images, and there shouldn’t be any noticeable difference in image quality post-compression.
I’ve also tried to reproduce this by uploading images at several sizes and don’t notice any loss of quality in any of them after uploading, so I’d like to specifically try it with your file. Can you please upload the file to a service like Dropbox or Google drive and share the link with me so I can get the original image file? Then I can compare that to the image on your site and check the compression when I upload it.
The one case where there is loss of quality is if the image is resized after uploading to WordPress.com. This applies both to resizing on the fly in the editor and resizing the image directly in the media library. But that does not appear to apply here.
-
@kokkieh- Thanks. Just thinking aloud (belatedly). Is the Retina/HiDPI upscaling still a factor to consider?
-
I don’t think so. Everything on WordPress.com is retina-compatible by now, and I’m actually using a retina display and don’t see any issues with blurry images, but I’ll keep that in mind while testing further on this.
-
I compared the original file and the one downloaded from the blog using OS X’s default image viewer and they look about the same. But both of them are clearly sharper than what I see on the blog with Safari on the very same computer (IMac 27″ 5K Retina).
I wonder if it has something do with the parameters that the image url has (w=1548=h=1032). The original width is 774. On Macbook Air 11″ w-parameter is 774. Despite the 1548 width, on screen the blog image has the same physical size as the original 774 pixel image shown with “Actual size” setting.
I had blurriness issue also on the Macbook Air and Chrome but just found a setting that affected the image and I can see a clear improvement (=clearly better than on the 27″) but I haven’t yet had the opportunity to compare it to the original. On Macbook AIr the blog image actually is slightly sharper on Safari than Chrome.
I’ll continue testing when I have the time. E.g. 27″ with Chrome.
-
I wonder if it has something do with the parameters that the image url has (w=1548=h=1032).
Where exactly do you see this? Can you please take a screen shot of that for me that includes the URL of the page you’re viewing? If you upload that to the media library I’ll be able to see it.
Viewing your site in both Safari and Firefox I see the dimensions in the URL as 774×516. This is on a Macbook, but on both the 13″ and a 27″ Retina display, and image quality is the same in either browser and on either screen. If for some reason the image is blown up when you view it, that could very well be the cause of this, but I’d need to know how to reproduce those circumstances before I can submit a bug report.
-
In the media library of learnsee blog are
1. Screenshot of the page html showing that the url has parameters w=1548=h=1032
2. Screenshot of the image with the url
3. Screenshot of the used Safari versionThis was achieved by
1. Go to learnsee.wordpress.com using Safari
2. Click “Siltasaarenkärki” blog post title (the html screenshot if from the resulting page)
3. Control + Click / Open image in new window (the url screenshot is from the result)The computer is a less than month old iMac 27″ 5K that was updated to as new as it was possible (now OS X El Capitan 10.11.1) when initially taken to use.
Some of the urls in the source have the correct width. Incorrect 1548 is also used on the main page.
-
The html source screenshot is from page https://learnsee.wordpress.com/2016/10/04/siltasaarenkarki/
-
Thank you for the detailed steps and the screen shots. However, I’m not able to reproduce this at all. Wherever I go on your site the image URLs are showing as 774×516 for me. I checked this in Safari 9 and also on the new version, Safari 10.
I think it’s safe to say that it’s not a compression issue, though, but something strange going on with the browser. Do you see the URL with the wrong sizing on both the iMac and the macbook in Safari? And do you see it in a different browser like Chrome or Firefox on either machine?
I’d love to figure this out, but I’m out of ideas what the cause could be or how to reproduce what you’re seeing :)
-
I installed Chrome on the iMac 27″ and the url contains the same (incorrect?) url-parameters as Safari (w=1548&h1032) and the image on Chrome window isn’t as sharp as the jpg downloaded from the blog.
I added to media library a screenshot of the http-headers that Chrome sends on the iMac 27″ 5K. They don’t contain anything about the resolution. The last entry on the User agent is Safari/537.36 (not visible on the screenshot).
On the Macbook Air 11″ url parameter is w=774&h=516 both with Safari and Chrome. There is no clear difference between the original and what is displayed on the browser.
I agree that this is not a compression issue. It seemed to be as at first I had blurry images on two different type of computers with different browsers.
-
So it appears to be restricted to the iMac. Does it happen with your other site as well?
And can you please check what happens if you connect the 27″ display to your Macbook? Does it still show the images at that URL?
I’m starting to think @justjennifer’s theory about Retina displays might be involved here. I’ve asked some developers to take a look, but the more information we can give them, the better.
-
Alrighty then! :) There’s an exchange in the comments of that News announcement about uploading 72ppi images at exactly the suggested dimensions given by WPcom https://en.blog.wordpress.com/2012/08/02/a-high-resolution-experience/#comment-158617
ppusa uploaded elaintarhanlahti.jpg at the specified pixel dimensions for the theme (not responsive), but at 240ppi. To my aging eyes that image viewed on a Win10Pro 64-bit PC with Chrome Version 53.0.2785.143 m (64-bit) looks a bit over-sharpened (sorry!) and not blurry.
FWIW as I said I could not duplicate the issue, but am not working in the same environment as ppusa.
Thanks for following this through. I am enjoying the learning. :)
-
-
The same happens also on whatthehelsinki.com blog. But only for new posts. Earlier post from September 4th 2016 has url parameter with correct width and no height. Something has changed after that.
Unfortunately I don’t have any cables to connect the Macbook to the 27″ display.
-
In learnsee blog the url parameter is incorrect starting from October 2nd. That last post with correct url parameter is September 30th. No post on October 1st.
-
Have you tried adding yourself an image using 27″ 5K display? Maybe there is something in the add image functionality and not in viewing functionality?
-
Right. The problem is the Retina display, but I couldn’t see it as my work account causes sites to sometimes load differently from regular user accounts, so the doubling of the size parameters did not happen for me.
But that doubling should happen on Retina displays according to the developers who looked at this. If the image as it appears on your site is exactly the size as the image in the media library that can then cause blurriness, so their recommendation is to use bigger images than your theme requires to ensure it still looks good on Retina displays.
This will mean slightly bigger file sizes, but if you size your images to around 1500 pixels wide your storage space should still last a significant time.
I’m also updating our documentation on image optimization to include information about this for others that might run into this issue.
- The topic ‘Image compression destroys photos, how to disable?’ is closed to new replies.
WordPress.com Forums 