Как оптимизировать подачу масштабированных изображений в React? - PullRequest
0 голосов
/ 21 марта 2020

Я запустил отчет GTmetrix на своем веб-сайте и получил значение 0 для «показа изображений с масштабированием». Это просто говорит, чтобы изменить размер / масштабировать это изображение до правильных пикселей, что я могу сделать с помощью фотошопа или рисования, которое решило бы эту проблему, но это изображение живет на других страницах.

Вместо изменения размера и загрузки этих изображений для всех Существующие статьи / сообщения, есть ли пакет или способ сказать React, чтобы масштабировать изображение соответственно. Делая это, он также оптимизирует изображение ??


Пример использования тех же изображений на моем сайте:

Размер изображения на странице поста = 700px x 500px

Контейнер домашней страницы / размер div = 270px x 180px
Размер изображения домашней страницы = 100% x 100%

На домашней странице я попытался и даже указал что-то простое, например:

<img src='thisImage.png' style={{width: '270px', height: '180px'}} />
// or
<img src='thisImage.png?width=270&height=180' />
// or
<img src='thisImage.png' width=270 height=180 />

Размер изображения изменяется и указывается «270 x 180 пикселей (intrinsi c: 700 x 500 пикселей)». Я даже не знаю, что означает intrinsi c. Означает ли это, что оно оптимизировано, масштабировано или изменено? Выполнение другого теста не меняет здесь результатов.

GTmetrix указывает размер со страницы Post и говорит, что нужно масштабировать до размера x на домашней странице. Это должно быть сделано на стороне клиента / браузера

...