Комментарии 33
Отличный фокус с квадратиком! Не дочитав статью, понаоткрывал браузеров
НЛО прилетело и опубликовало эту надпись здесь
— Да, например, чтобы меньше разбухал CSS, где эти картинки внедрены как data:uri.
Для этого и используют спрайты.
Для этого и используют спрайты.
Результаты использования спрайтов:
1) увеличение размера картинок, т.к. сразу же разбухают палитры.
2) Насилие над браузером, которому приходится по несколько раз отрисовывать целую картинку, хотя от нее (оказывается) нужна всего лишь небольшая часть.
3) циферкоблудие с подгоном background-position для каждого нужного элемента.
4) изменение всего спрайтового файла в случае изменения/добавления одной картинки (и как результат — прекрасная возможность одним действием испортить сразу все).
5) усложнение документации и процедуры ее ведения, т.к. приходится еще и вести учет, где по какому смещению у нас какая картинка лежит.
1) увеличение размера картинок, т.к. сразу же разбухают палитры.
2) Насилие над браузером, которому приходится по несколько раз отрисовывать целую картинку, хотя от нее (оказывается) нужна всего лишь небольшая часть.
3) циферкоблудие с подгоном background-position для каждого нужного элемента.
4) изменение всего спрайтового файла в случае изменения/добавления одной картинки (и как результат — прекрасная возможность одним действием испортить сразу все).
5) усложнение документации и процедуры ее ведения, т.к. приходится еще и вести учет, где по какому смещению у нас какая картинка лежит.
1) Возможно это компенсируется отсутствием зарезервированных полей для каждого изображения и метадаты всякой.
2) Насколько я понимаю 1 картинка находится памяти и отрисовывается только та часть, которую нужно отобразить. Это первоочередная оптимизация движка браузера.
+) Сокращение количества запросов к серверу, а это уже внушительное количество миллисекунд.
С остальным согласен
2) Насколько я понимаю 1 картинка находится памяти и отрисовывается только та часть, которую нужно отобразить. Это первоочередная оптимизация движка браузера.
+) Сокращение количества запросов к серверу, а это уже внушительное количество миллисекунд.
С остальным согласен
1. Вы говорили, что для маленьких картиног нужен gif. Я привел пример, как можно его заменить png-спрайтами, и там нет проблемы с палитрой
2. А с чего вы взяли, что браузер одну и ту же картинку перерисовывает? Скорее всего хранит в буфере, и каждый раз как она нужна берет только кусок.
3. Вы слышали про SASS? Компиляторы CSS/спрайтов? О том, что в спрайтах смещение в процентах можно задавать?
4. Опять таки, компиляторы. И вообще, странное замечание. А изменением кода нельзя испортить все?
5. И в третий раз говорю, что есть компиляторы. А писать смещение картинки в документации — странно. Лучше их называть по классам (например, .currecny.uah, .currency.rur), т.к. смещение может измениться
6. Есть только один серьезный минус — в книжках по php не пишут, как пользоваться спрайтами. Все.
2. А с чего вы взяли, что браузер одну и ту же картинку перерисовывает? Скорее всего хранит в буфере, и каждый раз как она нужна берет только кусок.
3. Вы слышали про SASS? Компиляторы CSS/спрайтов? О том, что в спрайтах смещение в процентах можно задавать?
4. Опять таки, компиляторы. И вообще, странное замечание. А изменением кода нельзя испортить все?
5. И в третий раз говорю, что есть компиляторы. А писать смещение картинки в документации — странно. Лучше их называть по классам (например, .currecny.uah, .currency.rur), т.к. смещение может измениться
6. Есть только один серьезный минус — в книжках по php не пишут, как пользоваться спрайтами. Все.
НЛО прилетело и опубликовало эту надпись здесь
— -А ещё для спрайтов нужен дополнительный запрос, очень дорогой на мобильном интернете, и отдельный элемент, то есть усложненние вёрстки
Я что-то не понял, а для отдельных картинок запросы не нужны?
--Спрайты — прошлый век… SPDY/HTTP2…
И сколько еще лет пройдет, пока хотя бы 40-50% мобильных пользователей будут поддерживать эту надстроку? Навскидку, думаю не меньше 2-4 лет. Это совсем не прошлый век, во время бума мобильного интернета
— отдельный элемент, то есть усложненние вёрстки
Простите, а для картинки не нужен отдельный элемент?
— Или добавлять огромные поля, получая дикое разбухание картинки и отжирание ресурсов на отображение
Спорить не буду, метод дурацкий. Но я пока не понимаю, зачем подобное может понадобиться
Для иконок спрыты удобнее И ЛОГИЧНЕЕ по простейшей причине — обычно их используется целый пак (соц. сети, действия, валюты и т.д.), и заменив один файл можно менять все иконки сразу. Кроме того, со спрайтами проще разбираться с кешированием: да, заголовки должны быть правильными, но используя спрайты, можно при генерации менять суффикс на случайный, а кеширование ставить максимально долгое. Тогда гарантированно картинка спрайта загрузится только один раз.
Я что-то не понял, а для отдельных картинок запросы не нужны?
--Спрайты — прошлый век… SPDY/HTTP2…
И сколько еще лет пройдет, пока хотя бы 40-50% мобильных пользователей будут поддерживать эту надстроку? Навскидку, думаю не меньше 2-4 лет. Это совсем не прошлый век, во время бума мобильного интернета
— отдельный элемент, то есть усложненние вёрстки
Простите, а для картинки не нужен отдельный элемент?
— Или добавлять огромные поля, получая дикое разбухание картинки и отжирание ресурсов на отображение
Спорить не буду, метод дурацкий. Но я пока не понимаю, зачем подобное может понадобиться
Для иконок спрыты удобнее И ЛОГИЧНЕЕ по простейшей причине — обычно их используется целый пак (соц. сети, действия, валюты и т.д.), и заменив один файл можно менять все иконки сразу. Кроме того, со спрайтами проще разбираться с кешированием: да, заголовки должны быть правильными, но используя спрайты, можно при генерации менять суффикс на случайный, а кеширование ставить максимально долгое. Тогда гарантированно картинка спрайта загрузится только один раз.
НЛО прилетело и опубликовало эту надпись здесь
Вы шутите?
— картинки можно добавлять как фон с помощью background-image и позиционировать с помощью background-position
А как еще? Без JS.
— Только элемент для отображения значка из спрайта не должен содержать больше ничего, чтобы не были видны соседние значки
Ну я же не просто так говорю. Всегда в проектах для иконок исопльзуем спрайты, это же делают ОЧЕНЬ большое количество других сервисов.
Вы хотите сказать, что BBC, Яндекс, YouTube, Amazon, eBay, MSN, Хабр (все только что сам проверил) и др. ошибаются? Или они «случайно» спрайты используют? Вы утверждаете, что эта техника плоха, пока сотни тысяч сайтов (причем даже очень крупных порталов) ею пользуются. Я скорее поверю им.
— картинки можно добавлять как фон с помощью background-image и позиционировать с помощью background-position
А как еще? Без JS.
— Только элемент для отображения значка из спрайта не должен содержать больше ничего, чтобы не были видны соседние значки
Ну я же не просто так говорю. Всегда в проектах для иконок исопльзуем спрайты, это же делают ОЧЕНЬ большое количество других сервисов.
Вы хотите сказать, что BBC, Яндекс, YouTube, Amazon, eBay, MSN, Хабр (все только что сам проверил) и др. ошибаются? Или они «случайно» спрайты используют? Вы утверждаете, что эта техника плоха, пока сотни тысяч сайтов (причем даже очень крупных порталов) ею пользуются. Я скорее поверю им.
Благодарю за статью, читается на одном дыхании.
Думаю можно спросить у автора формата, Стива Уилхайта (Steve Wilhite), он жив но о нем мало что известно.
Впрочем стоит попытаться отправить email на steve@olsenhome.com www.olsenhome.com/gif/
100 <CC>
Зачем этот код нужен в начале потока, неизвестно
Думаю можно спросить у автора формата, Стива Уилхайта (Steve Wilhite), он жив но о нем мало что известно.
Впрочем стоит попытаться отправить email на steve@olsenhome.com www.olsenhome.com/gif/
Вот за такие статьи спасибо и вам и хабру! :)
Отличная статья. Прочтение натолкнуло на мысль о 24-битных GIF-ках без потери качества. Понятно, что это костыль костылей, но ведь никто не запрещает использовать блоки 16х16 пикселей со своей 256-цветной палитрой. Правда, размер такого файла будет кхм… Но ведь всё равно можно!
Слоями анимации накладывать? Не получится из за минимальной задержки, которая захардкодена в браузерах.
Ого. Только подумал, и уже ссылкой ткнули. А ведь хотел прикола ради реализовать и посмотреть, что получится.
Я вот тут более нормальную картинку преобразовывал. А то везде какие-то квадраты или что-то такое же абстрактное.
А я всё равно реализовал:
В зависимости от формирования кадров получаются разные эффекты:
В зависимости от формирования кадров получаются разные эффекты:
Еще Лебедев в 99-м наталкивался :)
web.archive.org/web/20010417181607/http://www.design.ru/kovodstvo/paragraphs/13.html
web.archive.org/web/20010417181607/http://www.design.ru/kovodstvo/paragraphs/13.html
Скажите пожалуйста, а в описании PNG будет такое же подробное описание алгоритма Deflate?
Неужели в ИЕ10 починили?
(удалено, не туда ответил)
А генератор превью в прводнике Win 7 тоже потдерживает полный стандарт формата 
просто и понятно. Спасибо.
TRADINGVIEWПохоже, 3-й части не будет? :(
ДЕАКТИВИРОВАЛА СВОЙ ПРОФИЛЬ
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Изображения: форматы и сжатие (2/3)