Я должен использовать подобную спрайту технику для миниатюр на моем веб-сайте?
На веб-сайте я создаю, у меня есть приблизительно 100 различных миниатюр (64x64), который отображен в разное время. На некоторых страницах могут быть отображены только 5-15 миниатюр. На других загружаются все 100.
Я рассматриваю использование техники как спрайты CSS для отображения изображений. Таким образом, вместо того, чтобы иметь теги изображения для каждого ползунка, сделайте что-то как:
<span class=thumb1"></span>
И затем используйте CSS для взятия части одного единственного изображения со всеми ползунками, сшитыми вместе. Таким образом, одно изображение со всеми 100 ползунками (в этом сценарии, 640x640 изображение).
Мои вопросы:
- Действительно ли это - хорошая идея?
- Если да, я должен сделать это на всех страницах, изображения происходят, или только на страницах со всеми изображениями?
- Есть ли другая техника кроме спрайтов, которые могут быть лучше, чем просто включая изображения с тегами img?
3 ответа
Если вы думаете, что обычный пользователь посетит по крайней мере две разные страницы с этими миниатюрами, чем мое мнение, что использование спрайтов действительно хорошая идея !
Я бы на самом деле сделал одно большое изображение со всеми миниатюрами, а затем использовать его на всех страницах!
Почему?
- Меньшее количество HTTP-запросов (от 100 до 1)! И это одна из самых важных вещей в оптимизации веб-сайта (прочитано здесь из Правила оптимизации скорости работы команды Yahoo )
- Таким образом, пользователи будут загружать все изображение только в первый раз, а затем они получат Супер быстрая загрузка этих изображений во всех следующих страницах
- Самые известные веб-сайты в Интернете уже это делают! См. Спрайты, используемые в Yahoo , Amazon или YouTube страницы.
- Вы можете добавить другие пользовательские интерфейсы или макеты на ваш SPRITE
Оптимизировать полученный PNG:
после того, как вы получили спрайт, если PNG, вы можете оптимизировать PNG еще больше, используя этот инструмент: http://www.sitepoint.com/blogs/2009/09/18/squishing-the-last-drops-from-your-pngs/
Chen Не использовать спрайты:
- Когда часть изображений в Спрайт часто меняется
- в этом конкретном случае: когда большинство пользователей нужно меньше, чем (около) 10% изображений
Я не совсем уверен, что вы имеете в виду с «спрайтами», но это то, что я думаю, что вы имеете в виду: вместо 100 изображений отдельно вы создаете 1 изображение, с растром 10x10. Каждая координата (x, y) содержит один из изображений, которые вам нравятся.
Теперь, если вы отобразите изображение, вы используете CSS для установки фона-местоположения: IE x * -64px и Y * -64Px , возможно, используя JavaScript для расчета x и y для Каждый диапазон изображений или скрипты на стороне сервера для распечатки динамических CSS.
- Да, это хорошая идея: это уменьшает время загрузки, так как можно только загрузить одно большое изображение вместо сотен меньших.
- Это зависит. Если у вас есть кэширование для страницы, то вы можете «прошивать» все миниатюры в один файл изображения. Если у вас есть очень динамичная веб-страница, то это довольно резко, чтобы построить это сшитое изображение каждый раз, когда эмблемы обновлены.
- Не уверен, если это то, что вы с «спрайтами», то нет, если вам что-то еще с «спрайтами», то да: этот ответ является примером одного.
Хорошая идея, если
имеет значение скорости
, вы не заботитесь о доступности (считыватели экрана, читающие, чтение текста ALT изображения и т. Д., Все, что исчезло при использовании спрайтов)
, вам все равно Ваши миниатюры не будут напечатаны по умолчанию в любом браузере
, вы можете сделать это, без него становится техническим кошмаром (какое изображение снова было на месте 461?)
относительно вашего второго вопроса, вероятно, рекомендуется Поместите все спрайты в один или очень немногим контейнерным изображениям, чтобы минимизировать время загрузки.