Форматы изображений в веб-разработке и виды графики сайта за 7 минут. + Создаем favicon.

Всю компьютерную графику можно разделить на две большие части – это растровая и векторная графика. Так же существую несколько видов графики на сайте.
Первый вид - иконки. Как правило - это небольшие простые контурные картинки, которые всячески улучшают восприятие информации. Ими могут сопровождаться текстовые надписи и заголовки, а также элементы управления и навигации. Тут идеально подойдет как раз векторный формат графики.
Второй вид - это фоновые изображения и элементы дизайна веб - приложения. Они могут быть частично прозрачными и даже содержать анимацию. Тут в основном используется растровый формат графика и иногда векторный.
Ну и третий вид - это непосредственно изображения контентной части сайта, то есть картинки которые находятся в статьях, различных фото галереях слайдерах и так далее. Тут у нас только растровые изображения.
Первый и наверное самый известный это формат JPEG/JPG (Joint Photographic Experts Group).
Следующий формат PNG (Portable network graphics) – это тоже растровый формат, но у него есть супер способность – отдельные его части могут быть прозрачными.
Наконец то мы добрались и до векторного формата - это SVG (Scalable Vector Graphics). Ну а сейчас нам достаточно знать файл в таком формате отлично подойдет для иконок нашего сайта.
А мы движемся вперед и сейчас я хочу тебя познакомить с форматом который приходит на замену всем растровым форматам о которых мы говорили ранее. На самом деле их есть несколько это и JPEG 2000 и JPEG XR но самый крутой это WebP!

👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!

🤟 Живи, а работай в свободное время! ©

[olgap.]

После всех часов и дней, проведенных за просмотром этих уроков, незнакомый рыжий чувак стал уже как брат родной)
Спасибо за твою работу!

[АртемКа-вкй]

тебе прийдется постараться, чтобы найти мой альбом и дорисовать усы)))) веселый ролик)
про svg хочется узнать побольше)

[СергійК-зт]

Величезне Вам Спасибі за Суперовий Урок!!! Все Максимально Чітко, Достуно і Детально !!! Саме те що потрібно!!!
Респект Величезний!!!

[ЭдСуровый-ър]

Эти вставки (с усиками в этом выпуске и песнями в прошлом) - то, что нужно. Особенно когда сидишь уже 20-ый час и что-то учишь - такие моменты на секунду дают расслабиться. Спасибо тебе за видосы)

[artem_bohak]

Мої дії:
1. Зайшов на сайт і декодував картинку
2. Офігів від того, що маленький розмір + фічи що й у png
3. Подивився на календар - 2022 рік
4. Перевірив кросбраузерність - 97%
5. У мене зачесалися руки)
Дякую за контент)!!

[ВиталийКабаков-фэ]

Конечно нужно подробнее про svg (в особенности косяки в ie и как с ними бороться). Про векторные шрифты тоже надо. Вообще все интересно, особенно от знающего человека!

[АаронБрилль]

Евгений, я лично жду видео на все возможные темы, в самообразовании все средства хороши, особенно как вы - делаете это бесплатно. Однозначно лойс !

[КириллКрючков-эс]

Спасибо тебе огромное! Этот труд бесценен. Быстро и понятно объяснить материал не каждому дано, поймет даже абсолютный чайник :)

[lessystar]

"просто напиши комментарий" - така інтонація і міміка, суцільний позитив!😂

[annagrigorewa]

Женя, как всегда, отличное видео! Про SVG и новые форматы изображений очень интересно! Ждём о них видео! И как всегда видео смотрю до самого конца)))) Твой девиз и музыка в конце - огонь)))

[dima_king]

Сначала ставлю лайк а потом смотрю видос:) Спасибо

[demptd]

Дякую!
Дуже цікаве відео, тепер при навчанні буду завжди на проектах створювати favicon))

[mikebenchak]

Ты как всегда вовремя) я недавно поюзал svg, и влюбился в этот формат, а именно то что с ним можно делать. Анимации с помощью css, js. Я только за видео по графике. И ещё буду благодарен за информацию по верстке шаблонизатора ruby ERB, если тебе доводилось с ни работать. Мне дали проект, поправить вёрстку. Много времени отбирает разобраться. Всего хорошего тебе!

[skyreg]

Жду видео про формат svg. Как всегда понятно и интересно. 👍

[tyyyyuuuuuuuuijjjiio]

Про webp интересно. Действительно сейчас всё чаще его встречаешь, и круто если он оптимизирован лучше jpg (не только для web, но и для любой техники). Остальные же, я думаю, должны знать большинство даже не связанных с web. Хотя если человек никогда не отображал расширения файлов, не рисовал хотя бы в Paint - может случиться такой фейл )
В любом случае лайк! Обучайся, развивайся, живи...

[alexr]

впервые услышал про формат WebP! спасибо, за новую информацию! Буду ждать видео по svg

[dellknow]

Все було дуже цікаво, дякую за відео.

[artyomvoytenko]

Полезные видео как из автомата пошли) Спасибо за разъяснения)

[АлександрФримен-пж]

Спасибо тебе, Евген! столько годного контента.. хороший ты мужик!)))

[lera]

Какое у тебя классное рабочее место ^^ космос!

Про svg отдельный урок хочу =)
WebP просто зверь


Спасибо за ролик!