уменьшить размер изображения и оставить его шириной 100%

Question

У меня в сети есть изображения, на которые есть ссылки с сайтов хостинга изображений. Все изображения должны иметь ширину 100%.
Однако некоторые изображения имеют очень большие пиксели и поэтому загружаются медленно.
Как я могу установить стиль, чтобы уменьшить пиксель изображений, сохраняя при этом ширину изображения 100%, чтобы загружаться быстрее?
Например, зафиксируйте горизонтальный пиксель на 1440 пикселей и настройте вертикальный пиксель и оставьте его в 100% ширина?

Answer 1

У вас очень мало контроля над изображением, размещенным в другом месте. Некоторые альтернативные идеи:

• Кэшировать их на другом сервере и загружать оттуда
• Предварительная загрузка для более быстрых результатов (что может не работать, если изображение находится «выше сгиба») Как именно работает ссылка rel = "preload"?
• Используйте тег <picture>, чтобы указать другое изображение в зависимости от размера экрана: загружать изображения с помощью тега изображения
• Сначала загрузить изображение-заполнитель: Как загрузить небольшое изображение-заполнитель перед загрузкой фактического содержимого

Answer 2

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