PWA - WebP image file referenced in <img> results in 404 not found [Answered]RSS

• • Reply
  wavemaster

  Contributor

  2378 Points

  2360 Posts

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

  Nov 18, 2017 11:08 PM|wavemaster|LINK

  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.

  Will "mark as answered" if your answers help me. Will you do the same?
• • Reply
  Deepak Panch...

  Contributor

  2930 Points

  1210 Posts

  Re: PWA - WebP image file referenced in <img> results in 404 not found

  Nov 20, 2017 05:33 AM|Deepak Panchal|LINK

  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

  MSDN Community Support
  Please remember to click "Mark as Answer" the responses that resolved your issue.
  If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
• • Reply
  wavemaster

  Contributor

  2378 Points

  2360 Posts

  Re: PWA - WebP image file referenced in <img> results in 404 not found

  Nov 20, 2017 01:17 PM|wavemaster|LINK

  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.

  Will "mark as answered" if your answers help me. Will you do the same?
• • Reply
  zxj

  Participant

  980 Points

  475 Posts

  Re: PWA - WebP image file referenced in <img> results in 404 not found

  Nov 21, 2017 09:29 AM|zxj|LINK

  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