Html height width img: Атрибут width | htmlbook.ru — Вебджем.рф | Создание и продвижение сайтов

Содержание

html — Как установить атрибуты ширины и высоты для элемента внутри элемента, чтобы предотвратить сдвиг макета?

Запуск Lighthouse в Chrome DevTools говорит, что CLS (Cumulative Layout Shift) нуждается в улучшении.

Я знаю, что современные браузеры теперь устанавливают соотношение сторон изображения по умолчанию на основе атрибутов изображения ширина и высота . Следовательно, наилучшей практикой является установка атрибутов ширины и высоты для предотвращения смещения макета.

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

Поскольку у меня есть изображения в формате WebP (с запасными вариантами png), я вынужден использовать элемент (чтобы браузеры, не поддерживающие WebP, получали версию изображения png). Обратите внимание, что я использую версии одного и того же изображения разного размера.

Следовательно, если бы я не использовал формат WebP, я бы использовал только , а не . Тогда проблема была бы решена благодаря соотношению сторон.

Как вы можете видеть в приведенном ниже фрагменте кода, в этом конкретном примере есть две версии одного и того же изображения . Установка width="245" и height="600" в приводит к обеим моим разным версиям то же самое изображение с максимальным размером 245 x 600 пикселей (конечно, оно будет уменьшено в соответствии с меньшими окнами просмотра). Для более широких окон просмотра (минимальная ширина: 813 пикселей) в соответствии с моим медиа-запросом я использую увеличенную версию того же изображения , но устанавливаю ширину и высоту в , изображение масштабируется до 245 x 600 пикселей.

Теперь к моему вопросу/ам; Если возможно, что я могу сделать, чтобы иметь возможность установить ширину

и высоту для моего элемента в моем элементе , чтобы предотвратить смену макета (а также получить другие преимущества от этого, такие как более быстрое время загрузки)? Следовательно, как мне заставить браузеры использовать соотношение сторон для правильного отображения моих изображений?
Я был бы очень признателен за помощь в этом.
Спасибо / Карл
<картинка> <источник медиа="(максимальная ширина: 812px)" srcset="изображение-245w.webp" тип = "изображение/веб-сайт" > <источник медиа="(минимальная ширина: 813px)" srcset="изображение-332w.webp" тип = "изображение/веб-сайт" > <источник медиа="(максимальная ширина: 812px)" srcset="изображение-245w.png" тип = "изображение/png" > <источник медиа="(минимальная ширина: 813px)" srcset="изображение-332w.png" тип = "изображение/png" >
HTML
CSS
3
Я провел некоторое тестирование и пришел к выводу, что использование ширины и высоты (как и следует) для элемента изображения отменяет атрибут размеров . Вы больше не сможете заставить ваше адаптивное изображение работать должным образом, если вы установите width и height .
Я создал небольшой репозиторий, в котором показаны различные комбинации: https://www.gijsvandam.nl/responsive-picture-element/

Решение этой проблемы состоит в том, чтобы , а не использовать размеры , если , вы используете ширину и высоту , но вместо этого зависите от css для установки правильной ширины и высоты.
<картинка> <источник srcset="изображение-245w.webp 245w, изображение-332w.webp 332w" тип = "изображение/веб-сайт" > <изображение srcset="изображение-245w.png 245 Вт, изображение-332w.png 332 Вт" источник = "изображение-245w.png" alt="изображение" >
@media (макс. ширина: 812 пикселей) { . img-жидкость { ширина: 245 пикселей; высота: авто; } } @media (минимальная ширина: 813 пикселей) { .img-жидкость { ширина: 332 пикселя; высота: авто; } }

Важно понимать, что srcSet в сочетании с размерами (или в сочетании с CSS выше) не обязательно заставляет браузер использовать то или иное изображение. В зависимости от соотношения пикселей устройства браузер может выбрать загрузку большего изображения для отображения в слоте изображения шириной 245 пикселей. Вам просто нужно доверять браузеру, что он выберет лучший файл для работы. Между ‘sizes’ и srcSet нет однозначной связи. Вот почему вы можете предоставить больше (или меньше) файлов в srcSet , чем в атрибуте размеры .
4
Допустимая ширина и 9Атрибуты 0005 height для элементов теперь входят в спецификацию, и браузеры начинают их принимать.

GitHub Issue
Что бы вы ни пытались сделать, это будет слишком сложно, если вы попытаетесь это сделать. Вы можете использовать то же самое изображение и изменить его размер с помощью CSS. Используйте медиа-запросы, чтобы объявить разные размеры изображения в зависимости от ширины экрана, как показано ниже.
/* отображает изображение размером 245x600px для маленьких экранов */ @медиа только экран и (max-width: /*введите ширину в пикселях */) { .img-жидкость { высота: 245 пикселей; ширина: 600 пикселей; } } /* отображает изображение размером 332x812px для маленьких экранов */ @медиа только экран и (min-width: /*введите ширину max-width +1px*/) { .img-жидкость { высота: 332 пикселя; ширина: 812 пикселей; } }

4

Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя адрес электронной почты и пароль
Опубликовать как гость
Электронная почта
Обязательно, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Как добавить явную ширину + высоту к изображениям (WordPress)
Нужно указать размеры изображения в WordPress?
Чтобы исправить ошибки указания размера изображения в WordPress, найдите изображение с этой ошибкой GTmetrix и просмотрите его HTML.
Добавьте ширину + высоту в HTML-код изображения (предоставленный GTmetrix):

Это просто означает, что вам нужно добавить ширину + высоту в HTML или CSS изображения. Если для изображения не указаны размеры изображения, это будет отображаться как ошибка в вашем отчете GTmetrix, и GTmetrix даже сообщит вам правильную ширину и высоту, которые должны быть добавлены к этому изображению.
Найти ошибки размера изображения в GTmetrix
Скопируйте ширину и высоту изображения из GTmetrix
Найдите изображение на своем веб-сайте
Добавьте ширину и высоту к HTML-коду изображения
Повторное тестирование страницы в GTmetrix
Укажите размеры изображения с помощью WP Rocket
Исправить ошибки указания размера изображения на нескольких страницах

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

2. Скопируйте ширину и высоту изображения из GTmetrix
Затем скопируйте ширину и высоту изображения (предоставленные GTmetrix).

3. Найдите изображение на своем веб-сайте
Теперь нам нужно найти изображение на вашем сайте WordPress.
Визуальный редактор WordPress автоматически указывает размеры изображения для вас, поэтому здесь обычно нет ошибок для изображений. Однако в некоторых областях вашего веб-сайта размеры изображения могут не указываться автоматически (например, конструкторы страниц, ползунки, виджеты и код HTML или CSS, написанный вручную). Вам нужно узнать, какие область вашего сайта WordPress выдает вам ошибки.

4. Добавьте ширину и высоту к HTML-коду изображения. Все, что вам нужно сделать, это вставить их в HTML следующим образом:
width=”135″ height=”135″
png" />

5. Повторно протестируйте страницу в GTmetrix
Сохраните изменения и повторно запустите страницу через GTmetrix. Изображение с ошибками должно быть исправлено.

6. Укажите размеры изображения в WP Rocket
Если вы используете WP Rocket, они недавно добавили опцию указания размера изображения в настройках мультимедиа под названием «добавить отсутствующие размеры изображения».
WP Rocket просканирует HTML на наличие атрибутов src, в которых отсутствует ширина + высота, а затем добавит их.

7. Исправление ошибок указания размера изображения на нескольких страницах
Хотите массово исправить изображения, которые появляются на нескольких страницах?
Вы можете использовать плагин Better Search Replace, чтобы исправить свой логотип, изображения виджетов и другие изображения, которые появляются на нескольких страницах, без необходимости просматривать их по отдельности. Это может сэкономить время.
Шаг 1 : Установите плагин Better Search Replace.
Шаг 2 : В поле «Искать» добавьте HTML-код изображения без указанной ширины + высоты. В поле «Заменить на» добавьте новую версию изображения, которая включает ширину и высоту.
Шаг 3 : Выберите таблицы, которые вы хотите, чтобы плагин сканировал и заменял изображения. Вы можете выполнить пробный запуск, если хотите проверить это, в противном случае снимите этот флажок и нажмите «Выполнить поиск / замену».
Шаг 4 : Плагин запустится и выполнит поиск/замену изображения во всех выбранных вами таблицах. После завершения Better Search Replace сообщает, сколько таблиц было отсканировано и сколько изображений заменено.

Часто задаваемые вопросы
Как указать размеры изображения?
Найдите ошибку в GTmetrix и скопируйте ширину и высоту изображения (предоставляется GTmetrix). Найдите изображение в WordPress и просмотрите его HTML. Добавьте ширину и высоту в HTML-код изображения. Пример: ширина=”680″ высота=”340″
Можно ли использовать подключаемый модуль для указания размеров изображения?
Большинство подключаемых модулей с указанием размера изображения не работают, но вы можете попробовать Better Search Replace, чтобы массово исправить изображения, которые появляются на вашем сайте.
Как оптимизировать изображения в GTmetrix?
Это означает, что вам нужно сжимать изображения без потерь с помощью таких плагинов, как ShortPixel или Imagify. Я использую ShortPixel.
Как вы предоставляете масштабированные изображения?
Если у вас есть ошибки масштабирования изображений в GTmetrix, это означает, что вы загружаете слишком большие изображения, и их необходимо изменить до правильных размеров. Ваши ползунки, изображения портфолио, изображения виджетов, полноразмерные изображения блога и другие разделы вашего веб-сайта требуют определенных размеров.