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>
.webpBackground{ background: url(anythinglearn.webp) no-repeat 0 0; width: 294px; height: 91px; margin: 40px 0; font-size: 18px; font-family: Arial, Helvetica, sans-serif;}
.webpBackgroundColor{ background:#0bf url(anythinglearn.webp) no-repeat 0 0; width: 294px; height: 91px; padding: 25px; font-size: 18px; font-family: Arial, Helvetica, sans-serif;}
h1{font:normal 30px Arial, Helvetica, sans-serif; margin: 0; }
h2,h3{font:normal 24px Arial, Helvetica, sans-serif; margin: 0; }
.boxWebp{ border: 3px solid #ccc; padding: 10px;margin: 20px 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:
Note: Only a member of this blog may post a comment.