Форматы изображений в веб-разработке и виды графики сайта за 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
🤟 Живи, а работай в свободное время! ©
После всех часов и дней, проведенных за просмотром этих уроков, незнакомый рыжий чувак стал уже как брат родной)
Спасибо за твою работу!
вот прям про меня, тоже испытываю похожие эмоции)))
@@Xyjail ага))то злюсь на него когда что то не получается,то обожаю когда все идет как надо!!в натуре как брат!
0:01 какой интересный символ на заднем фоне...
тебе прийдется постараться, чтобы найти мой альбом и дорисовать усы)))) веселый ролик)
про svg хочется узнать побольше)
Ну, я попробую)
Да да только столкнулся и офигел , что это?
@@FreelancerLifeStyle 11212
Конечно нужно подробнее про svg (в особенности косяки в ie и как с ними бороться). Про векторные шрифты тоже надо. Вообще все интересно, особенно от знающего человека!
Супер! все будет!
Мелкософт прекратил поддержку ie (вроде) вместе с Win 7. Поэтому можно забыть и про ie, и про косяки в нём.
Раньше приходилось изучать особенности IE6-7-8, а сейчас IE больше нет, жить стало проще 🤣
@@FreelancerLifeStyle Спасибо за видео, хотелось поподробнее про баги svg с ie (хотя-бы ради приличия в11-м , остальные версии нереально охватить). То с чем столкнулся: масштаб bg из svg полностью не управляемый и ссылки иконок svg меняют масштаб при наведении.
Эти вставки (с усиками в этом выпуске и песнями в прошлом) - то, что нужно. Особенно когда сидишь уже 20-ый час и что-то учишь - такие моменты на секунду дают расслабиться. Спасибо тебе за видосы)
Евгений, я лично жду видео на все возможные темы, в самообразовании все средства хороши, особенно как вы - делаете это бесплатно. Однозначно лойс !
Спасибо!
Про SVG однозначно нужен ролик. И, чем подробнее, тем лучше. Вот столкнулся с проблемой, как поменять цвет при необходимости, например. Да и вообще, узнать о его возможностях - что и как с SVG можно делать. Спасибо за позитивные, содержательные и познавательные ролики! RESPECT
Женя, как всегда, отличное видео! Про SVG и новые форматы изображений очень интересно! Ждём о них видео! И как всегда видео смотрю до самого конца)))) Твой девиз и музыка в конце - огонь)))
Спасибо большое! Очень ценю!
Огромное спасибо за Вашу работу! С Вами сложное становится простым
Автору канала выражаю благодарность за годный контент. Единственный канал где я ставлю лайк до того как запускаю видео. Для меня уже как бренд качества.
Отличная подача, всё понятно и по существу. Спасибо!
Просьба. Пореже дёргать видос сменой кадра. А в общем - с удовольствием смотрю твой канал. Респект и уважуха!
Ок, что-то придумаю)
@@FreelancerLifeStyle не, не, не)) оставь все как есть)) очень даже хорошо! Без смены будет гг
Спасибо тебе огромное! Этот труд бесценен. Быстро и понятно объяснить материал не каждому дано ,поймет даже абсолютный чайник :)
Пожалуйста! Рад что полезно!
Спасибо тебе большое за твой канал!!!
Все так понятно и быстро, я уже за месяц научился верстать простые макеты, и все благодаря тебе!!,
Всё по делу, без воды! Круто!!! С SVG уже ознакомился, но думаю не все варианты использования узнал. А именно Спрайты. Не перестаю говорить спасибо!
Спасибо тебе, Евген! столько годного контента.. хороший ты мужик!)))
Рад что полезно!
Женя, ты как всегда великолепен!
лучшый контент по верстке что когда либо был!!!!
Евгений Вам большое СПС за ваш труд. От вас учусь всему. Вы лучший!!!
Ти просто супер! 4 рази намагався навчитися верстати сайти і нічого не виходило, аж поки не знайшов твої відео. Не можу робити того, чого не розумію, а ти так навчаєш, що не зрозуміти просто неможливо 👍👍👍
С нетерпением жду видоса про svg. Спасибо за твой труд.
Отлично, будет!
как всегда все просто и без воды, огромное спасибо Жэкос ))))
Спасибос!
Как всегда, объяснил простым доступным языком про важные моменты при вёрстке. Сделайте пожалуйста урок про SVG. Спасибо Вам.
Спасибо! Сделаю
Как всегда на высоте) и приколы тоже появляются)))
Спасибо!
Сначала ставлю лайк а потом смотрю видос:) Спасибо
Спасибо!
Тож
Спасибо за урок. Информация про favicon как раз была нужна)))
Жду видео про формат svg. Как всегда понятно и интересно. 👍
Ок, будет)
Полезно и информативно! Лайк!
Урок это практика а практика это лучше чем лекция
Спасибо за видос
Пожалуйста!
Ты как всегда вовремя) я недавно поюзал svg, и влюбился в этот формат, а именно то что с ним можно делать. Анимации с помощью css, js. Я только за видео по графике. И ещё буду благодарен за информацию по верстке шаблонизатора ruby ERB, если тебе доводилось с ни работать. Мне дали проект, поправить вёрстку. Много времени отбирает разобраться. Всего хорошего тебе!
Спасибо!
Полезные видео как из автомата пошли) Спасибо за разъяснения)
Спасибо!
крутой ролик, как всегда спасибки)
Величезне Вам Спасибі за Суперовий Урок!!! Все Максимально Чітко , Достуно і Детально !!! Саме те що потрібно!!!
Респект Величезний!!!
Будь ласка!
Додаткове “ Величезне Спасибі” за Ваш Практичний Досвід , різноманітні Ваші “лайфхаки” та поради Практикуючого Експерта... Вони Безцінні... в книжках такого не знайти... Це роки практичного досвіду....
Респект Величезний !!!
Жду видео про формат svg! Крутой канал, материал то что надо. Спасибо
Спасибо за твой труд) Ты очень помогаешь!
Я смотрю все видео) как обычно, лайк!
Спасибо!
впервые услышал про формат WebP! спасибо, за новую информацию! Буду ждать видео по svg
Пожалуйста!
Спасибо! Как всегда все очень полезно!
Вступи з залякуваннями - це просто шедевр!😄
Жека, красавчик! Спасибо за видосы! Так держать!
Пожалуйста!
Дякую!
Дуже цікаве відео, тепер при навчанні буду завжди на проектах створювати favicon))
Про webp интересно. Действительно сейчас всё чаще его встречаешь, и круто если он оптимизирован лучше jpg (не только для web, но и для любой техники). Остальные же, я думаю, должны знать большинство даже не связанных с web. Хотя если человек никогда не отображал расширения файлов, не рисовал хотя бы в Paint - может случиться такой фейл )
В любом случае лайк! Обучайся, развивайся, живи...
Полезная инфа! Хотелось бы побольше узнать о работе с svg-форматом. Надеюсь, будет подробный видос от тебя на эту тему.
Спасибо, будет
Сначала лайк и коммент, потом приступаю к просмотру видео ))
Спасибо за уроки !)
Благодарю Вас за видео.
Жека ты супергерой вселенной программирования!
Благодарю за видео!
КрутО СПАСИБО!!! Про svg обязательно!
Все понял, Большое спасибо!!!
Отличное объяснения спасибо!
Какое у тебя классное рабочее место ^^ космос!
Про svg отдельный урок хочу =)
WebP просто зверь
Спасибо за ролик!
Пожалуйста!
Спасибо за ролик! Хотелось бы узнать больше про webp и svg)
Спасибо за очередное классное видео)
Спасибо за урок!
Все було дуже цікаво, дякую за відео.
Спасибо! Давно хотел сделать иконку для своего сайта -)
Да, отдельный урок было бы тоже очень интересно!
"просто напиши комментарий" - така інтонація і міміка, суцільний позитив!😂
Очень нужно видео про svg!)
Все отлично , уроки проходят довольно весело , а главное , что все понятно и на предельно ясном языке . JavaScript туториалы будут ?
Не хочется смотреть других , к тебе уже привык 😄👍🏻
Спасибо! Будут
Нужно😁 очень нужно! Спасибо за обучение для таких как я😁
Спасибо Женя👍🏽🌄) Как всегда все очень полезно! Думаю если будет продолжение в сторону svg то ребята будут рады🙂. В чате было много вопросов по данной теме)
Понял, теба большая, потянет на отдельный плейлист видимо)
Только сейчас впервые услышал про формат WebP! Клас! Like*1000 Tab!
Позитивный чувак с отличной подачей)) Благодарю за информацию! Ясен-красен, подписался)
Спасибо!
0
4
Сначала смотрю видос, потом, если он интересный, как этот, ставлю лайк :)
Спасибо!
Да ты просто чудо!:)
Мої дії:
1. Зайшов на сайт і декодував картинку
2. Офігів від того, що маленький розмір + фічи що й у png
3. Подивився на календар - 2022 рік
4. Перевірив кросбраузерність - 97%
5. У мене зачесалися руки)
Дякую за контент)!!
круто, как раз хотел разобраться в этом вопросе, спс! :)
Супер! Я рад!
Дякую більше цікавого дізнався чого навіть не знав)
Отличный видос !
Сапасибо!
Офигенно!
Спасибо! 👍✨
Супер 👏🔥👍
Супер спасибо большое
Однозначно ждём видео по SVG)
Топ видео как всегда!! Хочу про webP
Спасибо! Будет!
Спасибо!!!
Видос - нормас! Когда, два года назад узнал про svg, был несказанно рад. До этого делал в png
Спасибо!
Спасибо за очень интересное видео и хочется про svg формат узнать )
Спасибо за юмор :). Хотелось бы про вебпи подробнее.
Пожалуйста!
Круто!🤘 (Просто комментарий для продвижения ролика)
Спасибо большое!
Очень полезно, спасибо
Пожалуйста!
как всегда топ)
Спасибо!
Евгений спасибо за твое творчество! SVG жду, но еще больше жду JS. :))) Развития каналу!
Все таки яке значення мають символи які використовують у пропаганді на росії. Ще декілька місяців тому я б не звернув уваги на фон з картиною, а тепер хочеться прикрити рукою :D
P.S круте відео, дякую!
Спасибо!
Спасибо за видео!
Пожалуйста!
спасибо огромное
Спасибо тебе!
Привет, спасибо за видео, они просто супер! хочу увидеть видос от тебя про векторную графику))) Спасибо)
Пожалуйста!
Очень полезно!
Лайк авансом 👍 Пишу комент, чтобы Жека запилил новый видос по картинкам.
Спасибо большое!
Спасибо большое
Конечно, нужен урок про svg, спасибо
Супер ❤️🤗
Спасибо!
Ты супер!
Как всегда все понятно и ясно вот про оптимизацию очень жду так как есть готовые сайты старые и их картинки сделаны как попало и нужен совет как их оптимизировать помимо пропуска через tinypng ну и самый новый вариант WebP(не очень ясно что это и зачем делал на сайт в этом формате но вот при адаптации на мобилах они не работали).
Спасибо)
Топ контент!
Спасибо!
Крутой видеоролик мне 12 лет,М Все понятно и доходчиво даже мне в таком возрасте,лайк ставлю подписался со вчера))
Круть