Оптимизация сайта, уменьшающая количество запросов к объектам Img - PullRequest
0 голосов
/ 28 сентября 2010

Я нахожусь в поиске уменьшения моего очень раздутого приложения домашней страницы в разработке. Я оптимизировал запросы CSS и JS, используя объединение / брошюровщик и минимизатор размера сервера.

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

Предположения:
Эти изображения являются чисто декоративными со статьей.
Хотя приведенное выше верно, они все равно должны иметь альтернативный текст, доступный в том случае, если изображения недоступны, поскольку они действительно передают идею (требование доступности). Каждое изображение примерно одинакового размера 130Wx80H
Каждое изображение является стоковой фотографией чего-то
Для параллельной загрузки доступны два домена
Есть еще две группы маленьких изображений с 4 изображениями в каждой.

Цели: Первоначально я думал, что просто буду использовать фоновые изображения и на стороне сервера создавать и кэшировать спрайт-изображение и генератор CSS. Тем не менее, я не уверен в доступности. Тогда я считал, что по умолчанию фоновые изображения не печатаются. Это привело бы к большому количеству белого.

Вопрос: Могу ли я сгруппировать изображения, оставаясь при этом доступными и сохраняя правильную последовательность действий для программ чтения с экрана Могу ли я использовать единственный старый тег img и попытаться разделить URI объектов между двумя доменами? И да, совершенно очевидная вещь - полностью изменить дизайн и удалить изображения, но это сайт электронной коммерции / журнала.

Ответы [ 2 ]

1 голос
/ 28 сентября 2010

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

Надеюсь, это поможет.

0 голосов
/ 28 сентября 2010

Решение здесь прекрасно работает.Предостережение заключается в том, что вам также необходимо добавить размеры / ширину изображения в тег img, чтобы все было в порядке с отключенным CSS.http://www.artzstudio.com/2010/04/img-sprites-high-contrast/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...