Перевод статьи «To Sprite Or Not To Sprite». Автор — Vladimir Vukicevic.
CSS спрайты давно прижились среди разработчиков благодаря возможности с их помощью значительно ускорить загрузку сайта. Стив Содерс как раз представил SpriteMe! на конференции Velocity '09 (к теме о том, зачем использовать генераторы CSS спрайтов или прочие серверные инструменты, если можно использовать <canvas> и toDataURL и генерировать спрайты на лету). Впрочем, есть несколько заблуждений о CSS спрайтах, и главное из них то, что спрайты не имеют недостатков.
Основная идея CSS спрайтов в том, чтоб соединить несколько изображений, используемых на вашем сайте, в одно, тем самым уменьшив количество HTTP запросов к вашему сайту. Изображение отображается при помощи CSS свойств background и background-position (что, кстати, означает, что ваша разметка станет более сложной; изображения задаются при помощи CSS, а не с помощью тега <img>*).
* Прим. переводчика: с этим моментом я не согласен. Спрайты в принципе не должны заменять изображения, вставленные с помощью <img> тега. Изображения вставленные с помощью CSS свойства backgroundотличаются по смыслу от изображений, вставленных через <img>. Изображения вставленные через background — это декоративные элементы, не относящиеся к основному содержимому веб-страницы (фон навигации, буллиты в списках, иконки в навигации). Изображения вставленные через <img> — это часть основного (уникального) содержимого веб-страницы (фотографии, поясняющие картинки и пр.).
Самая большая проблема спрайтов — использование ими оперативной памяти. Если спрайт неаккуратно скомпонован, то вы можете столкнуться с огромным количеством бесполезного пустого места. Мой любимый пример с сайта WHIT TV, на котором для спрайта используется это изображение. Обратите внимание на размеры этой PNG'шки, они — 1299×15000. Изображение сжато неплохо и при скачивании занимает 26 Кб, но при рендеринге браузер разжимает это изображение. После декомпрессии этого файла в памяти он занимает почти 75 Мб (1299×15000×4). Если изображение не будет прозрачным, то возможно его можно будет оптимизировать до 1299×15000×3, хотя зачастую это будет сказываться на скорости рендеринга (прим. переводчика: думаю, если это и отразится на скорости рендеринга, то пользователь этого всё равно не заметит). Даже в этом случае мы получим 55 Мб. Большая часть содержимого изображения пустая; там ничего нет, никакого полезного контента. Загрузка главной страницы WHIT TV увеличит количество памяти используемой браузером более чем на 75 Мб, только из-за этого изображения.
Это неверное решение для сайтов.
Другой (менее важный) недостаток: если страницу, на которой используется спрайт, зумировать, то браузеру может понадобиться выполнить лишнюю работу, чтобы добиться правильного отображения на границах этих изображений, во избежание «просачивания» (leaking in) изображений расположенных рядом. Это не проблема для маленьких изображений, но может существенно понизить производительность при использовании больших изображений.
Есть случаи, когда CSS спрайты приносят исключительно преимущества; основным примером такого случая может послужить совмещение группы небольших одинаковых по размеру изображений в одно. Например, группа иконок размером 16×16 используемых в качестве различных индикаторов на вашем сайте, или группа иконок размером 32×32 используемых в качестве заголовков для категорий или что-то на подобии. Но совмещение изображений со значительно различающимися размерами, в особенности если это узкие и высокие изображения, в один широкий и короткий спрайт — почти никогда не будет хорошей идеей.
Впрочем, спрайты улучшают скорость загрузки страниц (во всяком случае, скорость первой загрузки — при последующих загрузках браузер должен использовать кэш). Так какая же альтернатива? К сожалению её пока нет. Некоторые браузеры уже имеют поддержку оффлайн хранилищ; может, есть возможность расширить её, чтобы была возможность скачивать один файл (например, jar или zip) содержащий все ресурсы, а также эквивалентные URLы содержащиеся внутри. Но подобное решение не появится в сети ещё на протяжении какого-то времени.
Поэтому, делая выбор использовать или не использовать спрайты, имейте ввиду что есть и другие факторы помимо увеличения скорость загрузки страницы. Основное правило — если спрайт не содержит настоящего изображения, то вам не стоит его использовать (прим. переводчика: не совсем понятно, что автор имел ввиду под «настоящим изображением»). Также держите в голове возможные будущие решения, которые будут совмещать ускоренную загрузку страниц, а также не будут потреблять большое количество оперативной памяти и времени на обработку страницы.
Комментариев нет:
Отправить комментарий