Адаптивные изображения с высокой производительностью - PullRequest
Новая
       12

Адаптивные изображения с высокой производительностью

0 голосов
/ 26 мая 2019

Я создаю новый веб-сайт и хочу настроить его для загрузки другого изображения в мобильной версии.

Я видел некоторые решения, которые могут соответствовать моим потребностям. Мой вопрос в том, что является лучшим решением для высокой производительности. Какое решение будет препятствовать загрузке проводником ненужного содержимого.

Один метод использует элемент 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: 

.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>

Я не знаю других методов. Я хотел бы знать, что является лучшим вариантом для высокой производительности спасибо

1 Ответ

0 голосов
/ 26 мая 2019

Все, что вам нужно сделать, это установить несколько атрибутов CSS для класса img-responseive, например: 

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