Форматы изображений в веб-разработке и виды графики сайта за 7 минут. + Создаем favicon.
ฝัง
- เผยแพร่เมื่อ 2 ก.พ. 2020
- Всю компьютерную графику можно разделить на две большие части - это растровая и векторная графика. Так же существую несколько видов графики на сайте.
Первый вид - иконки. Как правило - это небольшие простые контурные картинки, которые всячески улучшают восприятие информации. Ими могут сопровождаться текстовые надписи и заголовки, а также элементы управления и навигации. Тут идеально подойдет как раз векторный формат графики.
Второй вид - это фоновые изображения и элементы дизайна веб - приложения. Они могут быть частично прозрачными и даже содержать анимацию. Тут в основном используется растровый формат графика и иногда векторный.
Ну и третий вид - это непосредственно изображения контентной части сайта, то есть картинки которые находятся в статьях, различных фото галереях слайдерах и так далее. Тут у нас только растровые изображения.
Первый и наверное самый известный это формат JPEG/JPG (Joint Photographic Experts Group).
Следующий формат PNG (Portable network graphics) - это тоже растровый формат, но у него есть супер способность - отдельные его части могут быть прозрачными.
Наконец то мы добрались и до векторного формата - это SVG (Scalable Vector Graphics). Ну а сейчас нам достаточно знать файл в таком формате отлично подойдет для иконок нашего сайта.
А мы движемся вперед и сейчас я хочу тебя познакомить с форматом который приходит на замену всем растровым форматам о которых мы говорили ранее. На самом деле их есть несколько это и JPEG 2000 и JPEG XR но самый крутой это WebP!
.ico (favicon.ico) поддерживает прозрачность и используется для указания графической иконки нашего сайта во вкладке браузера. А так же для отображения иконки веб приложений.
👉 Онлайн декодер WebP - squoosh.app/
👉 Сервис создания favicon - www.favicon.by/
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©
![[柴犬ASMR]曼玉Manyu&小白Bai 毛发护理Spa asmr](http://i.ytimg.com/vi/0TsXQ7z2Dh4/mqdefault.jpg)
После всех часов и дней, проведенных за просмотром этих уроков, незнакомый рыжий чувак стал уже как брат родной)
Спасибо за твою работу!
вот прям про меня, тоже испытываю похожие эмоции)))
@@Xyjail ага))то злюсь на него когда что то не получается,то обожаю когда все идет как надо!!в натуре как брат!
0:01 какой интересный символ на заднем фоне...
тебе прийдется постараться, чтобы найти мой альбом и дорисовать усы)))) веселый ролик)
про svg хочется узнать побольше)
Ну, я попробую)
Да да только столкнулся и офигел , что это?
@@FreelancerLifeStyle 11212
Просьба. Пореже дёргать видос сменой кадра. А в общем - с удовольствием смотрю твой канал. Респект и уважуха!
Ок, что-то придумаю)
@@FreelancerLifeStyle не, не, не)) оставь все как есть)) очень даже хорошо! Без смены будет гг
Конечно нужно подробнее про svg (в особенности косяки в ie и как с ними бороться). Про векторные шрифты тоже надо. Вообще все интересно, особенно от знающего человека!
Супер! все будет!
Мелкософт прекратил поддержку ie (вроде) вместе с Win 7. Поэтому можно забыть и про ie, и про косяки в нём.
Раньше приходилось изучать особенности IE6-7-8, а сейчас IE больше нет, жить стало проще 🤣
@@FreelancerLifeStyle Спасибо за видео, хотелось поподробнее про баги svg с ie (хотя-бы ради приличия в11-м , остальные версии нереально охватить). То с чем столкнулся: масштаб bg из svg полностью не управляемый и ссылки иконок svg меняют масштаб при наведении.
Эти вставки (с усиками в этом выпуске и песнями в прошлом) - то, что нужно. Особенно когда сидишь уже 20-ый час и что-то учишь - такие моменты на секунду дают расслабиться. Спасибо тебе за видосы)
Евгений, я лично жду видео на все возможные темы, в самообразовании все средства хороши, особенно как вы - делаете это бесплатно. Однозначно лойс !
Спасибо!
Женя, как всегда, отличное видео! Про SVG и новые форматы изображений очень интересно! Ждём о них видео! И как всегда видео смотрю до самого конца)))) Твой девиз и музыка в конце - огонь)))
Спасибо большое! Очень ценю!
Спасибо тебе огромное! Этот труд бесценен. Быстро и понятно объяснить материал не каждому дано ,поймет даже абсолютный чайник :)
Пожалуйста! Рад что полезно!
Про SVG однозначно нужен ролик. И, чем подробнее, тем лучше. Вот столкнулся с проблемой, как поменять цвет при необходимости, например. Да и вообще, узнать о его возможностях - что и как с SVG можно делать. Спасибо за позитивные, содержательные и познавательные ролики! RESPECT
С нетерпением жду видоса про svg. Спасибо за твой труд.
Отлично, будет!
Автору канала выражаю благодарность за годный контент. Единственный канал где я ставлю лайк до того как запускаю видео. Для меня уже как бренд качества.
Огромное спасибо за Вашу работу! С Вами сложное становится простым
Всё по делу, без воды! Круто!!! С SVG уже ознакомился, но думаю не все варианты использования узнал. А именно Спрайты. Не перестаю говорить спасибо!
Отличная подача, всё понятно и по существу. Спасибо!
Ти просто супер! 4 рази намагався навчитися верстати сайти і нічого не виходило, аж поки не знайшов твої відео. Не можу робити того, чого не розумію, а ти так навчаєш, що не зрозуміти просто неможливо 👍👍👍
Как всегда, объяснил простым доступным языком про важные моменты при вёрстке. Сделайте пожалуйста урок про SVG. Спасибо Вам.
Спасибо! Сделаю
Спасибо тебе, Евген! столько годного контента.. хороший ты мужик!)))
Рад что полезно!
Величезне Вам Спасибі за Суперовий Урок!!! Все Максимально Чітко , Достуно і Детально !!! Саме те що потрібно!!!
Респект Величезний!!!
Будь ласка!
Додаткове “ Величезне Спасибі” за Ваш Практичний Досвід , різноманітні Ваші “лайфхаки” та поради Практикуючого Експерта... Вони Безцінні... в книжках такого не знайти... Це роки практичного досвіду....
Респект Величезний !!!
Сначала ставлю лайк а потом смотрю видос:) Спасибо
Спасибо!
Тож
Спасибо тебе большое за твой канал!!!
Все так понятно и быстро, я уже за месяц научился верстать простые макеты, и все благодаря тебе!!,
Жду видео про формат svg. Как всегда понятно и интересно. 👍
Ок, будет)
как всегда все просто и без воды, огромное спасибо Жэкос ))))
Спасибос!
Женя, ты как всегда великолепен!
Ты как всегда вовремя) я недавно поюзал svg, и влюбился в этот формат, а именно то что с ним можно делать. Анимации с помощью css, js. Я только за видео по графике. И ещё буду благодарен за информацию по верстке шаблонизатора ruby ERB, если тебе доводилось с ни работать. Мне дали проект, поправить вёрстку. Много времени отбирает разобраться. Всего хорошего тебе!
Спасибо!
лучшый контент по верстке что когда либо был!!!!
Евгений Вам большое СПС за ваш труд. От вас учусь всему. Вы лучший!!!
Урок это практика а практика это лучше чем лекция
Спасибо за видос
Пожалуйста!
Полезная инфа! Хотелось бы побольше узнать о работе с svg-форматом. Надеюсь, будет подробный видос от тебя на эту тему.
Спасибо, будет
Все отлично , уроки проходят довольно весело , а главное , что все понятно и на предельно ясном языке . JavaScript туториалы будут ?
Не хочется смотреть других , к тебе уже привык 😄👍🏻
Спасибо! Будут
Мої дії:
1. Зайшов на сайт і декодував картинку
2. Офігів від того, що маленький розмір + фічи що й у png
3. Подивився на календар - 2022 рік
4. Перевірив кросбраузерність - 97%
5. У мене зачесалися руки)
Дякую за контент)!!
Как всегда на высоте) и приколы тоже появляются)))
Спасибо!
Какое у тебя классное рабочее место ^^ космос!
Про svg отдельный урок хочу =)
WebP просто зверь
Спасибо за ролик!
Пожалуйста!
Спасибо Женя👍🏽🌄) Как всегда все очень полезно! Думаю если будет продолжение в сторону svg то ребята будут рады🙂. В чате было много вопросов по данной теме)
Понял, теба большая, потянет на отдельный плейлист видимо)
Жду видео про формат svg! Крутой канал, материал то что надо. Спасибо
Вступи з залякуваннями - це просто шедевр!😄
Полезные видео как из автомата пошли) Спасибо за разъяснения)
Спасибо!
Про webp интересно. Действительно сейчас всё чаще его встречаешь, и круто если он оптимизирован лучше jpg (не только для web, но и для любой техники). Остальные же, я думаю, должны знать большинство даже не связанных с web. Хотя если человек никогда не отображал расширения файлов, не рисовал хотя бы в Paint - может случиться такой фейл )
В любом случае лайк! Обучайся, развивайся, живи...
Спасибо за урок. Информация про favicon как раз была нужна)))
впервые услышал про формат WebP! спасибо, за новую информацию! Буду ждать видео по svg
Пожалуйста!
Благодарю Вас за видео.
Полезно и информативно! Лайк!
"просто напиши комментарий" - така інтонація і міміка, суцільний позитив!😂
Дякую!
Дуже цікаве відео, тепер при навчанні буду завжди на проектах створювати favicon))
Спасибо за ролик! Хотелось бы узнать больше про webp и svg)
Благодарю за видео!
Спасибо! Как всегда все очень полезно!
Спасибо за твой труд) Ты очень помогаешь!
Я смотрю все видео) как обычно, лайк!
Спасибо!
крутой ролик, как всегда спасибки)
Отличное объяснения спасибо!
Позитивный чувак с отличной подачей)) Благодарю за информацию! Ясен-красен, подписался)
Спасибо!
0
4
Все понял, Большое спасибо!!!
Жека, красавчик! Спасибо за видосы! Так держать!
Пожалуйста!
Спасибо за урок!
КрутО СПАСИБО!!! Про svg обязательно!
Да, отдельный урок было бы тоже очень интересно!
Все було дуже цікаво, дякую за відео.
Спасибо за очередное классное видео)
Сначала лайк и коммент, потом приступаю к просмотру видео ))
Спасибо за уроки !)
Спасибо! Давно хотел сделать иконку для своего сайта -)
Нужно😁 очень нужно! Спасибо за обучение для таких как я😁
Сначала смотрю видос, потом, если он интересный, как этот, ставлю лайк :)
Спасибо!
Привет, спасибо за видео, они просто супер! хочу увидеть видос от тебя про векторную графику))) Спасибо)
Пожалуйста!
Евгений спасибо за твое творчество! SVG жду, но еще больше жду JS. :))) Развития каналу!
Видос - нормас! Когда, два года назад узнал про svg, был несказанно рад. До этого делал в png
Спасибо!
Очень нужно видео про svg!)
Спасибо за очень интересное видео и хочется про svg формат узнать )
Да ты просто чудо!:)
Жека ты супергерой вселенной программирования!
Крутой видеоролик мне 12 лет,М Все понятно и доходчиво даже мне в таком возрасте,лайк ставлю подписался со вчера))
Круть
Только сейчас впервые услышал про формат WebP! Клас! Like*1000 Tab!
Спасибо! 👍✨
Отличный видос !
Сапасибо!
Супер спасибо большое
Однозначно ждём видео по SVG)
Спасибо за юмор :). Хотелось бы про вебпи подробнее.
Пожалуйста!
Очень полезно, спасибо
Пожалуйста!
Круто!🤘 (Просто комментарий для продвижения ролика)
Спасибо большое!
Спасибо!!!
Как же триггерит Z на фоне...
Жека, спасибо за плейлист! Благодаря тебе быстрее идёт процесс обучения и возможно очень скоро найду первую работу в it и свалю из России.
Слава Украине!
Подсос
круто, как раз хотел разобраться в этом вопросе, спс! :)
Супер! Я рад!
Все таки яке значення мають символи які використовують у пропаганді на росії. Ще декілька місяців тому я б не звернув уваги на фон з картиною, а тепер хочеться прикрити рукою :D
P.S круте відео, дякую!
Офигенно!
Супер 👏🔥👍
Топ видео как всегда!! Хочу про webP
Спасибо! Будет!
Спасибо за видео!
Пожалуйста!
Очень полезно!
Дякую більше цікавого дізнався чого навіть не знав)
Спасибо!
Спасибо тебе!
как всегда топ)
Спасибо!
спасибо огромное
Как всегда все понятно и ясно вот про оптимизацию очень жду так как есть готовые сайты старые и их картинки сделаны как попало и нужен совет как их оптимизировать помимо пропуска через tinypng ну и самый новый вариант WebP(не очень ясно что это и зачем делал на сайт в этом формате но вот при адаптации на мобилах они не работали).
Спасибо, Жека!
Пожалуйста!
Дякую за відео Женя
Спасибо большое
Спасибо)
Очень интересно как приподнесешь уроки по js. Думаю там будет информативно и понятно))
Я тоже так думаю)
Лайк авансом 👍 Пишу комент, чтобы Жека запилил новый видос по картинкам.
Спасибо большое!