Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Webp and resize query params together

See original GitHub issue

Describe the bug Requiring an image with both resize and webp query params simultaneously didn’t work. I want to export my png image as webp and also resize the exported webp image to different responsive sizes. Is this a bug or that use case is not possible? Obs: Requires with just one param (?webp or ?resize&sizes…) works normally.

To Reproduce

  1. Install packages:

npm install -D @bazzite/nuxt-optimized-images imagemin-mozjpeg imagemin-pngquant imagemin-svgo webp-loader responsive-loader sharp

  1. Require image with both query params:

const myImage = require('~/assets/images/xxx.png?webp&resize&sizes[]=200&sizes[]=400&sizes[]=800')

  1. Make available on template:

export default { data() { return { myImage } } }

  1. So in template:

<img :srcset="myImg.srcSet" :src="myImg.src" />

Expected behavior So I expected this code render urls to webp responsive images:

<img srcset="/_nuxt/assets/images/xxx--200.webp 200w, /_nuxt/assets/images/xxx--400.webp 400w, /_nuxt/assets/images/faq-balao--800.webp 800w" … />

But I got links to png images:

<img srcset="/_nuxt/assets/images/xxx--200.png 200w, /_nuxt/assets/images/xxx--400.png 400w, /_nuxt/assets/images/faq-balao--800.png 800w" … />


Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:11 (4 by maintainers)

github_iconTop GitHub Comments

mmoolllleecommented, Apr 1, 2020

Seems like there is a new one incoming: herrstucki/responsive-loader#103 Hope to see this coming 😃 Thank’s for your work!

rcpirescommented, Mar 12, 2019

Got it. Thanks @juliomrqz

Read more comments on GitHub >

github_iconTop Results From Across the Web

A picture element to load correctly resized webp images in ...
A `picture` element snippet to load properly resized responsive webp images in browsers that support them.
Read more >
How To Create and Serve WebP Images to Speed Up Your ...
In this tutorial, you will use the command-line tool cwebp to convert images to WebP format, creating scripts that will watch and convert...
Read more >
Generating the URL | imgproxy documentation
Defines how imgproxy will resize the source image. Supported resizing types are: fit : resizes the image while keeping aspect ratio to fit...
Read more >
cyrilwanner/next-optimized-images - GitHub
Provides query params for file-specific handling/settings; jpeg/png images can be converted to webp on the fly for an even smaller size; Provides the ......
Read more >
Image Processing - KeyCDN Support
Currently jpeg , png , webp , and tiff image formats are supported. ... The query parameters can be defined in any order...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found