Body: <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>
  
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2020-12-22T12:47:27.387Z
Comments.Text: Can you please update your post to ask a specific question, so we can try to help you?
Comments.UserDisplayName: Ben Croker
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2020-12-23T19:25:14.690Z
Comments.Text: 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
Comments.UserDisplayName: andrew.welch
Tags: <plugin-imageoptimize><amazon>
Title: Using NY Studio Image Optimize Plugin
ThreadText: # 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...
  
  ```
  <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/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"
  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!
  
  **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
  
  