locked
PWA - WebP image file referenced in <img> results in 404 not found RRS feed

  • Question

  • User379720387 posted

    PWA - Progressive Web App

    I was made aware that some of my pictures are too big a file size and negatively impact initial page load. Recommendation was to use WebP format.

    That reduces file size significantly 50-70%.

    Unfortunately, I get a 404 not found in the console.  The file is there.

    Not understanding why this fails.

    Saturday, November 18, 2017 11:08 PM

Answers

  • User347430248 posted

    Hi  wavemaster,

    check if you save jpg or some other image on same location then can you able to use it in your project or not.

    so that we can know that whether the issue is with path or something else.

    also check whether your browser supports webp image or not.

    <picture>
      <source srcset="img/awesomeWebPImage.webp" type="image/webp">
      <source srcset="img/creakyOldJPEG.jpg" type="image/jpeg"> 
      <img src="img/creakyOldJPEG.jpg" alt="Alt Text!">
    </picture>

    other thing, can you post the code?

    I can see that you did not post the code. so we are not able to see what you are doing exactly.

    also let us know which project template you are using for developing the progressive web app.

    we will try to make a test in that template and try to check the result.

    let us know about the project template and code. we will try to provide you further examples.

    Regards

    Deepak

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, November 20, 2017 5:33 AM
  • User991499041 posted

    Hi Wavemaster,

    Here is the tool which will help you to optimize the image on single click.

    Step 1: Download and install the image optmizer from location given.

    Step 2: Check the size of the images in your website by Select All Image >> right click >> Properties.

    Step 3: Right click image folder and click on Optimize images.

    After clicking optimize images, you will get status of % of image optimized as below

    Step 4: Just check the size of the image again.

    Regards,

    zxj

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 21, 2017 9:29 AM

All replies

  • User347430248 posted

    Hi  wavemaster,

    check if you save jpg or some other image on same location then can you able to use it in your project or not.

    so that we can know that whether the issue is with path or something else.

    also check whether your browser supports webp image or not.

    <picture>
      <source srcset="img/awesomeWebPImage.webp" type="image/webp">
      <source srcset="img/creakyOldJPEG.jpg" type="image/jpeg"> 
      <img src="img/creakyOldJPEG.jpg" alt="Alt Text!">
    </picture>

    other thing, can you post the code?

    I can see that you did not post the code. so we are not able to see what you are doing exactly.

    also let us know which project template you are using for developing the progressive web app.

    we will try to make a test in that template and try to check the result.

    let us know about the project template and code. we will try to provide you further examples.

    Regards

    Deepak

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, November 20, 2017 5:33 AM
  • User379720387 posted

    I am doing some optimization to speed things up. My current picture is a png, but it is rather large so the optimizer suggests to replace with WebP.

    <img class="img-responsive" style="cursor: pointer; margin-top:40px;" alt="devices" src="~/Images/BTdevices.png" />

    Simply converted the png to WebP and put it in the same "Images" folder. And the image doesn't load.

    Never realized that WebP browser support is iffy but your question prodded me to investigate. Turns out out it is not universally supported. 

    I am abandoning WebP. Don't want to open up a new can of worms.

    Thanks.

    Monday, November 20, 2017 1:17 PM
  • User991499041 posted

    Hi Wavemaster,

    Here is the tool which will help you to optimize the image on single click.

    Step 1: Download and install the image optmizer from location given.

    Step 2: Check the size of the images in your website by Select All Image >> right click >> Properties.

    Step 3: Right click image folder and click on Optimize images.

    After clicking optimize images, you will get status of % of image optimized as below

    Step 4: Just check the size of the image again.

    Regards,

    zxj

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 21, 2017 9:29 AM