Поиск изображений, уменьшенных атрибутами width и height

Опубликовано: 07.12.2015. Обновлено: 19.08.2019 491 1

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

Зачем нужно было вставлять на сайт большую картинку, лишь подогнав её размер атрибутами? Это уже другой вопрос, ответ на который нередко кроется либо в лени, либо в незнании контент-менеджера.

1 способ. Инструмент PageSpeed Insights от Гугла

Инструмент находится по ссылке https://developers.google.com/speed/pagespeed/insights/

В поле копируем адрес страницы и нажимаем "анализировать". В результатах нас интересует:

Нажимаем выделенную кнопку "Как исправить". В списке, который откроется, встречаются два типа записей:

"Если сжать без потерь изображение…" — здесь речь идет только о сжатии. О частном случае, как сжимать изображения в нескольких директориях, я писал ранее.

И "Изменение размера и сжатие изображения по адресу…" — в этой категории как раз те изображения, которые мы ищем. Из адреса нередко бывает сложно понять, о какой именно картинке идёт речь. Чтобы увидеть изображение, нужно навести курсор мыши на адрес, скопировать полный адрес во всплывшем окне и открыть в браузере. Поскольку изображений часто много, с этой точки зрения сервис не очень удобен. Этот недостаток отсутствует в другом способе.

2 способ. Плагин Web Developer для Мозиллы

Скачать плагин можно здесь.

После установки плагина в браузере открываем страницу, на которой будем проверять изображения. Выбираем в плагине: Images — Outline Images — Outline Images With Adjusted Dimensions:

В результате в красную рамку будут выделены все изображения на странице, у которых реальные размеры отличаются от указанных в атрибутах width и height. Пример, как сработал плагин на случайном интернет-магазине:

Слева нормальное изображение товара, справа — уменьшенное атрибутами. Этот способ особенно удобен для категорий интернет-магазинов, на которых бывает много похожих друг на друга картинок.

А какие способы поиска уменьшенных атрибутами изображений знаете Вы? Давайте соберём все в комментариях.