Intereting Posts
Создание настраиваемого флажка с помощью CSS и Bootstrap Сохранить экземпляр карты вне Карт Google Почему это ведет себя так, как это делается с max-width: 0? Как установить значение текстовой области с помощью php? Переопределение свойств CSS для конкретного элемента html Что произойдет, если ответ не получен для запроса? Я вижу повторы Вырезание отверстия в родительском элементе с помощью CSS Выделение синтаксиса HTML в строках javascript в vim В чем разница между сгибом и базовым уровнем? Неправильное заполнение формы с помощью клавиши ввода, когда есть две кнопки отправки PHP конвертировать html & nbsp; в пробе, & gt; to> и т.д. html5 oninvalid не работает после исправления поля ввода Как создать кривые и перекрывающиеся вкладки меню в CSS Домашняя страница загружается не так, как каждая другая страница Изменение свойства курсора для выбранной части элемента

Как оптимизировать несколько повторяющихся изображений в таблице HTML

Я создаю большую таблицу HTML, и я использую изображения для многих ячеек. Например, один столбец может иметь либо изображение большого пальца, либо изображение с большим пальцем. Если у меня есть 300 строк, а 200 из них – большие пальцы, все они имеют

 

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

Есть ли способ сделать это более эффективным? Разве браузеры распознают это и захватывают кешированное значение изображения?

Какова наилучшая практика при возвращении большой таблицы HTML с большим количеством повторяющихся изображений?

Каждый браузер будет кэшировать изображение и загружать его только один раз.

Я бы создал class css с атрибутом фона. Ваш html будет меньше в каждом вызове страницы, так как css кэшируется и меньше 300 src="http://myserver.com/thumbsup.png" .

Посмотрите эту тему, чтобы получить дополнительную информацию о фоновых изображениях css, с плюсами и минусами.

Как сказал Джордан, браузер будет кэшировать изображение после первой загрузки. Но если у вас много загружаемых изображений, вам следует подумать о создании спрайта изображений .

Как упоминалось выше, используйте css спрайты . Не забудьте добавить текст в якорь, потому что люди с отключенными css (программами чтения с экрана) и поисковыми системами просто видят пустую ссылку (а затем текст-отступ: -9999px; этот текст через css, чтобы он не отображался в перед фоновым изображением). Это также поможет вашему SEO.

Например:

  Thumbs Up! 

Я бы использовал css в этой ситуации.