A-A+

如何使WebP格式的图片在WordPress正常使用?

2018年11月07日 WordPress, 学习小计 暂无评论 阅读 20 次

WebP是由谷歌研发一种比以往更快地提供图像的现代格式。 如果您使用的是WordPress,您可以通过一些基本的调整轻松地为WebP中的所有图像提供服务。现在我们要耐心地加油努力作如下准备工作。

webp

在本文中将展示在不使用任何插件的情况下,如何实现WebP图像以在支持的Web浏览器上自动提供。 目前,Google Chrome,Opera,Mozilla Firefox,Microsoft Edge和一些Android浏览器都直接支持WebP。 根据Google 分析报告,您可能会发现超过49%的人使用这些受支持的内容类型浏览器。 所以,现在已经是采用这种webp图形技术的时候了。

使用WebP格式图像的主要好处是什么?

  • 与普通JPG或PNG图像的大小相比,相同维度图像WebP可以以更少字节服务。 因此,您的图像将加载更快。
  • 以更少字节提供高质量图像意味着以更智能的方式显着节省网络带宽。
  • 随着市场趋势保持您的网站更新。 不再因为老牛破车式加载问题而失去对话(潜在用户)。

我喜欢尽可能快地提供网站服务,因此我也开始在我的wordpress博客上实现这项技术。 所以,现在一步一步地与你分享这些有用的提示。

 

第1步:在HTML文档中添加WebP格式

首先,您需要转换WebP中的所有图像以及之前的图像格式作为后备。 像Optimus这样的插件可以自动完成这项工作。 但是,我将自己手动显示另一个容易做到的事情。

  1. 转到此网站image.online-convert.com/convert-to-webp
  2. 粘贴您的图像链接,然后单击转换。 将下载您的WebP格式图像
  3. 现在来编辑正常图像出现的原始HTML代码。

比方说,在开始你的图像HTML代码是这样的

<img src =“https://21pt.com/wp-content/uploads/2016/09/webplogo.png”alt =“gulshan kumar”width =“186”height =“66”/>
你需要用更多的HTML标记包装上面的代码。

<picture> <source srcset =“https://21pt.com/wp-content/uploads/2016/09/webplogo.webp”type =“image/webp”/> <img src =“https//21pt.com/wp-content/uploads/2016/09/webplogo.png“alt =”gulshan kumar“width =”186“height ="66"/> </ picture>

现在,您的HTML文档已准备好以WebP格式提供图像了。

 

第2步:配置服务器设置

下一步,您需要通过.htacccess配置一些Apache Web服务器设置,以便浏览器和Web服务器可以像所有其他映像一样正确地处理它。

您的虚拟主机服务器可能不知道他们需要从哪种mime类型这种格式图像服务。 所以必须添加适当的mime类型。 此外,为缓存设置到期标头也是需要的。

# Serve Images with correct Mime Type

AddType image/webp .webp

# Setup Cache

ExpiresActive On

ExpiresByType image/webp A2592000

 

请注意:默认情况下,WordPress不支持上传WebP格式图像。 因此,必须通过在主题函数中添加此代码来解决此问题。如果您将直接从WordPress仪表板->媒体选项直接上传图像,这些代码改动将会很有帮助。

要将下列一段代码添加到当前使用的主题的 functions.php文件里

function webp_upload_mimes( $existing_mimes ) {
	// add webp to the list of mime types
	$existing_mimes['webp'] = 'image/webp';

	// return the array back to the function with our added mime type
	return $existing_mimes;
}
add_filter( 'mime_types', 'webp_upload_mimes' );

完成!

如果您需要任何帮助,请随时在评论部分询问我。 我很乐意帮助你。 将来,我将继续分享一些有关优化WordPress的有用技巧。 您可以订阅我的博客以获得更多精彩更新。

进一步阅读
如果您想了解有关WebP的更多信息,请参阅下面这些链接。

  • https://developers.google.com/speed/webp/
  • https://en.wikipedia.org/wiki/WebP

多谢!!!

在vsp测试通过!!!

附原文:

How to Serve WebP Format Images in WordPress

WebP is a modern format for serving images faster than ever. If you are using WordPress, you can easily serve all images in WebP with some basic tweaks. So be ready for hard work with patience.
webp
Learn about Browser Support • Benefits • Implement WebP in WordPress with Fallback • Convert to WebP

In this article, I will show that without using any plugin how I have implemented WebP images to serve automatically on supported web browser. WebP is currently supported in Google Chrome, Opera, Mozilla Firefox, Microsoft Edge and some Android browsers. According to Google Analyticsreports you may find that more than 49% people uses these supported content type browser. So, it’s high time to go with this technique.

What are the major Benefits of using WebP format Image?

  • In comparison to the size of normal JPG or PNG image, same dimension image WebP can serve in small bytes. Hence, your Images will load faster.
  • Serving Quality Images in small bytes, means dramatically saving bandwidth in a smarter way.
  • Keep your website updated with the market trend. Don’t loss conversation just due to bull-cart style loading problem.

I love to serve website faster as possible as, so I have also started implementing this technique on my blog. So, I thought to share this useful tips with you step by step.

Step 1 : Adding WebP format in HTML Document

First, you need to convert your all images in WebP and along with your previous image format as the fall-back. There is  some plugin like Optimus which can do this job automatically. But, I will show an another easy to do this manually.

  1. Go to this website image.online-convert.com/convert-to-webp
  2. Paste your Image Link and click on convert. Your WebP format images will be downloaded
  3. Now edit the raw HTML code where your normal Image is appearing.

Let say, in beginning your Image HTML code was like this

<img src="https://gulshankumar.net/wp-content/uploads/2016/09/webplogo.png" alt="gulshan kumar" width="186" height="66" />

You need to wrap above code with little more HTML markup.

<picture><source srcset="https://gulshankumar.net/wp-content/uploads/2016/09/webplogo.webp" type="image/webp" /><img src="https://gulshankumar.net/wp-content/uploads/2016/09/webplogo.png" alt="gulshan kumar" width="186" height="66" /></picture>

Now, Your HTML document is ready to serve images in WebP format.
Step 2 : Configure server settings
Just one more step, you need to configure some Apache Webserver settings via .htacccess so browser and web server can treat it properly like all other images.

Your Web Hosting server may don’t know from which mime type this kind of format images they need to serve. So must add proper mime type. Also, it would be worth to setup expiry header for caching.

# Serve Images with correct Mime Type
AddType image/webp .webp

# Setup Cache
ExpiresActive On
ExpiresByType image/webp A2592000

Kindly note: WordPress by default do not support uploading of WebP format image. So, must fix this issue by adding this code in your theme functions.php It would be helpful in case if you will upload your images directly from WordPress Dashboard > Media option.

function webp_upload_mimes( $existing_mimes ) {
	// add webp to the list of mime types
	$existing_mimes['webp'] = 'image/webp';

	// return the array back to the function with our added mime type
	return $existing_mimes;
}
add_filter( 'mime_types', 'webp_upload_mimes' );

Done.

If you need any help, please feel free to ask me in the comment section. It would be my pleasure to help you. In future, I will continue to share some more useful tips on optimizing WordPress. You may subscribe to my blog for more cool updates.

Further readings
If you are curious to learn more about WebP, please refer these links.

Thanks.

给我留言

Copyright © 浩然东方 保留所有权利.   Theme  Ality 07032740

用户登录