Images are blurry when site is loaded and browser is below 775px width

[dani10201126]

Hello,

I have a strange problem. The images on my site appear blurry when the site is loaded and the browser width is below 775px. For example if you are using an iphone (Safari) and you load the site in portrait layout, you have to flip the phone to landscape and then refresh the site in order for the pictures to become clear. Once refreshed you can flip the phone back to portrait and the pictures will remain clear.

Another example. If you set your desktop browser (Chrome) to a width below 775px and load the site the images will be blurry. Slowly increase the width and you will notice the images become clear once the width is greater then 775px.

This seems to be Chrome and Safari related as IE (Desktop) works fine and Android devices work fine as well.

zxndesignco.com

Really appreciate any help
Thanks
Brandon

[Beverleyh]

The grey triangular ‘pipes’ image? I can’t say I see the problem.

Might be related to image-rendering though https://css-tricks.com/almanac/properties/i/image-rendering/

BTW – If you want people to go deeper into your site, you should link to the actual problematic page (the one that exhibits the undesirable behaviour). Unfortunately, linking to the main domain can come across as spammy and can get you banned on some forums for self-promo and S-E-O concerns.

[dani10201126]

Hi Beverleyh, thanks for the info. You can really see the issue on this image (https://zxndesignco.com/c-s/). If you go into chrome and make your browser width under 775px then load that url (https://zxndesignco.com/c-s) and zoom into one of those two bracelets you will see the image is blurry. Start to slowly expand the width of the browser and you will see at some point (around 775px) the image becomes much more clear. It’s apparent if you make sure to keep looking at one of the two bracelets as you increase the border width.

[Beverleyh]

Your website is using srcset to load in different sized images depending on browser width;
https://zxndesignco.com/wp-content/uploads/2017/02/BannerCSTop-300×80.jpg
https://zxndesignco.com/wp-content/uploads/2017/02/BannerCSTop-768×204.jpg
https://zxndesignco.com/wp-content/uploads/2017/02/BannerCSTop-1000×266.jpg
https://zxndesignco.com/wp-content/uploads/2017/02/BannerCSTop-1024×272.jpg
https://zxndesignco.com/wp-content/uploads/2017/02/BannerCSTop.jpg

You can see that the smaller images are not as crisp as the higher resolutions, in particular the 300 x 80 one.

I expect that the images are being auto-generated somewhere in your CMS? You might be able to change quality settings for smaller image/thumbnail generation in the admin panel (sorry, I’m not that familiar with WordPress so can’t offer any suggestions as to where) or disable them altogether (to the detriment of mobile users who’ll then be loading in heavier images meant for desktop), or just disable the very smallest? That’s something for you to investigate at your side – maybe via an installed plugin.

Alternatively, you might be able to manually create and upload the different sized images after manipulating the quality yourself, although this will impact upon your workload considerably if you have a lots of images on your site.

[Author]

Posts