Обязательно ли выкладывать изображения в 2к и более?
Всем привет.
Весят чет многовато даже после компрессии. Слышал, что на 2к/4к мониторах изображения на сайтах все равно выглядят неплохо. У самого нет такого, чтобы проверить. Пока выкладываю в разрешении немногим меньше 2к со свойствами 80vw и height: auto (знаю про существование srcset но "время")
Так ли это?
Спасибо.
Дополнительно:
вопрос без контекста - можно выбросить в мусорку.
Ещё и тэгов наклацали щедро, нарушая при этом правила сервиса. Например, причём тут CSS?
Далее. Куда выкладывать? Выкладывают на хостинг.
Целевой контейнер какой? 200 на 500, например? Зачем ему тогда 2к?
Ну и если для Вас сохранить изображение с одинарной плотностью пикселей и двойной, а потом указать атрибут в разметке - время, то не понятно зачем вообще вопрос. Грузите сразу 10к. Пусть Ваши пользователи умрут от ожидания. Особенно с мобильного трафика.
Или наоборот, выкладывайте в одинарной. Буржуимажоры потерпят, зато загрузится быстро.
- CSS т.к. для веба, а не для печати или домашнего просмотра
- зачем цепляться к словам? не ясно что имеется в виду?
- контейнер = размеру итема
- не знаю толком про все эти параметры, редакторами пользуюсь, то качество не то то еще что, готовые им подходят
- с текущим размером никто не умрет
CSS т.к. для веба, а не для печати или домашнего просмотра
А тэг "веб-разработка" тогда зачем? Вопрос ни к CSS ни к HTML отношения не имеет.
- зачем цепляться к словам? не ясно что имеется в виду?
Я не прицепился ни к одному из Ваших слов. Ваш вопрос - недостаточен для понимания проблемы. Накиданы какие то куски.
- контейнер = размеру итема
Какого итема? В том то и вопрос.
Если это фулл скрин секция, то одна логика, если это иконка 20 на 20, то другая.
- с текущим размером никто не умрет
эгоцентричное мышление. Ваш ресурс не единственный в интернете. Каждый если будет думать об экономии трафика пользователя, даже на спичках, глобально в день будет экономить терабайты трафика, если не больше. А если аудитория сайта многочисленная, то даже 1 сэкономленный килобайт может выливаться в приличную экономию в месяц. Причём для вашего хостинга в том числе.
- тут я не могу ничего утверждать, всех переменных не вижу
- интуитивно понял, не фуллскрин, а в чем разница?
- )) философия пошла, да никакое оно не эгоцентрическое, я о таком даже не задумывался, да и по большому счету те кто об этом знает и соблюдает, наверное настолько мало, что они не составляют критическую массу
Вы задаёте вопрос:
Обязательно ли выкладывать изображения в 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. Это всё условно, но мысль, думаю, понятна.
Далее, Вы спрашиваете "обязательно ли", и тут же говорите "но это же отнимает время". И тогда совершенно не понятно зачем Вы пришли что-то спрашивать. Обязательно? Нет. Вы и сами это прекрасно знаете. Работает же? Работает. Контент можно потреблять? Можно. Как тогда это может быть обязательным? Да и раз у Вас такой вопрос, значит сверху от Вас этого никто не требует.
Просто это будет означать, скорее всего то, что на 4к мониторе физический пиксель больше, то есть если близко сидеть к монитору, то будет видна "зернистость". Но это уже совсем другая история.
А можно было просто прочитать 2 статьи :-)
https://habr.com/ru/company/htmlacademy/blog/585864/
https://habr.com/ru/post/150071/
Ответы:
Весят чет многовато даже после компрессии.
Все очень просто. Зависимость размера от ширины - квадратичная.
Это означает что размер картинки растет не линейно а в квадрате от
одного из измерений. И 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К разрешения ситуация станет хуже во много раз.
Поэтому увеличивать разрешение нужно очень осторожно.
- квадратичная*
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Для подсветки синтаксиса кода всех языков программирования на сайте stackoverflow.com можно использовать тег
. Этот тег позволяет выводить код с подсветкой синтаксиса на странице, что делает его более читаемым и понятным для пользователей.
Что касается выкладывания изображений в 2к и более, это зависит от конкретной ситуации. Если изображение необходимо для наглядного объяснения проблемы или решения, то лучше использовать изображение высокого разрешения. Однако, если изображение не является обязательным для понимания ответа, то его можно не выкладывать в таком большом разрешении.
Важно помнить, что развернутый ответ на stackoverflow.com должен содержать все необходимые шаги для решения проблемы пользователя. Это может включать в себя объяснение кода, ссылки на документацию, примеры использования и т.д. Цель ответа - помочь пользователю разобраться с проблемой и предоставить ему полезную информацию для дальнейшего использования.
Таким образом, использование тега
для подсветки синтаксиса кода и выкладывание изображений в зависимости от необходимости поможет создать качественный и информативный ответ на stackoverflow.com.
Для подсветки синтаксиса кода всех языков программирования на сайте stackoverflow.com можно использовать тег