Использовать SVG или увеличенные изображения для Retina дисплеев?

Question

[weranda]

Приветствую.
Раньше никогда не делал отдельные изображения для дисплеев с увеличенной плотностью пикселей — оно и так нормально смотрится, вроде. Решил сделать, но теперь не знаю что лучше, к примеру, для логотипа: растр (png, webp) или вектор (SVG). C изображениями, вроде, все понятно — определил скриптом значение devicePixelRatio, добавил дополнительный класс и задал нужные правила стилей. А вот с SVG не все так однозначно, как мне кажется. По мне, так будет много лишнего в коде страницы (точки, пути...).
Что посоветуете и почему?

Answer 1

[Ankhena]

Использовать SVG или увеличенные изображения для Retina дисплеев?

Да!
:)

Для растровых изображений использовать <picture> (не забудьте полифил для поддержки ИЕ) или атрибут srcset.

Да векторных - SVG.

Логотип это векторное изображение. Ну кроме исключительных случаев криворукости, не будем о них.

Comments

[weranda]

А почему именно векторным должен быть логотип, а не растровым?

[Ankhena]

weranda, потому что в большинстве случаев он изначально такой. Логотип это эмблема, символ, какой-то знак, рисовать его в векторе самое умное.
Если в нем есть шрифты, их тоже переводят в кривые.
Чтобы его можно было размещать где угодно, на каком угодно размере и не зависеть ни от чего.