Обзор форматов для веб дизайна JPG WEBP PNG И SVG
Вставка
- Опубліковано 18 жов 2024
- Хотите сайт на Тильде? Мы можем помочь: dolginstudio.com/
Мой обучающий курс по работе в Tilda dolginstudio.c...
Хотите отправить сайт на обзор в ближайший стрим? donatty.com/do...
Хотите 1 месяц в подарок после первой оплаты за Тильду? Регистрируйтесь по ссылке tilda.cc/?r=14...
Тильда слишком дорого? Попробуйте Craftum craftum.com/id...
/ germandolgin
Мой инстаграм: / germandolgin
Мой второй канал / germandolginlive
Поддержите автора: donatty.com/do...
Хотите покупать фотографии со стоков дешево? Вам сюда: shopdiz.pro/r/...
Вступление 00:01
Отличия Растровой и вектороной графики 00:44
Про PNG: 6:30
Про JPG: 9:18
Про WEBP: 12:00
Про SVG: 14:30
Выводы: 17: 35
Дружище, не сердчай, но так и хочется оставить такой комментарий:
У тебя получился хороший обзор форматов для начинающих веб-разработчиков, которые как правило работают по готовым шабнолам CMS или с использованием конструкторов и не изучают детально ни веб-дизайн, ни фронтенд-разработку.
Поэтому вот несколько дополнений для фронтенд-разработчиков:
1) В первую очередь, SVG - это не просто формат изображения. Это язык разметки векторных изображений, основанный на XML. Благодаря этому его можно напрямую встраивать в любой код (будь то HTML, CSS или JS) и взаимодействовать с ним. Так, например, можно перекрасить изображение или его элементы и анимировать их.
2) У webp (WebPage) и правда есть проблемы с совместимостью. И проблема не только в поддержке типами устройств, но и версиями браузеров. Из-за этого разработчикам придется хранить на серверах изображения и в формате webp, и в jpg/png (первые для производительности, вторые для совместимости)
Из этого вытекает несколько советов для веб-дизайнеров:
1) когда вы рисуете векторные элементы сайта, на финальном этапе всегда убирайте лишние слои и группы слоев, преобразуйте обводку в кривые. И по возможности делайте составной контур (для элементов, окрашиваемых в один цвет).
2) Чтобы во время правок не возникло проблем, всегда храните исходники в том формате, в котором его получили. А если как-то изменяете изображение, сохраните файл с расширением редактора, в котором вносили изменения
3) Не заморачивайтесь с конвертацией в webp. Этим легче заняться веб-разработчикам, поскольку они лучше знают, какое изображение насколько хорошо необходимо сжать.
4) Хранение изображений:
- если вы храните очень важные исходники, и вам важно их качество, используйте png
- если это растровое изображение, которое нужно хранить долго, используйте jpg
- сейчас webp годится только для оптимизации скорости загрузки сайта
5) (важно для всех) Помните о размере изображения. Не важно в каком формате хранится картинка, но если это "8k ultra hd исходник", который отображается на сайте в блоке 360x200px, - это не оптимально и не неразумно
P.S. Комментарий получился довольно душным для видео про форматы изображений, но думаю эта информация будет многим полезна
Спасибо за видео.
Спасибо. Чётко разложил!)
Благодарю, четко и понятно) и про webp интересно
Балдёж 🔥🔥🔥
Спасибо!!!
Как всегда подача огонь! за что и нравится твой канал. Теперь лови запрос) Битрикс 24 - как на нем сайты продвигаются в плане сео. И вставка 3д моделей в тильду. Готов ждать)) так как у самого руки не доходят...
Я работаю в Кореле )))) Кстати, у Корела выходят обновления и 2021 лицензия стоит 720 евриков, значит кому-то он ещё нужен. В принципе, большинство провинциальных типографий на нём сидят, правда вряд ли на лицензиях. И да, мне 45 )))
Вордпресс уже давно поддерживает WebP
13:33 Существует встроенный плагин просмотра webp.
Молодец!!!🌸💋❤️
Привет, Герман! А есть ли у тебя видос по работе с графикой и сжатию файлов? Планируешь?
Кстати хорошая тема, но пока я не готов инструкции по теме писать
Почему вбп, а не вебпи? Также произносить даже легче?
🤘😁
Герман респект тебе за контент)) Подскажи пожалуйста: Как ты делаешь сертификаты, скрины отзывов, mockup со скринами внурти на десктопе четкими и эти же сертификаты, скрины отзывов, mockup со скринами четкими на планшете и мобилке (изображения со множеством мелкого текста) ??? Я имею ввиду: Ты на десктоп загрузил сертификаты или mockup со скринами например в разрешении 500х600рх они четко под размер экрана десктопа (все слова четкие), а когда проводишь адаптацию на мобилке то эти же изображения (сертификаты и отзывы) если в том же разрешении просто уменьшать то теряют четкость!!!! Вообще размытые на мобилке. Подскажи пожалуйста что делать с изображениями именно которые имеют текста много чтобы и на десктопе и на мобилке были четкими???? Очень надо!!! Спасибо
Привет. В первую очередь я бы порекомендовал использовать Jpg как ни странно, во вторую если вам надо 500 на 600 на сайте то саму фотографию делайте 1000 на 1200
@@germandolgin Попробую) Отпишусь. Спс
@@germandolginдостаточно масштабирования х1,5 относительно блока при сохранении изображения