Stack Overflow
Stack Overflow

Questions tagged [webp]

WebP is an open standard for image encoding. It is intended to provide support for animation, metadata, lossless compression, and transparency without the patent or license restrictions of existing formats.

WebP is a new image format that provides lossless and lossy compression for images on the web. WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller in size compared to JPEG images at equivalent SSIM index. WebP supports lossless transparency (also known as alpha channel) with just 22% additional bytes. Transparency is also supported with lossy compression and typically provides 3x smaller file sizes compared to PNG when lossy compression is acceptable for the red/green/blue color channels.

754 questions
4
votes
1 answer

Android convert gif to animated webp

I tried many things to convert a gif file to a animated webp file, but it doesn't work. I firstly created a gif out of a webp/png file and loaded it into a file to save it as webp: //Bitmap from png / webp Bitmap bmpAnimGif =…
Marvin Stelter
  • 289
  • 4
  • 14
4
votes
3 answers

How to get animated webp file with transparent background padding after converting from mp4 file with ffmpeg?

I need to convert mp4 video(1280×720) to webp file(512x512) such that the resulting webp file maintains aspect ratio and also gets entirely contained in 512x512 and the uncovered areas at the top and bottom should be transparent. I tried the…
isharth rastogi
  • 101
  • 2
  • 6
4
votes
1 answer

How to use fallback on picture tag - Safari Webp

I'm using a code like:
Marcos Etcheverry
  • 91
  • 1
  • 6
4
votes
1 answer

WebP format for an Expo app on react-native

How can we enable Webp format for iOS and Android in an Expo project without ejecting.
Shivansh Jagga
  • 1,541
  • 1
  • 15
  • 24
4
votes
3 answers

How to use webp images and support safari

I am trying to use webp images throughout my site due to the better compression. However I am aware that safari does not support webp. The images are loaded using background-image: url("img/img.webp) . I then apply other background properties. I…
Matthew
  • 163
  • 1
  • 10
4
votes
1 answer

WebP fallback images not loading

I'm using a tag to set a responsive image with WebP support. I'm pulling a desktop image and mobile image URLs that have both .web and .jpg files. for each media, I'm giving the .webp version and the .jpg version. What I expect is that if…
AssafA
  • 41
  • 4
4
votes
0 answers

Retina and non retina images on tag

I'm concerned about and srcset on behaviour. I want to load different pictures dependent on: retina / non retina displays screen resolution webp format support Code I've wrote (only for mobile):
micc
  • 41
  • 1
4
votes
3 answers

How to use wepb images in file-loader

I have a React App. I use a file loader in my project for loading images. This is how my config looks in the webpack file: module: { rules: [ { test: /\.(png|jpg|gif|svg|mp4)$/, use: [ …
Anna Miroshnichenko
  • 1,143
  • 1
  • 7
  • 24
4
votes
0 answers

Is there only-css fallback method for setting different background images? (webP+ jpg fallback)

My Problem is that I want to use a WebP-Image as a background-image but I need a fallback-option for old browsers (jpg-Image). I have found a JavaScript Solution in the Internet, where it looks if the browser can use WebP-Images or not but it's not…
klediooo
  • 630
  • 1
  • 7
  • 25
4
votes
1 answer

Can someone walk me through how to use imagemin-webp in my react app (firebase)?

I want to convert all images into webp but I don't know how (programming noob). I built a react app, I have a firebase.json, and I have the script "build": "react-app-rewired build" in my package.json. Where do I put the codes and how to I wire…
changshou
  • 59
  • 4
4
votes
1 answer

Lazy load images (webp, jpg) with picture, source and img tags (React)

I'm trying to implement a lazy-loading image component with React currently. My original solution was a very simple and basic approach. I used Image API and listened to onload event. There is an example of React hook that was handling this…
Kosmetika
  • 20,774
  • 37
  • 108
  • 172
4
votes
1 answer

Animated WebP enecoder for Android

Are there any examples on how to encode animated WebP for Android, or maybe someone was successful and can guide me through it? I have a batch of webP images, and I want to create an animated one from them, There is the libwebp library, however, it…
Nirel
  • 1,855
  • 1
  • 15
  • 26
4
votes
0 answers

Is there any way to set webp image format for google maps embed or through API?

I need to optimize image output from google maps on my page to achieve google page speed audit. Google get me no results about "how to set webp for google maps images"
Oleg Shakhov
  • 426
  • 6
  • 27
4
votes
1 answer

Javascript load Image into Offscreen Canvas, perform webp conversion

I recently used canvas to conert images to webp, using : const dataUrl = canvas.toDataURL('image/webp'); But this takes a lots of time for certain images, like 400ms. I got a warning from Chrome, since it is blocking UI. I would like to use an…
Denis TRUFFAUT
  • 1,017
  • 10
  • 11
4
votes
2 answers

WebP images doesn't display in safari although added polyfill

Google insight told me to convert my JPG images to WebP. It reduced wieght of every image by a half but the issue is that Safari (probably worst browser even edge better please don't use it so it will die) on Mac doesn't display webP. I've added…
BT101
  • 3,666
  • 10
  • 41
  • 90
1 2 3
…
50 51