tsepen
@tsepen
Frontend developer

Задать оптимальные размеры изображений?

У меня есть на беке тулза которая ресайзит изображения, я получаю изображение путем добавления в url ширины картинки - например /rest/V1/images/300/product/6/1816022000_97.jpg

300 - ширина в пикселях.

я создаю объект с вариантами размеров
const imgSizes = {
    mobile: 320,
    tablet: 768,
    desktop: 1024
  };


На фронте картинку отображаю через picture
<picture>
      <source srcSet={`${API_URL}/images/${imgSizes.mobile}/${image}`} media="(max-width: 767px)" />
      <source
        srcSet={`${API_URL}/images/${imgSizes.tablet}/${image}`}
        media="(min-width: 768px) and (max-width: 1024px)"
      />
      <img src={`${API_URL}/images/${imgSizes.desktop}/${image}`} alt={alt} />
    </picture>


Так вот какие лучше дефолтные значения задать в imgSizes?
  • Вопрос задан
  • 83 просмотра
Пригласить эксперта
Ответы на вопрос 1
rockfeeler
@rockfeeler
Фронтендер, дизайнер, верстальщик-перфекционист
picture обычно используется для retina-дисплеев, посему есть смысл просто давать размер изображения помноженный на два: 360px => картинка 720px в ширину. Причем, это минимальное значение, т.е. начиная с 361px уже картинка ‭1 536‬px (768 * 2).
Ну и желательно пожать картинки, если твоя тулза этого не делает.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы