subzey Jun 26 2013 at 02:06

Изображения: форматы и сжатие (2/3)

19 min

46K

TradingView corporate blog Algorithms *Image processing *

+144

Comments 33

Brutt Jun 26 2013 at 02:24

Отличный фокус с квадратиком! Не дочитав статью, понаоткрывал браузеров

UFO just landed and posted this here

nick4fake Jun 26 2013 at 03:59

— Да, например, чтобы меньше разбухал CSS, где эти картинки внедрены как data:uri.
Для этого и используют спрайты.

Rational_Yurij Jun 26 2013 at 10:11

Результаты использования спрайтов:
1) увеличение размера картинок, т.к. сразу же разбухают палитры.
2) Насилие над браузером, которому приходится по несколько раз отрисовывать целую картинку, хотя от нее (оказывается) нужна всего лишь небольшая часть.
3) циферкоблудие с подгоном background-position для каждого нужного элемента.
4) изменение всего спрайтового файла в случае изменения/добавления одной картинки (и как результат — прекрасная возможность одним действием испортить сразу все).
5) усложнение документации и процедуры ее ведения, т.к. приходится еще и вести учет, где по какому смещению у нас какая картинка лежит.

shara Jun 26 2013 at 10:20

1) Возможно это компенсируется отсутствием зарезервированных полей для каждого изображения и метадаты всякой.
2) Насколько я понимаю 1 картинка находится памяти и отрисовывается только та часть, которую нужно отобразить. Это первоочередная оптимизация движка браузера.
+) Сокращение количества запросов к серверу, а это уже внушительное количество миллисекунд.

С остальным согласен

nick4fake Jun 26 2013 at 10:50

1. Вы говорили, что для маленьких картиног нужен gif. Я привел пример, как можно его заменить png-спрайтами, и там нет проблемы с палитрой
2. А с чего вы взяли, что браузер одну и ту же картинку перерисовывает? Скорее всего хранит в буфере, и каждый раз как она нужна берет только кусок.
3. Вы слышали про SASS? Компиляторы CSS/спрайтов? О том, что в спрайтах смещение в процентах можно задавать?
4. Опять таки, компиляторы. И вообще, странное замечание. А изменением кода нельзя испортить все?
5. И в третий раз говорю, что есть компиляторы. А писать смещение картинки в документации — странно. Лучше их называть по классам (например, .currecny.uah, .currency.rur), т.к. смещение может измениться

6. Есть только один серьезный минус — в книжках по php не пишут, как пользоваться спрайтами. Все.

UFO just landed and posted this here

nick4fake Jun 26 2013 at 11:51

— -А ещё для спрайтов нужен дополнительный запрос, очень дорогой на мобильном интернете, и отдельный элемент, то есть усложненние вёрстки
Я что-то не понял, а для отдельных картинок запросы не нужны?

--Спрайты — прошлый век… SPDY/HTTP2…
И сколько еще лет пройдет, пока хотя бы 40-50% мобильных пользователей будут поддерживать эту надстроку? Навскидку, думаю не меньше 2-4 лет. Это совсем не прошлый век, во время бума мобильного интернета

— отдельный элемент, то есть усложненние вёрстки
Простите, а для картинки не нужен отдельный элемент?

— Или добавлять огромные поля, получая дикое разбухание картинки и отжирание ресурсов на отображение
Спорить не буду, метод дурацкий. Но я пока не понимаю, зачем подобное может понадобиться

Для иконок спрыты удобнее И ЛОГИЧНЕЕ по простейшей причине — обычно их используется целый пак (соц. сети, действия, валюты и т.д.), и заменив один файл можно менять все иконки сразу. Кроме того, со спрайтами проще разбираться с кешированием: да, заголовки должны быть правильными, но используя спрайты, можно при генерации менять суффикс на случайный, а кеширование ставить максимально долгое. Тогда гарантированно картинка спрайта загрузится только один раз.

UFO just landed and posted this here

nick4fake Jun 26 2013 at 13:40

Вы шутите?
— картинки можно добавлять как фон с помощью background-image и позиционировать с помощью background-position
А как еще? Без JS.

— Только элемент для отображения значка из спрайта не должен содержать больше ничего, чтобы не были видны соседние значки
Ну я же не просто так говорю. Всегда в проектах для иконок исопльзуем спрайты, это же делают ОЧЕНЬ большое количество других сервисов.

Вы хотите сказать, что BBC, Яндекс, YouTube, Amazon, eBay, MSN, Хабр (все только что сам проверил) и др. ошибаются? Или они «случайно» спрайты используют? Вы утверждаете, что эта техника плоха, пока сотни тысяч сайтов (причем даже очень крупных порталов) ею пользуются. Я скорее поверю им.

UFO just landed and posted this here

shara Jun 26 2013 at 04:59

Благодарю за статью, читается на одном дыхании.

100 <CC>
Зачем этот код нужен в начале потока, неизвестно

Думаю можно спросить у автора формата, Стива Уилхайта (Steve Wilhite), он жив но о нем мало что известно.
Впрочем стоит попытаться отправить email на steve@olsenhome.com www.olsenhome.com/gif/

VanDamM Jun 26 2013 at 06:35

Вот за такие статьи спасибо и вам и хабру! :)

pewpew Jun 26 2013 at 08:54

Отличная статья. Прочтение натолкнуло на мысль о 24-битных GIF-ках без потери качества. Понятно, что это костыль костылей, но ведь никто не запрещает использовать блоки 16х16 пикселей со своей 256-цветной палитрой. Правда, размер такого файла будет кхм… Но ведь всё равно можно!