Оптимизация изображений под разные устройства: работать с одним изображением фиксированного размера или с несколькими изображениям?
Добрый день!
До недавнего времени, мне казалось хорошей идеей, использовать всего одно изображение для всех устройств. И с помощью css (object-fit, background), манипулировать его размерами, и плавно изменять его на любых экранах.
Видимо я был не совсем прав, так?
Похоже, что хорошим решением, в данной ситуации было бы использование тега picture и атрибут srcset. И грузить изображения разных размеров, под разные устройства, с помощью брейк поинтов атрибута srcset. Так ли это?
Раньше, я использовал picture, только ради того, что бы выводить туда webp, и если браузер не может webp, грузить всё остальное...
Как решение использования тега picture повлияет на inline svg? Могу ли я инлайнить svg в srcset? Или лучше, просто давать ссылку на svg файл?
Ну и бонусом...
Как поменять цвет svg, если он подгружается через background css?) Например при состояние ховер? Свойства fill, будут работать? Или в ховер кидать новый background и в коде svg уже менять его цвет?
Антон Литвиненко, Ясно, спасибо ) Не хотел просто этот громоздкий код вставлять.
А Вы с помощью спрайтов иконки выводите? Я просто не могу определиться. Одни говорят, что надо их перегонять в иконочные шрифты и спрайт из них делать, другие говорят, что иконочные шрифты уже не модно... В итоге я просто инлайню.
Ещё недавно читал про svg use, и там вроде бы говорили, что если подключено через use, и свойствами css, меняешь характеристики этого svg, то те блоки, где такой svg повторно переиспользуется, так же приобретёт характеристики изменённого svg... Или я что-то неправильно понял?
picture нужен для того, чтобы разные устройства получали разные картинки.
Заинлайненный svg это разметка, она загрузится вся целиком и никакой экономии вы не получите.
Если при разных размерах окна нужны разные svg, то вы просто можете скрывать ненужные path (или другие детали) стилями.
Простой
Средний
