Сайт под Retina и SVG графика — что это?

Многие из вас видели в описании нашей популярной темы SimplePuzzle такие надписи как «Retina-ready» и «используется SVG графика». Но что означают эти термины и зачем вообще они вам нужны? Именно об этом сегодня я расскажу в своей статье. Постараюсь использовать поменьше непонятной большинству технической терминологии и лишней информации, написать статью «для людей».

что такое Retina дисплей

Что такое Retina

Retina — это название ЖК дисплеев с такой плотностью пикселей (точек) на 1 дюйм, что человеческий глаз уже не может их различать. Изначально о новой технологии в 2010 году заявила компания Apple и сейчас она массово используется в их устройствах: в мониторах, телефонах, планшетах и т.д. Естественно, большая плотность пикселей позволяет дисплеям поддерживать более высокие разрешения. Сейчас  в продаже есть 27″ мониторы с разрешением в 5К (5120х2880). Если в начале Ретина применялась только на устройствах Apple, то на сегодняшний день она массово применяется и в продукции других знаменитых брендов: Samsung, LG и прочие. Да уже и китайские разнообразные гаджеты поддерживают Ретину 🙂

Пример пикселей на Retina

Появление и широкое распространение экранов с Retina требует использования детализированной графики. Какой смысл смотреть на экране с разрешением в 5К (5120х2880) картинку 2К  (2048×1024) или ниже и видеть расплывчатое изображение? То же самое и с сайтами — смотреть на «мыльные» изображения в дизайне устаревшей темы не приятно. Но и использовать в элементах дизайна графику с высоким разрешением не лучший выход, так как и её вес увеличится пропорционально разрешению. А если завтра появятся мониторы в 10к, в 100к и так далее, то всё переделывать каждый раз с начала?

SVG графика на замену растровых картинок

Вот тут-то на помощь приходит векторная графика, которая отлично подстраивается под любые высокие разрешения. SVG (Scalable Vector Graphics) переводится как «масштабируемая векторная графика». Рисовать изображения в SVG формате можно в Adobe Illustrator. Если с рисованием проблемы — не беда, в  сети уже достаточно сайтов-библиотек с иконками любых форматов, и SVG в их числе

Фото сравнения картинки в PNG и SVG

Кроме отличной масштабируемости SVG графика обладает и другими достоинствами, среди которых можно выделить следующие:

  • вес векторной графики существенно меньше аналогичных растровых изображений, что в результате положительно сказывается на скорости загрузки сайта в целом
  • при загрузке картинок посылаются HTTP запросы на сервер, для SVG графики этого можно избежать. В результате — ускоряется загрузка сайта
  • текст в SVG является обычным текстом, а не картинкой. Он отлично индексируется всеми поисковыми системами, его можно выделять и копировать.
  • Файлы SVG можно редактировать прямо через текстовый редактор, отлично поддаются сжатию.
  • SVG графику можно анимировать с помощью javascript

Говоря откровенно, на сегодняшний день использование растровых картинок в элементах дизайна  — это невежество и отсталость. Хотя на постсоветском пространстве, к сожалению, это далеко не редкость. Многие «профессионалы» продолжают лепить новые шаблоны с растровыми изображениями, как это делали ещё в прошлом веке.

PS. Надеюсь, что статья была полезна и поможет при выборе нового шаблона для вашего сайта. А мы продолжаем работать над расширением функционала в наших продуктах. Подписывайтесь на обновления блога и рекомендуйте друзьям.

Спасибо, что используете наши продукты!

Комментарии 2

    • Фотографии, которые тоже являются растровой графикой, если мы говорим о них, никуда не пропадут. Имеются ввиду элементы оформления дизайна, такие как иконки, логотипы и т.п. Конечно, подбирать фотографии нужно качественные.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *