@pavelkunyavskiy

Какие размеры картинок выбрать для responsive?

Добрались руки до responsive картинок. Адски запутанная и непонятная вещь. Все эти picture и srcset

Все дополнительно осложнено тем, что я взялся еще делать свой серверный велосипед - CDN-сервер, пережимающий картинки как мне надо и складывающих их в нужную папочку.

Вроде все подготовил для имплементации, но встал вступор - не могу понять логику выбора самих размеров картинок в пикселях.

Есть ли какие-то распространенные решения, практики? От чего вообще отталкиваться? От статистики размеров устройств, от дизайна верстки или еще от чего-то? И присыпте это еще dpi, плотностью пикселей. Мозг опухает.

Как вы вибираете какие размеры отавать клиенту???
  • Вопрос задан
  • 554 просмотра
Решения вопроса 1
dpr
@dpr
frontend developer
В современной верстке должен по максимуму использоваться вектор. Это снимает кучу проблем.
Разумеется, не все картинки можно/нужно перегонять в вектор. При использовании растра, в общем случае, достаточно две картинки — x1 и x2. X1 — это тот размер, в каком картинка отображается на сайте, x2, соответственно, удвоенный. Например картинка 100х100, к ней делаем ретина-вариант 200х200.
Всё остальное зависит от бюджета проекта.
Есть время/деньги — заморачиваемся. Пилим третий вариант x3, подключаем полифилы для srcset, делаем дополнительные наборы для брикпойнтов в медиазапросах.
Нет времени/денег — тупо грузим везде удвоенные размеры, и указываем реальные в css.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
byte916
@byte916
По большому счёту особого смысла сильно оптимизировать картинку нет. Они просто должны быть разумного разрешения и размера.
Но если очень хочется, то посмотрите какие разрешения выбирают различные библиотеки вроде бутстрапа и других.
По моему опыту, могу сказать что оптимальнее всего для критичных (крупных, наполненных деталями итд) картинок лучше всего делать три размера - для самых маленьких экранов (для мобильных, с размером viewport до 600 включительно), для средних экранов (с размерами до 1920 включительно) и для крупных. И, соответственно делаете картинки нужного размера, ориентируясь на каждый из размеров экрана.
Для некритичных - заниматься смысла нет, много не выйграете. Но если у вас само пережимается под нужные размеры, можете и их пережимать по тем же правилась.

Да, еще для оптимизации - используйте ленивую загрузку картинок (загрузка при прокрутке). Заглушки для картинок (чтобы контент не прыгал пока картинки нет) можно делать с помощью генерируемого svg нужного размера, такая картинка будет весить около 500 байт. Например, по адресу site.ru/svg?x=826&y=800 возвращать svg указанного размера.

Далее, чтобы загружать картинки не по мере прокручивания, а сразу после того как загрузилась вся страница, можно использовать link rel="prefetch". Тогда вся страница загрузится разу, а "ленивые" картинки загрузятся после и положатся в кеш. И пока человек будет крутить, загружаться они будут уже из кеша а не по сети.
Ответ написан
bro-dev
@bro-dev
Очевидно что такого же какого они и на сайте, если у вас картинка на всю ширину страницы значит должна быть 4к.
Ответ написан
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы