使用摄影填充和PHP响应式图像

picturefill和PHP：一个强大的响应式图像的二重奏

响应式Web设计取决于有效处理图像。 max-width>有助于图像适应页面维度，但它并没有解决下载不必要的大图像的问题。 本文使用Picturefill JavaScript插件和PHP探讨了一个解决方案，以创建和提供基于屏幕分辨率的最佳尺寸图像。

>

键优点：

• >优化的图像传递： picturefill请求并显示适合不同屏幕分辨率的适当尺寸的图像，最大程度地减少下载时间和数据使用情况。
>自动化图像生成： 跨浏览器兼容性： picturefill确保在不同的浏览器上兼容。
• 它的工作方式：

picturefill使用“源集”，在不同的分辨率下引用不同的图像文件。

元素（或> 元素上的属性）指定这些来源，并且Picturefill根据媒体查询选择了最合适的图像。 PHP按需处理这些图像衍生物的生成。

picture实现：srcsetsizes img

包括picturefill：添加picturefill.js库（和matchmedia.js）到您的html。

1. 元素结构：

   使用

2. picture picture

   php图像生成： php拦截图像衍生物的请求。如果不存在请求的图像，它将使用ImageMagick或GD等库生成它，从而为将来的请求保存调整大小的图像。 此过程涉及：

<picture>
  <source srcset="img/small.jpg" media="(max-width: 400px)">
  <source srcset="img/medium.jpg" media="(min-width: 401px) and (max-width: 800px)">
  <source srcset="img/large.jpg" media="(min-width: 801px)">
  <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174027139259679.jpg"  class="lazy" alt="Responsive Images Using Picturefill and PHP " />
</picture>

>

路由：
3. 定义处理图像请求的路由（例如，

   ）。 >>图像处理：

   >使用库根据请求的大小调整图像大小并保存它。
   >
   • 响应：以适当的标头发送处理的图像。/img/:size/:path/:filename
   考虑：
   • >
   服务器加载：
生成图像按需增加服务器加载。 优化是至关重要的，潜在的缓存产生的图像。

> javaScript依赖性： picturefill依赖于JavaScript。确保启用并正常运行。>

• 替代方案和未来趋势：

  > srcset虽然Picturefill提供了强大的解决方案，但本机浏览器对sizes>和

  的支持正在增长，但可能会降低对JavaScript库的依赖。 但是，服务器端的图像生成方面对于有效的图像管理仍然很有价值。

  > 常见问题（常见问题解答）：

  >

  >原始输入中提供的常见问题解答部分已经写得很好，并回答了有关响应式图像的图片填充和PHP的常见问题。 不需要更改。

以上是使用摄影填充和PHP响应式图像的详细内容。更多信息请关注PHP中文网其他相关文章！