pixeled images bacuse of wp resize
-
Hi,
I have jst found out a quirky behaviour with Meta Slider or WordPress or Jetpack…
Fact is: I made a slider width 1024 px which contains an image which has an original 1152 widthas metaslide includes those images with the
?resize=1156%2C520 or
?fit=1156%2C520
url parameter, the images get resized by wordpress resulting in ugly pixelations:
example:
https://i1.wp.com/canelodigital.cl/bsv/wp-content/uploads/2021/06/CrewDelanteFurgon.jpeg
https://i1.wp.com/canelodigital.cl/bsv/wp-content/uploads/2021/06/CrewDelanteFurgon.jpeg?resize=1024%2C300as you also see, the wordpress site is using jetpack, but fact is that the resize url option messes up things as it pixelates a bigger image when making it smaller, which is just weird.
Unfortunately I need in this install Jetpack for building nicer galleries wih masonry layout… so I’m kind of clueless on how to prevent this aberration 😉I also tried other settings in metaslider (as imagecrop: standard or disabled), but without success
PS: I have deactivated jetpack for test reasons, and the problem persists, only the image URL’s change:
http://canelodigital.cl/bsv/wp-content/uploads/2021/06/CrewDelanteFurgon-1024×400.jpeg
http://canelodigital.cl/bsv/wp-content/uploads/2021/06/CrewDelanteFurgon.jpegit is this wordpress resizing which produces pixelation…
Thx
- This topic was modified 2 years, 10 months ago by canelodigital.
The page I need help with: [log in to see the link]
-
Hi,
Thank you for pointing that out. This is actually a WordPress limitation. MetaSlider uses WordPress’ default cropping function image_resize_dimensions to resize the images.
The same would happen if you view the image on any default WordPress custom sizes such as thumbnail, medium, and large. If you want to preserve the high quality image, I would suggest to disable the cropping. Of course this will also have a larger size compared to the cropped image.
Cheers,
ArreaneThanks Arreane,
The option I actually hoped for would be to use the browser/css resize functions, meaning the ablity to load full image and resize it with e.g. background-size (which off course means the image would have to be set as background, and not an image itself), because I’ve noticed, that when I set the croppping to disable, the size attributes of the slider get not applied and it takes the full image size.
As mentioned, to have slides as background images and scale them with background-size would be a pretty neat workaround, or at least great way to have as another option in the cropping-settings…
Cheers
Patrick
Hi,
Yes, that would be possible. I’ve made a custom CSS code for you. I believe this is what you want to achieve. You can try and copy the following code below and paste it in your css file:
#metaslider_570 .slides .ms-image { background: transparent none no-repeat center center / cover scroll }
#metaslider_570 .slides .slide-571 { background-image: url(http://canelodigital.cl/bsv/wp-content/uploads/2021/06/SoyDonanteObsequios.jpeg); }
#metaslider_570 .slides .slide-572 { background-image: url(http://canelodigital.cl/bsv/wp-content/uploads/2021/06/FurgonDeLado.jpeg); }
#metaslider_570 .slides .slide-573 { background-image: url(http://canelodigital.cl/bsv/wp-content/uploads/2021/03/Galeria20.jpeg); }
#metaslider_570 .slides .slide-574 { background-image: url(http://canelodigital.cl/bsv/wp-content/uploads/2021/06/CrewDelanteFurgon.jpeg); }
#metaslider_570 .slides img {
opacity: 0;
pointer-events: none;
}Hope this helps, let us know if you need anything else.
Cheers,
Arreane
- The topic ‘pixeled images bacuse of wp resize’ is closed to new replies.