[wordpress插件] Adaptive Images for WordPressWordPress的自适应图像

94

94

Adaptive Images

自适应图像

Resizes and optimizes images delivered to mobile devices, in a transparent way, so that the total download time is dramatically reduced.

以透明的方式调整并优化传递给移动设备的图像的大小，从而大大减少了总下载时间。

It works as a filter between your WordPress website and the devices and seves smaller images to them.

它可以充当WordPress网站和设备之间的过滤器，并为它们保存较小的图像。

Note that this is not a CSS nor a responsive images solution.

请注意，这既不是CSS也不是响应式图像解决方案。

It does not affect your themes layout and style.

它不会影响您的主题布局和样式。

It simply sends smaller images to the devices without them noticing it!

它只是将较小的图像发送到设备，而无需他们注意！

Fundamental goals

基本目标

1. Reduce the total download time of a web page in mobile devices dramatically.
2. 大大减少了移动设备中网页的总下载时间。

3. Work transparantly and unobtrusively by being independant of your theme layout and style.
4. 独立于主题布局和样式，可以透明而轻松地工作。

5. Be agnostic of the yet not-standardised picture element or HTML the img srcset attribute.
6. 与尚未标准化的 picture 元素或HTML img srcset 属性无关。

Side benefits

附带利益

1. Respects search engines and sends them the orginal version of each image.
2. 尊重搜索引擎，并将每张图片的原始版本发送给他们。

3. If it does not recognise a device size it falls back to the original image size.
4. 如果无法识别设备尺寸，则会退回到原始图像尺寸。

5. It is lightweight, because it does not need to load the whole WordPress environment every time it server an image request.
6. 它是轻量级的，因为它不需要在每次处理图像请求时都加载整个WordPress环境。

Supported formats

支持的格式

• JPEG
• JPEG

• PNG
• PNG

• GIF (not animated)
• GIF（非动画）

NOT Supported formats

不支持的格式

• WEBP
• WEBP

• GIF (animated)
• GIF（动画）

CDN/Varnish/external caching services

CDN /清漆/外部缓存服务

Since version 0.6.0 CDN/Varnish/external caching service support has been added as an option, in an experimental mode.

从版本0.6.0开始，CDN / Varnish /外部缓存服务支持以 experimental 模式提供。

This means: i) it is not thorougly tested yet ii) however, it works in almost all test cases so far iii) it bears no dangers to your installation iv) it adds a special url parameter to your image urls, so it is slightly

这意味着：i）尚未经过全面测试ii）但是，它到目前为止可以在几乎所有测试用例中使用iii）对安装没有任何危险iv）在图像url中添加了特殊的url参数，因此略

obtrusive.

令人讨厌。

• Tested with MaxCDN and Varnish up to now.

• 到目前为止，已使用MaxCDN和Varnish测试。

• Cannot handle CSS background images (yet).

• 尚无法处理CSS背景图像。

Cannot work, not even in experimental mode, with CDNs which use a different subdomain for images, because these setups completely bypass WordPress when delivering images.

对于使用其他子域存储图像的CDN，即使在实验模式下也无法使用，因为这些设置在传递图像时会完全绕过WordPress。

Feel free to ask for details on this in the support forum.

随时在支持论坛中询问有关此问题的详细信息。

Default breakpoints

默认断点

• 1024px wide screens
• 1024像素宽屏

• 640px wide screens
• 640像素宽屏

• 480px wide screens
• 480像素宽屏

Since version 0.5.0 and upwards it is configurable whether the plugin should take into account the landscape or the portrait orientation of each device.

从0.5.0版及更高版本开始，可以配置插件是否考虑每个设备的横向或纵向。

HiDPI (high device pixel density or retina) screens are supported too.

还支持HiDPI（高设备像素密度或视网膜）屏幕。

How to test

如何测试

The esiest way to test is with your browser's device emulation mode (Responsive Design Mode) in it' Developer Tools.

最简单的测试方法是在开发人员工具中使用浏览器的设备仿真模式（响应设计模式）。

You can check this out this video https://www.youtube.com/watch?v=hCAC1XUUOvw/ as an example.

您可以查看此视频https://www.youtube.com/watch?v=hCAC1XUUOvw/作为示例。

1. Test with a tool like Webpagetest http://www.webpagetest.org/.

2. 使用Webpagetest http://www.webpagetest.org/之类的工具进行测试。

   Make sure you set the “Emulate Mobile Browser” setting in the “Advanced Settings” > “Chrome” tab.

   确保在“高级设置”>“ Chrome”标签中设置“模拟移动浏览器”设置。

3. Test with an actual mobile device, a smartphone or tablet.

4. 使用实际的移动设备，智能手机或平板电脑进行测试。

   Watch your website load in a snap.

迅速查看您的网站负载。

5. Check the /wp-contents/cache directory to see the /adaptive-images directory and its contents.

6. 检查 / wp-contents / cache 目录以查看 / adaptive-images 目录及其内容。

   This is where the resized images are kept and cached by default.

默认情况下，这是调整大小的图像在此处保留和缓存的地方。

7. View an image straight from a browser and add a "?debug=true" at the end of the url like this "http://www.website.com/wp-content/uploads/2015/01/image.

8. 直接从浏览器查看图像，并在网址末尾添加“？debug = true”，例如“ http://www.website.com/wp-content/uploads/2015/01/image”。

   jpg?debug=true".

   jpg？debug = true”。

   This verifies that the plugin is working and should print useful debug information.

   这将验证插件是否正常工作，并应打印有用的调试信息。

   If you keep seeing your image, then the plugin is not working as expected and the cause is probably a failure to update the .htaccess file properly.

如果您继续看到图像，则表明插件未按预期运行，原因可能是无法正确更新.htaccess文件。

9. Add a "?debug=original" at the end of the url of an image and you will see the orginal version of the image even when a smaller version of it should have been shown.
10. 在图像网址的末尾添加“？debug = original”，即使应该显示较小版本的图像，您也会看到图像的原始版本。

Incompatibilities and issues

不兼容和问题

• The plugin supports Nginx, but the server’s configuration file must be manually configured like this:

  插件支持Nginx，但是服务器的配置文件必须手动配置，如下所示：

  location / {


  位置/ {


  rewrite \.(?:jpe?g|gif|png)$ /wp-content/plugins/adaptive-images/adaptive-images-script.php;


  重写\。（?: jpe？g | gif | png）$ /wp-content/plugins/adaptive-images/adaptive-images-script.php;


  }

  }

• Windows IIS is not supported, but could be manually configured.

  不支持Windows IIS，但可以手动配置。

  Any IIS experts are welcome to contribute.

  欢迎任何IIS专家做出贡献。

• Cannot work, not even in experimental mode, with CDNs which use a different subdomain for images.

• 使用CDN的CDN不能使用，即使在实验模式下也不能使用，该CDN使用其他子域存储图像。

• When using HTTPS/SSL make sure that you update all your website urls and also the urls in your WordPress General
  

• 使用HTTPS / SSL时，请确保更新所有网站URL以及WordPress General中的URL。
  

  settings page, otherwise the plugin will not be able to locate your images.

  设置页面，否则该插件将无法找到您的图片。

• WordPress Multisite (Mu) is not supported (some plans for future support are being discussed).
• 不支持WordPress Multisite（Mu）（正在讨论一些将来的支持计划）。

Stuff to keep in mind

要记住的东西

• The plugin needs to add a little bit of code to your .htaccess file in order to function properly.

• 该插件需要在您的 .htaccess 文件中添加一些代码才能正常运行。

  It removes this code once disabled.

  一旦禁用，它将删除此代码。

  If you are not cool with that, then… tough luck!

  如果您对此不满意，那么……运气不好！

• The plugin does not care whether the device is actually mobile or not.

• 该插件并不关心该设备是否真正可移动。

  It checks the device screen resolution.

  它检查设备的屏幕分辨率。

  If you have set your breakpoints big enough then it should work just as good for desktop devices as well.

  如果您将断点设置得足够大，那么它对于桌面设备也应同样有效。

  However, it targets mostly the mobile ones.

但是，它主要针对移动设备。

• The resized versions of the pictures are kept in a special directory in the /wp-content/cache directory.

• 图片的调整大小版本保存在 / wp-content / cache 目录中的特殊目录中。

  This causes some storage overhead.

  这会导致一些存储开销。

  It is up to you to judge whether this overhead is a sustainable option in your hosting environment.

  您可以自行决定这笔开销是否在您的托管环境中是可持续的选择。

  Usually it is not even remotely compared to the size of your original images directories.

通常，它甚至无法与原始图像目录的大小进行远程比较。

• The plugin does not help with (nor hinder) art direction.

• 该插件无法（也不会阻碍）艺术指导。

  Simple as that.

  就那么简单。

  Art direction https://usecases.responsiveimages.org/#art-direction in responsive images is an entirely different, yet important, problem.

  响应图像中的艺术指导https://usecases.sensitiveimages.org/#art-direction是一个完全不同但重要的问题。

  This plugin does not tackle with it.

  该插件无法解决。

  But it works in a supplementary way without interfering with other solutions that do.

  但是，它以补充方式工作，而不会干扰其他这样做的解决方案。

  This means that you can combine it with any art direction solution.

这意味着您可以将其与任何美术指导解决方案结合使用。

Credits

信用

• The plugin was originally based on the WP-Resolutions plugin https://github.com/JorgenHookham/WP-Resolutions/, but since version 0.3.0 it is a complete rewrite!
• 该插件最初基于WP-Resolutions插件https://github.com/JorgenHookham/WP-Resolutions/，但是自0.3.0版以来，它是一个完全重写的内容！

• Both plugins, WP-Resolutions and this one, have borrowed ideas from the Adaptive Images http://adaptive-images.com/ solution, specially adapted for WordPress.
• 这两个插件，WP-Resolutions和这个插件都从Adaptive Images http://adaptive-images.com/解决方案中借鉴了一些想法，专门针对WordPress。

• Many special thanks to my good friend and colleague Antonis Zachopoulos for the countless times that he provided feedback, ideas and debugging hints.
• 非常感谢我的好朋友和同事Antonis Zachopoulos无数次提供反馈，想法和调试提示。

• Many thanks to @railgunner for the initial idea on the CDN/Varnish/external caching service feature in the plugin support forum.

• 非常感谢@railgunner在插件支持论坛中对CDN / Varnish /外部缓存服务功能的初步构想。

  It showed the way that it was indeed possible!

它显示了确实可行的方式！

• Thank you AJ at WpFASTER.org for being keen to test the above feature in a real environment.
• 感谢WpFASTER.org的AJ热衷于在真实环境中测试上述功能。

• Thank you to the guys over at the Pressidium team for helping with debugging the CDN/Varnish/external caching service feature and providing test environments.
• 谢谢您在Pressidium团队中的工作，帮助您调试CDN / Varnish /外部缓存服务功能并提供测试环境。

• Thank you Andy Gray for helping debugging the weird filesystem path issues in managed hosting environments.
• 感谢Andy Gray帮助调试了托管主机环境中奇怪的文件系统路径问题。

• Thank you @milenoi2016 for helping sort out one of the many cases of WordPress directories setup.
• 感谢@ milenoi2016帮助您整理了许多WordPress目录设置案例之一。

• Thank you @minorgod for the Windows path fix.
• 感谢@minorgod提供Windows路径修复。

• Thank you Mark Gruffer for the global request variable exposure hint.

• 感谢Mark Gruffer提供全局请求变量公开提示。

• And, of course, a million thanks to all of you who provided useful feedback in the early versions of the plugin, where the inevitable glitches, due to server environment variations, were more than a few.
• 当然，要感谢所有人，他们在插件的早期版本中提供了有用的反馈，由于服务器环境的变化，不可避免的故障不只几个。

Please, do let us know how the plugin works (or doesn’t work) for you.

请让我们知道该插件如何为您工作（或不工作）。

We love comments and creative feedback!

我们喜欢评论和创意反馈！