Last post Nov 21, 2017 09:29 AM by zxj
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.
Nov 20, 2017 05:33 AM|Deepak Panchal|LINK
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.
<source srcset="img/awesomeWebPImage.webp" type="image/webp">
<source srcset="img/creakyOldJPEG.jpg" type="image/jpeg">
<img src="img/creakyOldJPEG.jpg" alt="Alt Text!">
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.
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.
Nov 21, 2017 09:29 AM|zxj|LINK
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.