Проверка картинок на плотность: Retina Check

Здесь в Окленде перед запуском каждого вебсайта приходится тестировать его на совместимость с ретиной, условно говоря. Как человеку, который плотно сидит на Маке, мне невооружённым глазом видно, что картинки «не ретина», размыты значит, значит не хватает в изображении пикселей для того, чтобы отображаться в этом размере на вебстранице. Можно добавить более крупные картинки, и сделать сайт чётким в прямом и переносном смыслах.

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

Чтобы выловить эти неровности и сгладить их, мы с ребятами из Sliday сделали бесплатное расширение для Google Chrome, и назвали его Retina Check.

Есть возможность прикинуть (очень приблизительно) насколько изменится размер страницы после оптимизации найденных изображений. Расширение смотрит в код страницы и вылавливает все растровые картинки. Раскрашивает проблемные картинки красным (слишком маленькие для этого экрана!), фиолетовым (слишком крупные, можно подрезать размер!) и промежуточными цветами. Строит красивые графики. Позволяет скачать отчёт в формате .csv для более глубокого анализа.

Полезно хозяевам вебсайтов, тестировщикам и веб-разработчикам, конечно же.

Retina Check Extension сегодня на ProductHunt »
Инструмент бесплатный и есть, пить не просит

Комментарии