Ads Top

What is the webp image?


How to use webp image example?

webp is a new image format for the web this format is developed by Google. we can use it as same using images as png, jpg, gif, and others. it's smaller in size 26 to 34% as other images. But now at this time not supporting at WordPress cms. 

If you want webp image then you can go online and convert your image with webp format. This URL good for me: https://image.online-convert.com/convert-to-webp

You can see below some example:


<!DOCTYPE html>
<html>
<head>
<style>
.webpBackgroundbackgroundurl(anythinglearn.webpno-repeat 0 0width294pxheight91pxmargin40px 0font-size18pxfont-familyArialHelveticasans-serif;}
.webpBackgroundColorbackground:#0bf url(anythinglearn.webpno-repeat 0 0width294pxheight91pxpadding25pxfont-size18pxfont-familyArialHelveticasans-serif;}
h1{font:normal 30px ArialHelveticasans-serifmargin0; }
h2,h3{font:normal 24px ArialHelveticasans-serifmargin0; }
.boxWebpborder3px solid #cccpadding10px;margin20px 0;}
</style>
</head>
<body>
   <div class="boxWebp">
    <h1>WebP image</h1>
    <div><img src="anythinglearn.webp" alt="anything"></div>
  </div>
  <div class="boxWebp">
    <h2>WebP image in the background</h2>
    <div class="webpBackground">Webp in the background</div>
  </div>
  <div class="boxWebp">
    <h3>WebP image we can use with transparency</h2>
    <div class="webpBackgroundColor">Webp in the background</div>
  </div>
  <div class="boxWebp">
    <h3>This is normal image in png format</h3>
    <div><img src="anythinglearn.png" alt="anything"></div>
  </div>
</body>
</html>



No comments:

Copyright Reserved to Anything Learn. Powered by Blogger.