Как узнать, какую ширину/высоту я должен установить на изображении на быстродействующем сайте?

Question

Я чувствую, как нуб для спрашивать это, но здесь идет :)

Я читал о Google's AMP и как вы должны определить ширину и высоту изображения, чтобы уменьшить время страницы визуализации.

Сценарий 1 (с использованием AMP)
Допустим, я хочу, чтобы использовать всю ширину экрана мобильного, но я хочу, чтобы правильно масштабировать. Как найти и установить высоту/ширину? И как узнать ширину экрана мобильного телефона?
Обновление Использование, например, WP, вы можете масштабировать изображения до трех разных размеров. Но браузер все еще не знает, какой размер пользователь выбрал для использования в статье до загрузки изображения (хорошо, я вижу обходной путь для WP).

Сценарий 2 (для нормальной веб-страницы)
Пользователь в CMS может загружать изображения в разных размерах и форматах. При использовании изображений в статье я хочу иметь правильное соотношение сторон. Откуда я знаю, когда и что?

Я не знаю размер изображения до его загрузки. Итак, как я могу установить атрибуты высоты и ширины изображений?

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

Update Лучшее решение, насколько я вижу, что один может загрузить изображение мета данных до загрузки файла изображения. Выполнение запроса БД (надеюсь) быстрее, чем загрузка фактического изображения.

Answer 1

Просто добавьте width:100%; или height:50%; в файле CSS в зависимости от ваших потребностей

Answer 2

Лучший способ IMO, чтобы уменьшить вес изображений на стороне сервера. Затем вы узнаете высоту и ширину. Вы можете сделать это динамически через AJAX, если вам тоже нужно.

Чтобы установить правильную высоту и ширину в CSS (от Img реагирующего класса Bootstrap в):

display: block; 
max-width: 100%; 
height: auto;