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

Question

[Андрей Охотников]

У меня есть на беке тулза которая ресайзит изображения, я получаю изображение путем добавления в 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?

Answer 1

[Антон Усачев]

picture обычно используется для retina-дисплеев, посему есть смысл просто давать размер изображения помноженный на два: 360px => картинка 720px в ширину. Причем, это минимальное значение, т.е. начиная с 361px уже картинка ‭1 536‬px (768 * 2).
Ну и желательно пожать картинки, если твоя тулза этого не делает.