Форматы изображений в веб-разработке и виды графики сайта за 7 минут. + Создаем favicon.
Всю компьютерную графику можно разделить на две большие части – это растровая и векторная графика. Так же существую несколько видов графики на сайте.
Первый вид - иконки. Как правило - это небольшие простые контурные картинки, которые всячески улучшают восприятие информации. Ими могут сопровождаться текстовые надписи и заголовки, а также элементы управления и навигации. Тут идеально подойдет как раз векторный формат графики.
Второй вид - это фоновые изображения и элементы дизайна веб - приложения. Они могут быть частично прозрачными и даже содержать анимацию. Тут в основном используется растровый формат графика и иногда векторный.
Ну и третий вид - это непосредственно изображения контентной части сайта, то есть картинки которые находятся в статьях, различных фото галереях слайдерах и так далее. Тут у нас только растровые изображения.
Первый и наверное самый известный это формат JPEG/JPG (Joint Photographic Experts Group).
Следующий формат PNG (Portable network graphics) – это тоже растровый формат, но у него есть супер способность – отдельные его части могут быть прозрачными.
Наконец то мы добрались и до векторного формата - это SVG (Scalable Vector Graphics). Ну а сейчас нам достаточно знать файл в таком формате отлично подойдет для иконок нашего сайта.
А мы движемся вперед и сейчас я хочу тебя познакомить с форматом который приходит на замену всем растровым форматам о которых мы говорили ранее. На самом деле их есть несколько это и JPEG 2000 и JPEG XR но самый крутой это WebP!
.ico (favicon.ico) поддерживает прозрачность и используется для указания графической иконки нашего сайта во вкладке браузера. А так же для отображения иконки веб приложений.
👉 Онлайн декодер WebP - https://squoosh.app/
👉 Сервис создания favicon - https://www.favicon.by/
🔴 Получить доступ к плюшкам + поддержать канал: https://www.patreon.com/freelancerlifestyle
🔴 Telegram канал: https://t.me/freelancer_lifestyle (https://teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: https://t.me/flschat (https://teleg.run/flschat)
🔴 Facebook: https://www.facebook.com/freelancerlifestyle
🔴 Instagram: https://www.instagram.com/freelancer.lifestyle
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: https://www.youtube.com/c/freelancerlifestyle
🤟 Живи, а работай в свободное время! ©
Видео Форматы изображений в веб-разработке и виды графики сайта за 7 минут. + Создаем favicon. канала Фрилансер по жизни - IT и фриланс
Первый вид - иконки. Как правило - это небольшие простые контурные картинки, которые всячески улучшают восприятие информации. Ими могут сопровождаться текстовые надписи и заголовки, а также элементы управления и навигации. Тут идеально подойдет как раз векторный формат графики.
Второй вид - это фоновые изображения и элементы дизайна веб - приложения. Они могут быть частично прозрачными и даже содержать анимацию. Тут в основном используется растровый формат графика и иногда векторный.
Ну и третий вид - это непосредственно изображения контентной части сайта, то есть картинки которые находятся в статьях, различных фото галереях слайдерах и так далее. Тут у нас только растровые изображения.
Первый и наверное самый известный это формат JPEG/JPG (Joint Photographic Experts Group).
Следующий формат PNG (Portable network graphics) – это тоже растровый формат, но у него есть супер способность – отдельные его части могут быть прозрачными.
Наконец то мы добрались и до векторного формата - это SVG (Scalable Vector Graphics). Ну а сейчас нам достаточно знать файл в таком формате отлично подойдет для иконок нашего сайта.
А мы движемся вперед и сейчас я хочу тебя познакомить с форматом который приходит на замену всем растровым форматам о которых мы говорили ранее. На самом деле их есть несколько это и JPEG 2000 и JPEG XR но самый крутой это WebP!
.ico (favicon.ico) поддерживает прозрачность и используется для указания графической иконки нашего сайта во вкладке браузера. А так же для отображения иконки веб приложений.
👉 Онлайн декодер WebP - https://squoosh.app/
👉 Сервис создания favicon - https://www.favicon.by/
🔴 Получить доступ к плюшкам + поддержать канал: https://www.patreon.com/freelancerlifestyle
🔴 Telegram канал: https://t.me/freelancer_lifestyle (https://teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: https://t.me/flschat (https://teleg.run/flschat)
🔴 Facebook: https://www.facebook.com/freelancerlifestyle
🔴 Instagram: https://www.instagram.com/freelancer.lifestyle
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: https://www.youtube.com/c/freelancerlifestyle
🤟 Живи, а работай в свободное время! ©
Видео Форматы изображений в веб-разработке и виды графики сайта за 7 минут. + Создаем favicon. канала Фрилансер по жизни - IT и фриланс
Показать
Комментарии отсутствуют
Информация о видео
3 февраля 2020 г. 15:02:23
00:07:07
Другие видео канала
![Адаптивные изображения. Практические приемы верстки картинок. CSS object-fit HTML picture.](https://i.ytimg.com/vi/nTtuiBXKp88/default.jpg)
![CSS transform. 2D и 3D трансформации translate, scale, rotate и другие](https://i.ytimg.com/vi/uQEGUpsnqsw/default.jpg)
![Все про CSS отступы padding и margin. Объяснение на практике за 33 минуты.](https://i.ytimg.com/vi/uSGKPYEPY9M/default.jpg)
![Сколько зарабатывают программисты и другие IT-специалисты? Рассказываю о своем доходе на фрилансе!](https://i.ytimg.com/vi/NhpQiiVYEv4/default.jpg)
![](https://i.ytimg.com/vi/O8O-80aq0Oc/default.jpg)
![Графика для веба, которую все используют неправильно. Про JPG/PNG, WebP и SVG, а также мощь HTML5](https://i.ytimg.com/vi/0n6Tk-2Dimc/default.jpg)
![НОВЫЙ КОДЕК заменит JPEG и MPEG!](https://i.ytimg.com/vi/MUHOLWmI5yA/default.jpg)
![Форматы изображений, часть 1](https://i.ytimg.com/vi/P1K0ZNGczsk/default.jpg)
![Как создавать SVG спрайты? | SVG Sprites](https://i.ytimg.com/vi/dPoRsolsCjA/default.jpg)
![WEBP формат изображений. Плюсы и минусы формата webp.](https://i.ytimg.com/vi/_4bb0AdhYUg/default.jpg)
![CSS Grid Layout. Свойства определения сетки grid-template и другие](https://i.ytimg.com/vi/FPL4hnmA84A/default.jpg)
![Что такое растровая и векторная графика?](https://i.ytimg.com/vi/fSLIUGZL9Vo/default.jpg)
![Prepros что это. Как пользоваться prepros // Сборка фронтэнда // Компилятор SASS KIT](https://i.ytimg.com/vi/BqO5Pj26om8/default.jpg)
![Что такое JAVASCRIPT? Как работает JS? Пишем первую программу на JavaScript. Уроки JAVASCRIPT с нуля](https://i.ytimg.com/vi/wdViO9OcQzs/default.jpg)
![Методология БЭМ за 17 минут. Пример верстки по БЭМ методологии // Фрилансер по жизни](https://i.ytimg.com/vi/HihYQVuH64U/default.jpg)
![WebP - новый формат для изображений | Squoosh, picture, оптимизация](https://i.ytimg.com/vi/U167pqYXs9U/default.jpg)
![Как правильно вставлять SVG — HTML Шорты](https://i.ytimg.com/vi/TNX0-JLdM_U/default.jpg)
![Адаптивная вёрстка сайтов за 37 минут + макет. Тебе не нужен Bootstrap! [ENG SUBS]](https://i.ytimg.com/vi/XbnAKjjlgc4/default.jpg)
![Иконочный шрифт. Подключение Font Awesome. Создание иконочного шрифта из SVG файлов.](https://i.ytimg.com/vi/QYwI3LRCnRE/default.jpg)
![Все о CSS переходах (transitions) за 16 минут. CSS анимация. Часть первая.](https://i.ytimg.com/vi/yZFg3cuq_LU/default.jpg)