时间戳

首页 > 解决方案 > 具有高性能的响应式图像

html - 具有高性能的响应式图像

问题描述

我正在制作一个新网站，我想将其配置为在移动版本中加载不同的图像。

我看到了一些可以满足我需求的解决方案。我的问题是什么是高性能的最佳解决方案。有什么解决方案可以防止资源管理器加载不必要的内容。

一种方法是使用 html5 的元素：

<picture>
 <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
 <source srcset="img_flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers">
</picture>

另一种方法是使用 css display 属性：

.img-responsive.mobile {
  display: none;
}

@media only screen and (max-device-width: 480px) {
  .img-responsive {
    display: none;
  }
  .img-responsive.mobile {
    display: block;
 }
}
<body>
    <img src="img_flowers.jpg" class="img-responsive careerpage">
    <img src="img_smallflower.jpg" class="img-responsive careerpage mobile">  </body>

我不知道还有什么其他方法。我想知道高性能的最佳选择是什么谢谢

标签： htmlcssresponsive-design

解决方案

您需要做的就是为 img-responsive 类设置一些 CSS 属性，例如：

.img-responsive {
  width: 100%;
  max-width: 400px;
  height: auto;
}

推荐阅读