![][1]

Пару месяцев назад, отдыхая от реализации [новых возможностей][2] вроде q\_auto и g\_auto, я прикалывался в нашем командном чате по поводу того, как различные форматы хранения изображений будут сжимать однопиксельную картинку. В ответ Orly, редактор блога, попросил меня написать пост об этом. Я сказал: «Конечно, почему бы и нет. Но это будет очень короткий пост. Ведь что можно рассказать про один пиксель».

Похоже, я был сильно неправ.


# Что можно сделать с одним пикселем?


В ранние годы веба однопиксельные картинки часто использовались как костыли для вещей, которые сейчас делаются через CSS. Создание отступов, линий, прямоугольников, полупрозрачных фонов – много чего можно сделать, просто масштабируя пиксель до нужных размеров. Ещё одно использование пикселей, дожившее до наших дней – маячки, средства для отслеживания и аналитики.

В отзывчивом веб-дизайне однопиксельные картинки используются как временные заглушки в ожидании загрузки страницы. Большинство браузеров не поддерживают [HTTP Client Hints][3], поэтому некоторые варианты с отзывчивыми изображениями ждут полной загрузки страницы, чтобы подсчитать актуальный размер картинок, а затем заменяют однопиксельные картинки нужными изображениями при помощи JavaScript.

![][4]
_Сломанная картинка_
[Читать дальше →][5]

[1]: http://res-2.cloudinary.com/cloudinary/image/upload/c_fill,w_770/one_pixel_image_comparison_hexdhump.png
[2]: http://cloudinary.com/blog/introducing_smart_cropping_intelligent_quality_selection_and_automated_responsive_images
[3]: http://httpwg.org/http-extensions/client-hints.html
[4]: https://habrastorage.org/getpro/habr/post_images/8bd/634/568/8bd6345685a2e107ac2a13d940e1e742.png
[5]: https://habrahabr.ru/post/306210/?utm_source=habrahabr&utm_medium=rss&utm_campaign=feed_posts#habracut