- WEBP
- WEBP li>
- GIF (animated)
- GIF(动画) li>
ul>
CDN/Varnish/external caching services
CDN /清漆/外部缓存服务 h4>
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 em> strong>模式提供。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.
令人讨厌。 p>
- Tested with MaxCDN and Varnish up to now.
- 到目前为止,已使用MaxCDN和Varnish测试。
li>
- Cannot handle CSS background images (yet).
- 尚无法处理CSS背景图像。
li>
ul>
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.
随时在支持论坛中询问有关此问题的详细信息。 p>
Default breakpoints
默认断点 h4>
- 1024px wide screens
- 1024像素宽屏 li>
- 640px wide screens
- 640像素宽屏 li>
- 480px wide screens
- 480像素宽屏 li>
ul>
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(高设备像素密度或视网膜)屏幕。 p>
How to test
如何测试 h4>
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/作为示例。 p>
- Test with a tool like Webpagetest http://www.webpagetest.org/.
- 使用Webpagetest http://www.webpagetest.org/之类的工具进行测试。
Make sure you set the “Emulate Mobile Browser” setting in the “Advanced Settings” > “Chrome” tab.
确保在“高级设置”>“ Chrome”标签中设置“模拟移动浏览器”设置。
li>
- Test with an actual mobile device, a smartphone or tablet.
- 使用实际的移动设备,智能手机或平板电脑进行测试。
Watch your website load in a snap.
迅速查看您的网站负载。 li>
- Check the
/wp-contents/cache
directory to see the /adaptive-images
directory and its contents. - 检查
/ wp-contents / cache code>目录以查看 / adaptive-images code>目录及其内容。This is where the resized images are kept and cached by default.
默认情况下,这是调整大小的图像在此处保留和缓存的地方。 li>
- 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.
- 直接从浏览器查看图像,并在网址末尾添加“?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文件。 li>
- 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.
- 在图像网址的末尾添加“?debug = original”,即使应该显示较小版本的图像,您也会看到图像的原始版本。 li>
ol>
Incompatibilities and issues
不兼容和问题 h4>
The plugin supports Nginx, but the server’s configuration file must be manually configured like this:
插件支持Nginx,但是服务器的配置文件必须手动配置,如下所示: p>
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;
}
} code> p>
li>
Windows IIS is not supported, but could be manually configured.
不支持Windows IIS,但可以手动配置。
Any IIS experts are welcome to contribute.
欢迎任何IIS专家做出贡献。 p>
li>
- Cannot work, not even in experimental mode, with CDNs which use a different subdomain for images.
- 使用CDN的CDN不能使用,即使在实验模式下也不能使用,该CDN使用其他子域存储图像。
li>
- 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.
设置页面,否则该插件将无法找到您的图片。
li>
- WordPress Multisite (Mu) is not supported (some plans for future support are being discussed).
- 不支持WordPress Multisite(Mu)(正在讨论一些将来的支持计划)。 li>
ul>
Stuff to keep in mind
要记住的东西 h4>
- The plugin needs to add a little bit of code to your
.htaccess
file in order to function properly. - 该插件需要在您的
.htaccess code>文件中添加一些代码才能正常运行。It removes this code once disabled.
一旦禁用,它将删除此代码。
If you are not cool with that, then… tough luck!
如果您对此不满意,那么……运气不好!
li>
- 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.
但是,它主要针对移动设备。 li>
- The resized versions of the pictures are kept in a special directory in the
/wp-content/cache
directory. - 图片的调整大小版本保存在
/ wp-content / cache code>目录中的特殊目录中。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.
通常,它甚至无法与原始图像目录的大小进行远程比较。 li>
- 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.
这意味着您可以将其与任何美术指导解决方案结合使用。 li>
ul>
Credits
信用 h4>
ul>
Please, do let us know how the plugin works (or doesn’t work) for you.
请让我们知道该插件如何为您工作(或不工作)。
We love comments and creative feedback!
我们喜欢评论和创意反馈! p>