[Перевод] Задавать Height и Width для изображений снова важно

Скрипты и советы | 30 октября 2020 1 260

Уроки CSS на Хабрахабре, habrahabr.ru, Разработка веб-сайтов, CSS, HTML, css, width, height, img,

Сторонники веб-оптимизаций часто советуют добавлять к изображениям атрибуты с размерами, что позволяет при отрисовке страницы оставлять нужное количество пространства ещё до загрузки самого изображения. Это позволяет избежать смещения раскладки страницы по мере загрузки изображений - что с недавних пор начал измерять Chrome в новой метрике Cumulative Layout Shift (CLS).

Секрет, не так хорошо известный разработчикам, не являющимся заядлыми сторонниками веб-производительности, заключается в том, что до недавнего времени, как мы увидим в статье, во многих случаях это фактически не имело особого смысла. Однако, недавние изменения в мире CSS и их быстрое внедрение в браузерах снова делает добавление атрибутов width и height к тегу полезным.

Читать далее
Работа с размерами изображений с помощью класса Uri в Joomla 4

Парадокс, конечно, но это возможно. Казалось бы, причем тут класс ядра для работы со строками url. Но именно он может...

Подробнее
Как настроить SEO в Next.js так, чтобы проект реально индексировался

Во многих проектах на Next.js возможности для SEO остаются неиспользованными: страницы индексируются не полностью,...

Подробнее
Как улучшить работу сайта с помощью оптимизации изображений Image Stack

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

Подробнее
[Перевод] 7 советов по оптимизации CSS для ускорения загрузки страниц

В современном вебе, время загрузки страницы сайта — одна из важнейших метрик. Даже миллисекунды могу оказывать огромное...

Подробнее
[Перевод] Свойства Min и Max width/height в CSS

Перевод «Min and Max Width/Height in CSS» Ахмада Шадида Порой у разработчиков возникает необходимость ограничить ширину...

Подробнее
[Из песочницы] Простая анимация загрузки в Material Design (CSS3)

Доброго времени суток, уважаемые читатели Хабрахабра! Меня зовут Александр Шевченко, я начинающий веб-разработчик....

Подробнее

💬 Комментарии

В связи с новыми требованиями законодательства РФ (ФЗ-152, ФЗ «О рекламе») и ужесточением контроля со стороны РКН, мы отключили систему комментариев на сайте.

🔒 Важно Теперь мы не собираем и не храним ваши персональные данные — даже если очень захотим.

💡 Хотите обсудить материал?

Присоединяйтесь к нашему Telegram-каналу:

https://t.me/tcsecms

Нажмите кнопку ниже — и вы сразу попадёте в чат с комментариями