#графика_для_сайта — Public Fediverse posts

Веб-графика, которая вредит: что разработчики делают не так

Обратимся к статистике: по данным с https://httparchive.org/ за последние 6 лет средний размер веб-страницы значительно увеличился. Если в декабре 2019 года средний вес десктопной веб-страницы составлял 1,9 МБ, то сейчас он уже 2,9 МБ для десктопа и 2,6 МБ для мобильных устройств. Это рост на 50% за 6 лет, причём изображения составляют до 40% общего веса страницы. С увеличением разрешения экранов, усложнением дизайна и тенденцией к использованию изображений высокого качества нагрузка на сайты продолжит расти. Это напрямую влияет на скорость загрузки, потребление трафика и, в конечном итоге, на пользовательский опыт. Просматривая недавно пул-реквест, я заметил, что туда добавили новые изображения. Меня удивил выбор формата: для картинок без прозрачности использовали PNG. Это кажется избыточным, так как для многоцветных изображений лучше подходят форматы вроде JPEG, которые весят меньше. Я решил провести эксперимент: оптимизировал и переконвертировал изображения в JPEG, WebP и AVIF, сохранив качество на глаз неотличимым от оригинала.

https://habr.com/ru/companies/alfa/articles/1012848/

#Веб #графика_для_сайта #html #css #react #nodejs #avif #webp

SVG, Canvas, WebGL, WebGPU — кто здесь вообще главный? Большой тест 2D-графики в браузере

В последние годы спрос на 2D/3D-инструменты в веб-сервисах растет довольно стремительно, технологии развиваются, появляются новые подходы и библиотеки — а вместе с ними растёт и путаница: что где использовать, где грань между похожими решениями и почему у разработчиков часто возникают противоположные мнения? Так что я решила устроить небольшой тест 2D-решений: посмотреть, на что они реально способны, понять, почему результаты местами вызывают большое удивление, и ответить себе (и вам) на вопрос: а WebGPU вообще зачем? Спойлер: всё далеко не так очевидно, как кажется.

https://habr.com/ru/articles/970286/

#canvas #webgl #webgpu #svg #анимация #2d #графика_для_сайта #графика_для_игр #браузерный_движок #браузерные_игры

24 «привычки» оптимизации изображений

Я работаю с графикой для web с тех бородатых времен, когда случайное нажатие кнопки wap на телефоне могло привести к инфаркту и моментальному списанию всех средств на счете. В погоне за мобильной доступностью цифровых продуктов в те времена приходилось исхитриться каждый раз и делать это по новому. Сегодня, специалисты в вэб — как спецы в геймдеве «оптимизация? не не слышал» для игр у тебя должна быть 5090, в для сайтов 5g и гигабит, 2026 ведь на носу. Я решил поделится теми «привычками» оптимизации контента/графики, которые уже 20 лет в моем арсенале и остаются актуальными и по сей день.

https://habr.com/ru/articles/969236/

#webразработка #графика #графика_для_сайта #адаптивная_вёрстка #адаптивный_вебдизайн #адаптивный_сайт #оптимизация_изображений #оптимизация #оптимизации #svg