Blurry images on Photon

The originals themselves are quite blurry, like https://www.thenerdystudent.com/wp-content/uploads/2019/03/traktshowsingle.png

Are you using any other plugin to compress the images on upload?

Seems like that’s an issue with those photos.

However on here: https://www.thenerdystudent.com/2019/05/infuse-6/

The photos are blurry yet the originals high quality.

Thanks!

@giacomolaw I’m not really seeing the blur on those images, aside from the text getting blurry because it’s being displayed at a much smaller size than the original. If I take the original and resize just using my browser, that text also appears blurry.

Noting if you want the text to look clear even though the screenshots will need to be displayed at a much smaller size on your site, you might try resizing the windows prior to your screenshots, until they’re quite small (about 696 pixels wide). The text will take up more space, and you might not be able to display as many things on the screen, but it will be easier for your readers to see.

Still, if you’re seeing something else, would you mind getting a side-by-side screenshot so we can see it as well? You can upload it to any service, or to your site, then include the link here.

Thanks in advance.

Oh I just wanted to clarify this as well:

For some reason, all photos regardless of the size I set them in the editor have ?resize=696%2C486&ssl=1 appended to them.

That’s resizing your image to 696 pixels wide, so it will fit your theme. It is also making sure to serve the image with SSL.

If you don’t want the images resized on a desktop, try uploading them at 696px wide to begin with. Hoping this helps!

Okay, thanks. Issue is, they appear blurry: https://imgur.com/a/fVto80f

I would rather that the image just took the size I resized it to in the editor, but this doesn’t appear to be the case.

Here is the original image: https://www.thenerdystudent.com/wp-content/uploads/2019/05/infuseplayer.jpg

Thanks

It looks like we’re being blocked from accessing that image directly.

Can you provide it in a way that it can be publicly accessible?

This might also be why our image CDN can’t properly access the image.

Could it be as I have hotlink prevention?

# prevent hotlinking
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?thenerdystudent.com [NC]
RewriteCond %{HTTP_USER_AGENT} !(.*google.*) [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?facebook.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?twitter.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?reddit.com [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ - [F]

Thanks!

Hi @giacomolaw,

Could it be as I have hotlink prevention?

Yes, that’s likely. Could you try disabling hotlink protection so we can access the original image, or share it in a way that is publicly accessible?

You should be able to view it anyway. Hotlink protection should let you just click the link and see the image.

Hi @giacomolaw,

It doesn’t — I see a 403 (permission denied) error when trying to view the image using the link above.

I’ve verified it can be accessed publicly on a few devices and browsers, so don’t think this is my end.

@giacomolaw, I also see a 403 when clicking that link directly. It’s because your hotlink protection is also preventing anyone who clicks the link from seeing the image, unless they click on the link from Facebook, Twitter, Reddit, etc. I’m not sure if that was your intention, but it does explain why no one can see the image when clicking on that link here. Noting too, if you intend to allow hotlinking on those platforms you’ll want to adjust that.

But if I copy and paste the link into a new browser window, I can see the image, and I can see it was the same image I was looking at earlier.

I understand you’re saying the images look blurry compared to the original, but the original is many times larger than the small version shown on your site:

Original: 2388px wide, 190KB

Optimized to fit your site: 601px wide, 29KB

The bigger one will be clearer because it has a lot more pixels in it. When I resize the original to the same size, I end up with basically the same results.

If I were using a specialized tool such as Photoshop to resize and then selectively sharpen and hand-optimize the image, I could likely get crisper results at 601 pixels with a similar file size. So if you’d like, you could consider resizing your images and optimizing them by hand prior to upload.

Or, you might considering using our Lightbox feature, so that when a user clicks an image, they see a larger (therefore hopefully crisper) version. You can see that in action here, along with a how-to:

https://jetpack.com/support/carousel/#open-a-single-image-in-a-lightbox

Thanks! Your explanation of the hotlinking issue makes sense – is there anywhere I can see how to do it properly, just so it can’t be embedded?

Also, is there anyway to make the lightbox site wide, so I can add it on all images?

Thanks!

is there anywhere I can see how to do it properly, just so it can’t be embedded?

I’d check to see what your host recommends, or if you want to link to an image but never embed, you might just use a referrer hider link, like one from https://href.li/, then allow referrals from that.

Also, is there anyway to make the lightbox site wide, so I can add it on all images?

I don’t have any recommendations for changing all previous images to link to the attachment page, short of actually going through and updating your articles. But if you’ll select Attachment Page next time you insert an image, that should be the default going forward.

Great, thanks!