Craft CMS Asked on January 7, 2021
I’m trying out the Image Optimize plugin (with Lazyload) but not convinced I have set it up correctly. The resulting code is quite a lot and it’s also creating breakpoints I didn’t create on the field? Additionally, the plugin is creating a lot of individual directories on my S3 server.
Here’s the output HTML for just one image…
<img class="lazyload" src="data:image/jpeg;base64,%2F9j%2F4AAQSkZJRgABAQEAYABgAAD%2F%2FgA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2OTApLCBxdWFsaXR5ID0gNTAK%2F9sAQwAQCwwODAoQDg0OEhEQExgoGhgWFhgxIyUdKDozPTw5Mzg3QEhcTkBEV0U3OFBtUVdfYmdoZz5NcXlwZHhcZWdj%2F9sAQwEREhIYFRgvGhovY0I4QmNjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2Nj%2F8AAEQgAAwAQAwEiAAIRAQMRAf%2FEAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC%2F%2FEALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29%2Fj5%2Bv%2FEAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC%2F%2FEALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5%2Bjp6vLz9PX29%2Fj5%2Bv%2FaAAwDAQACEQMRAD8Ay9HANwhPXy26fVKj1HKTsATgEEZOev8A%2BqiioW5pI%2F%2FZ"
data-srcset="
https://url.cloudfront.net/general/_2200x412_crop_center-center_82_line/679/[email protected] 2200w,
https://url.cloudfront.net/general/_1600x300_crop_center-center_82_line/679/[email protected] 1600w,
https://url.cloudfront.net/general/_1280x240_crop_center-center_82_line/679/[email protected] 1280w,
https://url.cloudfront.net/general/_1024x192_crop_center-center_82_line/679/[email protected] 1024w,
https://url.cloudfront.net/general/_2048x384_crop_center-center_61_line/679/[email protected] 2048w,
https://url.cloudfront.net/general/_730x410_crop_center-center_82_line/679/[email protected] 730w,
https://url.cloudfront.net/general/_1460x821_crop_center-center_61_line/679/[email protected] 1460w,
https://url.cloudfront.net/general/_320x60_crop_center-center_82_line/679/[email protected] 320w,
https://url.cloudfront.net/general/_640x120_crop_center-center_61_line/679/[email protected] 640w"
sizes="100vw" />
Here’s my template code…
{% set optimizedImages = staff.photo.one().fd_optimised %}
<img class="lazyload" src="{{ optimizedImages.placeholderImage() }}"
data-srcset="{{ optimizedImages.srcset() }}"
sizes="100vw" />
My Image Optimize field (fd_optimised) has width variants for:
2200px, 1600px, 1280px, 1024px, 730px and 320px. So where are the 2048px, 1460px and 640px variants coming from?
Many thanks for any advice!
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP