Спрашиваю, так как не проводил тесты с различными вариантами по загрузке, в принципе с инспектором хрома это не проблема сделать. Хочу больше заняться анимацией и версткой в целом. Perfomance вкладка и эксперименты с webgl,canvas, gsap еще впереди. Прочитал про reflow, repaint и как при анимации оптимизировать код. Но на самом деле еще не до конца разобрался с графикой в целом.
У меня как верстальщика, следующие задачи для понимания:
Выбор формата:
*png, webp - изображения с резкими контурами, контрастом, прозрачными областями. Фотографии с текстом, интерфейсами и т.д
*jpg - обычные фотографии без резких контуров. Фотографии чего угодно снятого на фотоаппарат подходящего по тематике.
*svg - иконки, иллюстрации, но слишком комплексные объекты с тенями, эффектами могут весить значительно больше растрированной версии png.
gif- поддерживают анимацию, горизонтально сжимает изображение
#Вопрос
Как браузер отрисовывает/рендерит изображения? Фотография это бинарный файл, браузер должен прочитать и отрисовать. Помимо http запроса, в чем разница между чтением image.png с удаленного источника или встроенного через data:uri. Это посто набор символов, который надо скачать с другого сервера или распарсить из html. И что подразумевает кеширование изображения. Браузер все равно же парсит этот кусок бинарных данных?
Информацией не владею, мысли высосаны из пальца
Вариант использования:
- data:uri - нету запроса к серверу, вроде как есть ограничения на объем, есть тулзы для комфортной работы, кеширование через css файл(хотя без ответов на парсинг, пока под вопросом).
Минусы:
Больше обьем получается, чем оригинальный файл.
Блокирует парсинг html документа
-sprite(css-background) - уменьшает количество запросов к серверу
Как манипулировать размером и опишите плюсы, минусы способа, кроме как поддержки браузерами, интересна сторона оптимизации и производительности.
- trnasform: scale();
- background-size: value value;
sprite only svg(symbol) - инлайново встроить можно, через ajax загрузить или оставить внешним файлом
Уменьшение запросов к серверу. Возможно управления через font-size.
#Вопрос
Еще хотел бы уточнить первый вопрос. Как браузеру обходится рендер svg как внешне загруженных, просто файлом с расширением svg, так и инлайновые, это нагружает процессор, если встроенные или больше, если через внешнюю ссылку? Внешние файлв брпузер параллельно обраьатывает, также лучше?
Альтернатива спрайтам:
Для картинок я так понимаю лучше всего просто использовать lazyLoad, который загрузит картинки когда надо. Для иконок определиться с svg-symbol или svg-sprite. Про семантику и accessibility не спрашиваю. Интересно просто удобство использования в проектах и оптимизация.
Какие вы предпочитаете варианты и почему, желательно все прокомментировать. Использовал для иконок svg-symbol, для картинок lazyload. Не использовал svg-sprite(background), data:uri, так как довольствовался вариантами выше. Хочу себе сборку окончательную написать со всеми вариантами.
Средний
Средний
