То же изображение, два размера [закрыто]

Я думал, что такое «лучшая оценка»:

На странице HTML у меня есть один значок, маленький в меню и большой в встроенном тексте. Визуально это одно и то же изображение, но оно загружается как два разных изображения. Я вызываю использование каждого в качестве источника base64, но этот вопрос также относится к внешнему img.

Так лучше:

  1. Загрузите 2 разных изображения, с двумя запросами на сервер и почти 2x размером загрузки (или встроенным размером base64)
  2. Загружать только большее изображение, а клиентская сторона изменяет его размер до небольшого размера

html,css,html5,image,

2

Ответов: 2


0

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

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

Это следующее, и имеет неплохую (не IE) поддержку .


0

Есть несколько способов приблизиться к этому. Предположим, что изображение загружается на страницу как таковое:

<img src="image.png">

Это уже вызвало вызов на бэкэнд, и вы хотели, чтобы он отображался в другом месте в блоке текста без повторного вызова на сервер. Нет удобного способа загрузить меньшую версию изображения во второй раз на отдельной странице на странице. Вот почему в большинстве мест будет сохранено несколько снимков разных размеров.

Если это особенно крупное изображение, вы можете попробовать использовать изображение с низким разрешением при загрузке или загрузить его с помощью SVG.

HTML, CSS, html5, образ,