У меня есть картинка (иконка даже скорее всего, в png).
Размер порядка 500 пикселей в ширину.
Размер самого файла порядка 3 кбайт.
На сайте иконка стоит с параметром width:50px пикселей (но, за счёт запаса оригинала, хорошо отображается, мне так кажется...)
Начальник утверждает, что раз размер иконки стоит 50px, то и оригинал должен быть точно таким же! Иначе это съедает память и сайт будет медленнее работать.
Хотелось бы аргументировано получить ответ, насколько это правда?
(такое видел на сайте apple, у них картинки кажется так сделаны: размер на сайте = размеру оригиналу)
Согласен, но при загрузке каждый пиксель отработать...
предположим однотонный png размером в 2000 пикселей будет весить "понты",
но ведь каждый пиксель вывести, отобразить...
Ведь архив тоже сжимает текст и может весить порой очень мало, но распаковка сколько времени занимает, а ведь в картинке применяется метод сжатия...
Мне нужно аргументированно начальнику рассказать :)
Изучите предмет: habrahabr.ru/post/237931
При использовании ретина экранов (планшеты, смартфоны, новые ноутбуки и т.п.) использовать картинки физически большего размера оправдано.
Единственное что, лучше конечно отдавать каждому браузеру свой вариант картинки. Множитель DPI можно проверить с помощью Media queries в CSS и на основе этих данных принять решение.
С этого момента подробнее? На ретине она останется в 50 пикселей, зачем 100px делать? У картинки есть разрешение, оно интересно как-то влияет? Если да, то здесь наверное нужно делать что-то...
Александр Петров: Поэтому для всяких значков и элементов дизайна стараться переходить на svg, для обычных картинок и 100% размера достаточно для любых экранов.
картинка весит 3кбайт, столько и будет съедать, все просто, Ватсон
Если картинка где нибудь еще используется с большим размером, то можно оставить, иначе смысл оставлять такую картинку? Формула простая - оставляете максимально нужный размер, естественно, есть кучу моментов, когда эта формула не работает.
Есть много тем на тему как оптимизировать
>3кбайт, столько и будет съедать
Ложь. Будет съедать (ширина*высота*глубина цвета) байт - и это минимум, на практике будет больше минимум в 2 раза, так как на gpu еще нужно выгрузить.
3кб - сжатый размер.
Александр Таратин: ну ведь пользователь загрузит те самые 3кбайт , а не больше О_О я это и имел в виду под - "съедает" , дальше уже я не знаю как на стороне браузера он рендерится