<p>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.</p>
<p>Here's the output HTML for just one image...</p>
<pre><code>&lt;img class=&quot;lazyload&quot; src=&quot;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&quot;

data-srcset=&quot;
https://url.cloudfront.net/general/_2200x412_crop_center-center_82_line/679/pexels-florent@2x.jpg 2200w,
https://url.cloudfront.net/general/_1600x300_crop_center-center_82_line/679/pexels-florent@2x.jpg 1600w,
https://url.cloudfront.net/general/_1280x240_crop_center-center_82_line/679/pexels-florent@2x.jpg 1280w,
https://url.cloudfront.net/general/_1024x192_crop_center-center_82_line/679/pexels-florent@2x.jpg 1024w,
https://url.cloudfront.net/general/_2048x384_crop_center-center_61_line/679/pexels-florent@2x.jpg 2048w,
https://url.cloudfront.net/general/_730x410_crop_center-center_82_line/679/pexels-florent@2x.jpg 730w,
https://url.cloudfront.net/general/_1460x821_crop_center-center_61_line/679/pexels-florent@2x.jpg 1460w,
https://url.cloudfront.net/general/_320x60_crop_center-center_82_line/679/pexels-florent@2x.jpg 320w,
https://url.cloudfront.net/general/_640x120_crop_center-center_61_line/679/pexels-florent@2x.jpg 640w&quot;
sizes=&quot;100vw&quot; /&gt;
</code></pre>
<p>Here's my template code...</p>
<pre><code>{% set optimizedImages = staff.photo.one().fd_optimised %}
&lt;img class=&quot;lazyload&quot; src=&quot;{{ optimizedImages.placeholderImage() }}&quot;
 data-srcset=&quot;{{ optimizedImages.srcset() }}&quot;
 sizes=&quot;100vw&quot; /&gt;
</code></pre>
<p>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?</p>
<p>Many thanks for any advice!</p>

CC BY-SA 4.0
2020-12-22T12:47:27.387Z
Can you please update your post to ask a specific question, so we can try to help you?
Ben Croker
CC BY-SA 4.0
2020-12-23T19:25:14.690Z
ImageOptimize won't create breakpoints you don't specify -- unless you have the "2x" or "3x" checked, in which case you're effectively doubling or tripling the sizes you're asking for
andrew.welch
<plugin-imageoptimize><amazon>
Using NY Studio Image Optimize Plugin
# Using NY Studio Image Optimize Plugin

(Asked by: username_0 on 2020-12-22)

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...


Here's my template code...
{% set optimizedImages = staff.photo.one().fd_optimised %}


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!

**Tags:** plugin-imageoptimize, amazon
> **Comments:**
> **username_1**: Can you please update your post to ask a specific question, so we can try to help you?  
> **username_2**: ImageOptimize won't create breakpoints you don't specify -- unless you have the "2x" or "3x" checked, in which case you're effectively doubling or tripling the sizes you're asking for  

---

## 0 answers

