Обязательно ли выкладывать изображения в 2к и более?

Question

[aliasmark]

Всем привет.

Весят чет многовато даже после компрессии. Слышал, что на 2к/4к мониторах изображения на сайтах все равно выглядят неплохо. У самого нет такого, чтобы проверить. Пока выкладываю в разрешении немногим меньше 2к со свойствами 80vw и height: auto (знаю про существование srcset но "время")
Так ли это?

Спасибо.

Comments

[Вадим]

вопрос без контекста - можно выбросить в мусорку.
Ещё и тэгов наклацали щедро, нарушая при этом правила сервиса. Например, причём тут CSS?

Далее. Куда выкладывать? Выкладывают на хостинг.

Целевой контейнер какой? 200 на 500, например? Зачем ему тогда 2к?

Ну и если для Вас сохранить изображение с одинарной плотностью пикселей и двойной, а потом указать атрибут в разметке - время, то не понятно зачем вообще вопрос. Грузите сразу 10к. Пусть Ваши пользователи умрут от ожидания. Особенно с мобильного трафика.
Или наоборот, выкладывайте в одинарной. Буржуи\мажоры потерпят, зато загрузится быстро.

[aliasmark]

Вадим,
- CSS т.к. для веба, а не для печати или домашнего просмотра
- зачем цепляться к словам? не ясно что имеется в виду?
- контейнер = размеру итема
- не знаю толком про все эти параметры, редакторами пользуюсь, то качество не то то еще что, готовые им подходят
- с текущим размером никто не умрет

[Вадим]

aliasmark,

CSS т.к. для веба, а не для печати или домашнего просмотра

А тэг "веб-разработка" тогда зачем? Вопрос ни к CSS ни к HTML отношения не имеет.

- зачем цепляться к словам? не ясно что имеется в виду?

Я не прицепился ни к одному из Ваших слов. Ваш вопрос - недостаточен для понимания проблемы. Накиданы какие то куски.

- контейнер = размеру итема

Какого итема? В том то и вопрос.
Если это фулл скрин секция, то одна логика, если это иконка 20 на 20, то другая.

- с текущим размером никто не умрет

эгоцентричное мышление. Ваш ресурс не единственный в интернете. Каждый если будет думать об экономии трафика пользователя, даже на спичках, глобально в день будет экономить терабайты трафика, если не больше. А если аудитория сайта многочисленная, то даже 1 сэкономленный килобайт может выливаться в приличную экономию в месяц. Причём для вашего хостинга в том числе.

[aliasmark]

- а зачем тогда все эти вопросы про контейнеры, итемы, секции?) ну разбираются если люди из этой сферы, не аниматоров же или тех кто макеты в фотошопе создает мне отмечать))
- тут я не могу ничего утверждать, всех переменных не вижу
- интуитивно понял, не фуллскрин, а в чем разница?
- )) философия пошла, да никакое оно не эгоцентрическое, я о таком даже не задумывался, да и по большому счету те кто об этом знает и соблюдает, наверное настолько мало, что они не составляют критическую массу

[Вадим]

aliasmark, давайте по полочкам.
Вы задаёте вопрос:

Обязательно ли выкладывать изображения в 2к

2к это 2048×1080. Если render size картинки 500 на 500 пикселей, то зачем там 2к, который в 4 раза больше по ширине и в 2 раза больше по высоте?
Отсюда и вопрос, КУДА вы хотите "заливать".

Другое дело, если Вы спрашиваете про использование изображений с двойной плотностью пикселей. Это совсем не то же самое. Тогда оригинальный размер изображения будет 1000 на 1000, хотя render size так и останется 500 на 500 и на экранах с двойной плотностью пикселей, aka ретина, изображение будет выглядеть чётче чем изображение с одинарной плотностью пикселей(то есть само изображение тоже было бы 500 на 500).

Далее, если картинка маленькая, то и ужимать её можно больше, так как 1) на небольшие изображения пользователем уделяется меньше внимания, 2) на маленьком изображении далеко не всегда важна чёткость. Так, например, если у нас одна и та же картинка на одном сайте фулл скрин(1920 на 1080), то, скажем, в целях оптимизации мы зададим ей качество 80. А на другом сайте, где эта картинка лишь превью к посту, скажем, 200 на 200, мы зададим выходное качество 40. Это всё условно, но мысль, думаю, понятна.

Далее, Вы спрашиваете "обязательно ли", и тут же говорите "но это же отнимает время". И тогда совершенно не понятно зачем Вы пришли что-то спрашивать. Обязательно? Нет. Вы и сами это прекрасно знаете. Работает же? Работает. Контент можно потреблять? Можно. Как тогда это может быть обязательным? Да и раз у Вас такой вопрос, значит сверху от Вас этого никто не требует.

[Вадим]

aliasmark, ну и совершенно непонятно причём тут 2к и 4к мониторы. Если у нас есть 2 монитора, один рассчитан на full hd, а второй на 4к, но у них одинаковая плотность пикселей, и мы говорим про изображение, которое рендерится в, условно, 500 на 500 пикселей, а не в фулл скрин, то и изображение им можно отдавать одинаковое.
Просто это будет означать, скорее всего то, что на 4к мониторе физический пиксель больше, то есть если близко сидеть к монитору, то будет видна "зернистость". Но это уже совсем другая история.

[aliasmark]

Вадим, больше половины дня вчера пытался осознать написанное вами про ppi, dpi, разрешение. Пришлось вернуться в школьную геометрию и физику: теорему Пифагора, соот-ие между сторонами и углами, свет, волна ‍:facepalm В теорию куда-то меня понесло. Спасибо за четкий развернутый ответ, вы интересный собеседник :handshake

[Вадим]

aliasmark,
А можно было просто прочитать 2 статьи :-)
https://habr.com/ru/company/htmlacademy/blog/585864/
https://habr.com/ru/post/150071/

Answer 1

[mayton2019]

Весят чет многовато даже после компрессии.

Все очень просто. Зависимость размера от ширины - квадратичная.
Это означает что размер картинки растет не линейно а в квадрате от
одного из измерений. И JPEG/WebP здесть не помогает т.к его алгоритмы
не меняютс своих свойств от размера. Обычно ты задаешь коэфф сжатия
или он берется по дефолту. Ставить более сильное сжатие нет смысла
т.к. портится качество мелких деталей. А если портить - то нахрена
увеличивать размер?

Пример такого расчета в сыром размере RBG байтов:

Разрешение FullHD 1920 x 1080 = 2073600 pix = 2073600 * 3 = 6 220 800 bytes
Тоже самое в два раза больше в поперечнике 3840х2160 = 8294400 pix = 24 883 200 bytes
Итого размер стал в 3 раза больше. Для 8К разрешения ситуация станет хуже во много раз.

Поэтому увеличивать разрешение нужно очень осторожно.

Comments

[ThunderCat]

квадратичная*