Обработка веб-страниц, насыщенных изображениями

Question

У меня есть список телепередач, который составляет около 200 шоу. Каждое из этих шоу имеет небольшое изображение размером 40x60 пикселей и 3 кБ, и все они перечислены на одной странице одновременно.

Теперь я начинаю думать, что, возможно, не очень хорошая идея иметь около 200 запросов к серверу при каждом просмотре страницы.

Каков наилучший способ решения таких проблем без необходимости отклоняться от графического дизайна страницы? Должен ли я использовать какую-то «ленивую загрузку» с использованием JavaScript? Стоит ли мне совмещать все это в одном большом изображении и использовать кучу хакерских CSS, чтобы сделать только один запрос?

Answer 1

Для статики я бы порекомендовал что-то вроде nginx на поддомене static.example.com, очень легкий веб-сервер, который может обслуживать изображения с меньшими издержками, чем более «традиционные» веб-серверы. И, конечно же, установите правильные заголовки expire & cache, чтобы кто-то посещал ваш сайт, чтобы все ваши изображения были в кеше в течение достаточно долгого времени.

Answer 2

Я думаю, у вас может быть несколько вариантов

• Paginate
• Ленивая загрузка через JavaScript
• CSS-спрайтов
• и / или CDN

Пагинация очень распространена, и я думаю, что хорошо работает с пользователями.Ленивая загрузка работает для каждого пользователя JavaScript (почти для всех).

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

Вы можете использовать PHP и GD для захвата каждого изображения в группах20, а затем соедините их вместе, запишите их смещения и распечатайте в таблицу стилей.

Ваш CDN должен быть настроен так, чтобы не отправлять файлы cookie (другой домен или поддомен, если ваш сайт использует www).Вы также можете настроить этот сервер так, чтобы оптимизировать его для доставки статического контента.

Виккен также делает замечание об отправке заголовков истечения срока действия далеко вперед (проголосуйте за него!).Не забудьте добавить какое-либо управление версиями на случай, если вам нужно обновить изображения и сохранить то же имя файла.

Answer 3

Наилучшим вариантом будет размещение вашего списка на странице.

Если вам нужно иметь все элементы на одной странице, то при использовании спрайтов вы получите их на одно изображение, и это вполне допустимый способ сделать это (т.е. не совсем взломать).

Answer 4

Я бы создал спрайт изображений и использовал бы CSS для отображения изображений в div, как этот свиток -10px 30px.Это простой веб-спрайт и генератор CSS http://spritegen.website -performance.org /

Answer 5

Я бы порекомендовал использовать 200 делений с каждым из их фоновых изображений, загруженных из одного файла изображения, который представляет собой полосу всех изображений, объединенных вместе, ala css sprites

Answer 6

Существует еще одна опция: URI данных в вашем css. По сути, вы base64 кодируете изображения и вставляете их непосредственно в файл css. Один запрос обслуживает css и все изображения, и все это можно сжать для еще большей экономии.

Недостаток? IE 5-7 не обрабатывает data-uri изначально (IE 8+ поддерживает это). Вы можете обойти это, имея две версии таблицы стилей (одну со встроенными изображениями, другую без) и попросив apache выбрать, какую из них использовать В качестве альтернативы вы можете использовать решение javascript, которое добавляет поддержку data-uri к более старым IE.

http://www.websiteoptimization.com/speed/tweak/inline-images/

Для толпы Rails есть драгоценный камень под названием Jammit, который делает это автоматически. Он генерирует data-uri и обычные версии, а также заархивированные эквиваленты каждого.

Answer 7

Используйте CSS-спрайты.Общий размер изображения для всех ваших изображений по звукам составляет около 600 КБ, что, вероятно, слишком велико для загрузки за один раз, поэтому вы можете разделить изображения на несколько спрайтов, каждый ~ 100 КБ.Затем вы можете установить приоритет их порядка загрузки в зависимости от того, что просматривается.