davidghi
commented
2 years ago Hi,
It may not be the case in all browsers, but in some, when you scale down an image too much, it will appear pixelated, not clearer. The solution would be to use image sizes that are close to the actual size that the image will have inside the slider. You could also use the Conditional Images feature if you want to have different image sizes for different screen sizes.
Best, David
this has been bugging me and it's odd because chromium based browsers are downgrading images in sliders but Chrome itself which is chromium is not downgrading images. Firefox is not either. This is desktop and not mobile browsers. I could possibly increase the image resolution but will increase image file sizes slowing page loads. Images are optimized by either Shortpixel or TinyPNG compression websites. All images are jpg format. David, can you test this on your end on a laptop or desktop monitor and see what you get?
images are 72 dpi 1024px wide. no idea why but the chromium rebranders are making images more blurry and edges or angled lines blurry or pixeled
**** what is frustrating is if you right click images in the slider and chooses "open image in new tab" or however each browser does that you get the actual full size image outside the slider. comparing the images between chromium browsers and chrome itself and firefox the actual images in full scale are identical... in other words the chromium browsers are not altering the full size image.... the images only seem to be lower pixel resolution/quality inside the slider.....
-or- you can click the zoom button on the slider to get the full screen version of the slider and the images are clearer and sharper and less pixelated.
here is an example to play with. look to the right side, the top of the refrigerator is angled. in the large image that line looks fine but inside the slider on the problem browsers i am getting really jagged line and the lights above the window are slightly blurry. When a larger image is shown smaller it SHOULD get clearer / sharper quality but that is not happening from what i am seeing with the problem browsers.
page link with slider at the top: https://www.investorconstruction.com/properties/1519_Mount_Gilead.html
actual photo link: https://ik.imagekit.io/qedavzj7rys/images/properties/1519_Mount_Gilead/1519_Mount_Gilead_kitchen_4.jpg
Now, the images are served from a CDN and i thought possibly it is the CDN that is changing the image but i dont think that is the case when you open the image full size and compare. it would also mean the CDN would send a different quality image for different browsers but the image would be rendered that same size in the slider so that doesn't seem to make sense
I tested this by inspecting the network tab in the browser console checking to see if the image rendered by the CDN has a different image size between a slider rendered image and the image rendered full size and the detail is identical, meaning the CDN is delivering the same image. It is delivering WebP instead of jpeg.
also, if testing by clicking the zoom button on the slider that uses the same image without reloading from the CDN and those larger versions in the zoomed slider are much clearer and sharper and less pixelated as mentioned above.
content-length: 26228 content-type: image/webp