Displays Images With Incorrect Aspect Ratio как исправить

Displays Images With Incorrect Aspect Ratio как исправить

Сообщение k0ttee »

Аудит в браузере Chrome ругается Displays Images With Incorrect Aspect Ratio (Отображаются изображения с неправильным соотношением сторон) в секции Best Practices.

Как исправить (решение).

В документации написано, что следует задать размеры картинок... Чтобы строго соблюсти соотношения сторон, а у пользователей картинки не масштабировались и не кукожились - чтоб были чёткими.
Код: Выделить всё
https://developers.google.com/web/tools/lighthouse/audits/aspect-ratio


Обычным картинкам: достаточно задать размеры в пикселях.
Код: Выделить всё
<!-- так -->
<img src="kitten.jpg" height="1024" width="768" alt="A cute kitten">
<!-- или так -->
<img src="kitten.jpg" style="height:1024px; width:768px;" alt="A cute kitten">
<!-- ну или так -->
<style>
.kitten{ height:1024px; width:768px; }</style>
<img src="kitten.jpg" class="kitten" alt="A cute kitten">

Фоновым картинкам: описать размер фона в пикселях, можно добавить !important
Код: Выделить всё
background-size:20px 20px !important;


Так-то картинки сами выводятся в своих натуральных размерах... Но инструменты гугла добавят нам бесполезной работы и приведут к раздуванию кода.

Добавлено спустя 4 часа 40 минут 44 секунды:
Не забываем прописываит hover (по наведению), если используется.


За это сообщение автора k0ttee поблагодарил:
birds
Аватара пользователя
k0ttee

 
Группа: Специалист ruSEO
Сообщения: 10290
Рефералы: 2
Зарегистрирован: 02 май 2014
Средств на руках: 7.10
Статус: я заснял
Спонсор
 
Re: Displays Images With Incorrect Aspect Ratio как исправит

Сообщение birds »

Посмотрим, даст ли Google плюшек за вывод в зеленую зону всех требований. Очень хотелось бы.

audits (1).jpg
audits (1).jpg (13.32 КБ) Просмотров: 133
Твой RX траф в надежных руках! Рейт 45% подробнее - tg: @onlinerx
Зарабатываю на крипте | играх | банках. Продвигаю сайты: статьями и вечными
Онлайн будильник - не проспи! | Генератор ников
Аватара пользователя
birds
Администратор
 
Группа: Администраторы
Сообщения: 19634
Рефералы: -208
Зарегистрирован: 24 авг 2010
Откуда: местный житель
Средств на руках: 199.20
Статус: летящий вперед
Спонсор
 

Вернуться в Верстка, дизайн, графика

 


  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 7