Сегодня о редкой, но очень неприятной ошибке при подготовке макетов и графики для веба. Для понимания этой ошибки важно вспомнить теорию, разницу растровой и векторной графики.
Теория: растр и вектор
Картинку может «замылить» не только увеличение её размера, но и экран с высокой плотностью пикселей.
Растровая картинка состоит из пикселей — точек определённого цвета. Популярные растровые форматы — джипег и ПНГ. Чем больше размер картинки — разрешение — тем больше в ней пикселей. С ростом разрешения сильно растёт размер файла, картинка начинает дольше загружаться в браузер читателя.
Картинку может «замылить» не только увеличение её размера, но и экран с высокой плотностью пикселей.
Если увеличить картинку больше её разрешения, компьютеру придётся «додумывать» пиксели, что приведёт к потере чёткости, размытию и артефактам:
Векторная картинка — это не пиксели, а набор инструкций по построению изображения с помощью примитивных фигур и кривых. Основной векторный формат в вебе — СВГ. Если открыть СВГ‑файл в блокноте, мы увидим код, координаты и свойства кривых. Код занимает гораздо меньше места, чем информация о тысячах пикселей, поэтому векторные файлы обычно очень мало весят.
garfield.svg<svg enable-background="new 0 0 175.747 105.125" height="244.252105" viewBox="0 0 175.747 105.125" width="409.413053" xmlns="http://www.w3.org/2000/svg"><path d="m34.577 5.652c-2.864-3.145-7.485-2.755-13.686 2.552-5.408 4.628-6.564 10.486-6.495 16.779.012 1.091-1.196 1.23-1.856.773-3.492-2.422-6.55-4.329-9.046-3.634-1.913.532-1.917 1.755-.155 1.856 4.732.271 7.324.955 9.046 2.32.896.709-.157 1.178-1.04.638-2.463-1.507-5.601-2.505-9.012-2.03-1.255.175-1.668 1.218-.911 1.66.784.458 7.847.12 9.494.815.698.294 1.031.433.85.928-.293.464-.52.189-1.16 0-3.403-1.006-6.948-1.187-9.947.224-1.155.543-.652 1.785.437 1.399 3.166-1.122 6.058-1.196 8.969-1.005 1.224.081.992.384.696 1.16-4.624 12.135-1.496 19.442 1.314 25.826-6.277 4.084-7.498 9.99-5.602 15.316 1.743 4.896 7.084 8.169 13.411 8.885-2.547 7.029-5.082 13.461-2.551 19.176-2.552.104-3.379 1.773-.851 2.166 3.721.574 7.528 1.112 11.211.387 …
Но главное — вектору не страшно масштабирование. Компьютер рассчитает и нарисует фигуры и кривые в любом размере без потери чёткости:
Отдельные энтузиасты повторяют вектором сложные растровые изображения, но это просто интересное упражнение, а не рабочая методика
Конечно, не всю графику можно изобразить векторными фигурами и кривыми. Пытаться нарисовать ими фотографию будет крайне неэффективно, с этим гораздо лучше справится пиксельный растр. Зато вектор отлично подходит для логотипов, иконок или мультипликации.
Отдельные энтузиасты повторяют вектором сложные растровые изображения, но это просто интересное упражнение, а не рабочая методика
Фейк‑СВГ и проблемы с ними
В СВГ‑файл вообще можно много чего засунуть, см. спецификацию:
Chapter 12: Embedded Content
Технически, в СВГ‑файл можно положить растр. Например, выделить растровую фотографию в Фигме и экспортировать её как СВГ. Получится СВГ‑файл, но внутри не код‑инструкция, а огромный закодированный набор пикселей. Я называю такое «фейк‑СВГ»:
В СВГ‑файл вообще можно много чего засунуть, см. спецификацию:
Chapter 12: Embedded Content
garfield.svg<svg enable-background="new 0 0 175.747 105.125" height="244.252105" viewBox="0 0 175.747 105.125" width="409.413053" xmlns="http://www.w3.org/2000/svg"><path d="m34.577 5.652c-2.864-3.145-7.485-2.755-13.686 2.552-5.408 4.628-6.564 10.486-6.495 16.779.012 1.091-1.196 1.23-1.856.773-3.492-2.422-6.55-4.329-9.046-3.634-1.913.532-1.917 1.755-.155 1.856 4.732.271 7.324.955 9.046 2.32.896.709-.157 1.178-1.04.638-2.463-1.507-5.601-2.505-9.012-2.03-1.255.175-1.668 1.218-.911 1.66.784.458 7.847.12 9.494.815.698.294 1.031.433.85.928-.293.464-.52.189-1.16 0-3.403-1.006-6.948-1.187-9.947.224-1.155.543-.652 1.785.437 1.399 3.166-1.122 6.058-1.196 8.969-1.005 1.224.081.992.384.696 1.16-4.624 12.135-1.496 19.442 1.314 25.826-6.277 4.084-7.498 9.99-5.602 15.316 1.743 4.896 7.084 8.169 13.411 8.885-2.547 7.029-5.082 13.461-2.551 19.176-2.552.104-3.379 1.773-.851 2.166 3.721.574 7.528 1.112 11.211.387 …
doge.svg<svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect width="500" height="500" fill="url(#pattern0_5766_552)"/><image id="image0_5766_552" width="225" height="222" preserveAspectRatio="none" xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAYGBgYHBgcICAcKCwoLCg8ODAwODxYQERAREBYiFRkVFRkVIh4kHhweJB42KiYmKjY+NDI0PkxERExfWl98fKcBBgYGBgcGBwgIBwoLCgsKDw4MDA4PFhAREBEQFiIVGRUVGRUiHiQeHB4kHjYqJiYqNj40MjQ+TERETF9aX3x8p//CABEIAN4A4QMBIQACEQEDEQH/xAA1AAABBQEBAQAAAAAAAAAAAAAEAAIDBQYBBwgBAAIDAQEBAAAAAAAAAAAAAAIDAAEEBQYH/9oADAMBAAIQAxAAAAD0XnzzsufBkEhQyYHWGe6F90PTzXUvRxcfY87IuXOdqxo8rTW6l9UiUvKd8tvilCD2B0UdUixr2ZncNPWyd3ktdYpSdbc7W52ef0XN6Pqtv1OcutHiGZHnlOk8uR571ylSVGUmjK2F6d9fdrjPWtKdASlV2G5++qz6dF37BsyuWrIlDpifMbp+lIekJEIXl83Ndk8D681z2GlPJtSio2rxFFj1xAaq570ay1t53FCi55vYMMBxCnQXaN0xsHDqwkh0xJ12GVX1RNoTtis8F0M …
Фейк‑СВГ будет вести себя как растр: терять чёткость, больше весить и дольше загружаться. Одна такая иконка среди десятка нормальных сразу бросается в глаза и выглядит неряшливо:
TTI (Time to Interactive) — время, через которое страница сможет реагировать на клики и прокрутку
Фейк‑СВГ особенно опасны для современных фронтенд‑фреймворков, которые часто зашивают СВГ внутрь бандла — критически важного для работы сайта Яваскрипт‑файла. От размера и скорости загрузки бандла напрямую зависит скорость загрузки страниц и TTI. Это важнейшие показатели для пользователей и поисковых роботов.
TTI (Time to Interactive) — время, через которое страница сможет реагировать на клики и прокрутку
И если честные СВГ есть смысл зашивать внутрь Яваскрипта ради всяких хитрых оптимизаций, то даже один попавший внутрь растр взорвёт бандл и резко увеличит его размер. И чем компактнее бандл и тяжелее растр, тем серьёзнее будет эффект. Размер растра несоизмерим с размером даже объёмного кода, а его структура помешает эффективному кешированию. Всё это может привести к ощутимым задержкам загрузки страниц и навигации по сайту, особенно при неидеальном интернете.
Что делать?
Если вы дизайнер, внимательно проверяйте графику в макетах и параметры её экспорта. Когда работаете с иконками, логотипами и другой векторной графикой, убедитесь, что используете честный вектор и разработчик не сможет забрать в работу фейк‑СВГ.
Если вы разработчик, следите за тем, что вам приносят дизайнеры. Обращайте внимание на необычный размер СВГ‑файлов, будьте внимательны к их виду на странице: вектор не должен быть мыльным. Если импортируете СВГ в бандл, проверьте его анализатором на наличие сюрпризов.
Если вы руководитель, покажите этот совет дизайнерам и разработчикам в вашей команде и попросите их проверить проекты на наличие такой проблемы.
P. S. Не забывайте оптимизировать любую графику перед добавлением на сайт. Растр отлично пережимается через Squoosh, а вектор через ImageOptim.
P. P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.