How to make it work with Short Pixel

  • Hi,

    On my website, I am using Short Pixel Image Optimizer (SPIO) for generating Webp images. These Webp images are using the <picture> element to allow it to work on many browsers.

    When I use your plugin with SPIO, all the image types inside <picture> are being loaded, making it much slower than before.

    Is there anyway to make it work with <picture> and SPIO?

    Thanks

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Contributor WP Rocket

    (@wp_rocket)

    Hi,

    Do you have an example of the HTML formatting resulting of both ShortPixel and lazyload applied?

    Our plugin supports picture elements, but it might be an issue with priority of the HTML modification both our plugin and ShortPixel do.

    Thread Starter thepoorswiss

    (@thepoorswiss)

    Hi,

    When I enabled both plugins, here is one example of image:

    <picture class="attachment-post-thumbnail size-post-thumbnail wp-post-image sp-no-webp" data-lazy-srcset="https://thepoorswiss.com/wp-content/uploads/2018/11/Automating-your-finances-is-a-mistake.png 735w, https://thepoorswiss.com/wp-content/uploads/2018/11/Automating-your-finances-is-a-mistake-200x300.png 200w, https://thepoorswiss.com/wp-content/uploads/2018/11/Automating-your-finances-is-a-mistake-683x1024.png 683w" data-lazy-sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 60vw, (max-width: 1362px) 62vw, 840px"><source data-lazy-srcset="https://thepoorswiss.com/wp-content/uploads/2018/11/Automating-your-finances-is-a-mistake.webp 735w,https://thepoorswiss.com/wp-content/uploads/2018/11/Automating-your-finances-is-a-mistake-200x300.webp 200w,https://thepoorswiss.com/wp-content/uploads/2018/11/Automating-your-finances-is-a-mistake-683x1024.webp 683w" data-lazy-sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 60vw, (max-width: 1362px) 62vw, 840px" type="image/webp" sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 60vw, (max-width: 1362px) 62vw, 840px" srcset="https://thepoorswiss.com/wp-content/uploads/2018/11/Automating-your-finances-is-a-mistake.webp 735w,https://thepoorswiss.com/wp-content/uploads/2018/11/Automating-your-finances-is-a-mistake-200x300.webp 200w,https://thepoorswiss.com/wp-content/uploads/2018/11/Automating-your-finances-is-a-mistake-683x1024.webp 683w"><source data-lazy-srcset="https://thepoorswiss.com/wp-content/uploads/2018/11/Automating-your-finances-is-a-mistake.png 735w, https://thepoorswiss.com/wp-content/uploads/2018/11/Automating-your-finances-is-a-mistake-200x300.png 200w, https://thepoorswiss.com/wp-content/uploads/2018/11/Automating-your-finances-is-a-mistake-683x1024.png 683w" data-lazy-sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 60vw, (max-width: 1362px) 62vw, 840px" sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 60vw, (max-width: 1362px) 62vw, 840px" srcset="https://thepoorswiss.com/wp-content/uploads/2018/11/Automating-your-finances-is-a-mistake.png 735w, https://thepoorswiss.com/wp-content/uploads/2018/11/Automating-your-finances-is-a-mistake-200x300.png 200w, https://thepoorswiss.com/wp-content/uploads/2018/11/Automating-your-finances-is-a-mistake-683x1024.png 683w"><img data-lazy-src="https://thepoorswiss.com/wp-content/uploads/2018/11/Automating-your-finances-is-a-mistake.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image sp-no-webp lazyloaded" data-lazy-srcset="https://thepoorswiss.com/wp-content/uploads/2018/11/Automating-your-finances-is-a-mistake.png 735w, https://thepoorswiss.com/wp-content/uploads/2018/11/Automating-your-finances-is-a-mistake-200x300.png 200w, https://thepoorswiss.com/wp-content/uploads/2018/11/Automating-your-finances-is-a-mistake-683x1024.png 683w" data-lazy-sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 60vw, (max-width: 1362px) 62vw, 840px" alt="Automating your finances is a mistake" height="1102" width="735" srcset="https://thepoorswiss.com/wp-content/uploads/2018/11/Automating-your-finances-is-a-mistake.png 735w, https://thepoorswiss.com/wp-content/uploads/2018/11/Automating-your-finances-is-a-mistake-200x300.png 200w, https://thepoorswiss.com/wp-content/uploads/2018/11/Automating-your-finances-is-a-mistake-683x1024.png 683w" sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 60vw, (max-width: 1362px) 62vw, 840px" src="https://thepoorswiss.com/wp-content/uploads/2018/11/Automating-your-finances-is-a-mistake.png" data-was-processed="true"></picture>

    With this code, I see two images being loaded in the network: one png and one webp. Which of course is disastrous for performance.

    Plugin Contributor WP Rocket

    (@wp_rocket)

    There is indeed issues with the markup, we’ll have a look to see if it can be resolved.

    Thread Starter thepoorswiss

    (@thepoorswiss)

    Hi,

    Were you able to do anything on this issue?

    Thanks

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to make it work with Short Pixel’ is closed to new replies.