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

Поделиться
HTML-код
  • Опубликовано: 23 ноя 2024

Комментарии • 486

  • @olgap.3516
    @olgap.3516 3 года назад +108

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

    • @Xyjail
      @Xyjail Год назад +1

      вот прям про меня, тоже испытываю похожие эмоции)))

    • @АртёмРуа
      @АртёмРуа Год назад +3

      @@Xyjail ага))то злюсь на него когда что то не получается,то обожаю когда все идет как надо!!в натуре как брат!

  • @artem_bohak
    @artem_bohak Год назад +1

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

  • @АртемКа-в3к8й
    @АртемКа-в3к8й 4 года назад +123

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

  • @СергійК-з5т
    @СергійК-з5т 2 года назад +1

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

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  2 года назад +1

      Будь ласка!

    • @СергійК-з5т
      @СергійК-з5т 2 года назад

      Додаткове “ Величезне Спасибі” за Ваш Практичний Досвід , різноманітні Ваші “лайфхаки” та поради Практикуючого Експерта... Вони Безцінні... в книжках такого не знайти... Це роки практичного досвіду....
      Респект Величезний !!!

  • @ВиталийКабаков-ф5э
    @ВиталийКабаков-ф5э 4 года назад +98

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

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  4 года назад +13

      Супер! все будет!

    • @ИмяФамилия-э4ф7в
      @ИмяФамилия-э4ф7в 4 года назад +2

      Мелкософт прекратил поддержку ie (вроде) вместе с Win 7. Поэтому можно забыть и про ie, и про косяки в нём.

    • @alexeleave4551
      @alexeleave4551 4 года назад +8

      Раньше приходилось изучать особенности IE6-7-8, а сейчас IE больше нет, жить стало проще 🤣

    • @artempashinsky4111
      @artempashinsky4111 3 года назад

      @@FreelancerLifeStyle Спасибо за видео, хотелось поподробнее про баги svg с ie (хотя-бы ради приличия в11-м , остальные версии нереально охватить). То с чем столкнулся: масштаб bg из svg полностью не управляемый и ссылки иконок svg меняют масштаб при наведении.

  • @ЭдСуровый-ъ1р
    @ЭдСуровый-ъ1р 4 года назад +3

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

  • @АаронБрилль
    @АаронБрилль 4 года назад +22

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

  • @КириллКрючков-э5с
    @КириллКрючков-э5с 4 года назад +12

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

  • @dima_king1756
    @dima_king1756 4 года назад +13

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

  • @lessystar1409
    @lessystar1409 Год назад +1

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

  • @dellknow1466
    @dellknow1466 2 года назад +1

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

  • @МаксимКрутов-е8б
    @МаксимКрутов-е8б 4 года назад +32

    Как всегда, объяснил простым доступным языком про важные моменты при вёрстке. Сделайте пожалуйста урок про SVG. Спасибо Вам.

  • @artyomvoytenko1237
    @artyomvoytenko1237 4 года назад +4

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

  • @СвятославПупырев
    @СвятославПупырев 4 года назад +3

    Просьба. Пореже дёргать видос сменой кадра. А в общем - с удовольствием смотрю твой канал. Респект и уважуха!

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  4 года назад

      Ок, что-то придумаю)

    • @Toxa2424
      @Toxa2424 4 года назад

      @@FreelancerLifeStyle не, не, не)) оставь все как есть)) очень даже хорошо! Без смены будет гг

  • @skyreg11
    @skyreg11 4 года назад +12

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

  • @ukraine1514
    @ukraine1514 Год назад

    Нужно😁 очень нужно! Спасибо за обучение для таких как я😁

  • @revolt4792
    @revolt4792 4 года назад +2

    Урок это практика а практика это лучше чем лекция
    Спасибо за видос

  • @tyyyyuuuuuuuuijjjiio
    @tyyyyuuuuuuuuijjjiio 4 года назад +1

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

  • @annagrigorewa
    @annagrigorewa 4 года назад +51

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

  • @demptd13
    @demptd13 2 года назад

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

  • @mikebenchak9183
    @mikebenchak9183 4 года назад +2

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

  • @АлексейСамсонов-ы3о
    @АлексейСамсонов-ы3о 4 года назад +1

    Жека, красавчик! Спасибо за видосы! Так держать!

  • @alexr6829
    @alexr6829 4 года назад +1

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

  • @АлександрФримен-п7ж
    @АлександрФримен-п7ж 3 года назад +8

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

  • @Duplomat
    @Duplomat 4 года назад +11

    С нетерпением жду видоса про svg. Спасибо за твой труд.

  • @portvein7775
    @portvein7775 2 года назад

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

  • @VitaliiMaevskii
    @VitaliiMaevskii 4 года назад

    Спасибо за урок. Информация про favicon как раз была нужна)))

  • @МихаилРазуваев-ь6л
    @МихаилРазуваев-ь6л 4 года назад +2

    Полезная инфа! Хотелось бы побольше узнать о работе с svg-форматом. Надеюсь, будет подробный видос от тебя на эту тему.

  • @ИльяМ-ь1ж
    @ИльяМ-ь1ж 4 года назад +1

    Сначала смотрю видос, потом, если он интересный, как этот, ставлю лайк :)

  • @c-3po189
    @c-3po189 3 года назад

    Жека ты супергерой вселенной программирования!

  • @КириллТимофеев-п1л
    @КириллТимофеев-п1л 4 года назад

    Лайк авансом 👍 Пишу комент, чтобы Жека запилил новый видос по картинкам.

  • @queenstars2112
    @queenstars2112 3 года назад

    Только сейчас впервые услышал про формат WebP! Клас! Like*1000 Tab!

  • @darkins7042
    @darkins7042 4 года назад +2

    Как всегда на высоте) и приколы тоже появляются)))

  • @VladosDC
    @VladosDC 3 года назад +2

    крутой ролик, как всегда спасибки)

  • @serhiistanislav
    @serhiistanislav 4 года назад +1

    Видос - нормас! Когда, два года назад узнал про svg, был несказанно рад. До этого делал в png

  • @dmytrobarbotko8077
    @dmytrobarbotko8077 2 года назад +2

    Все таки яке значення мають символи які використовують у пропаганді на росії. Ще декілька місяців тому я б не звернув уваги на фон з картиною, а тепер хочеться прикрити рукою :D
    P.S круте відео, дякую!

  • @alexandr8978
    @alexandr8978 4 года назад +1

    Я смотрю все видео) как обычно, лайк!

  • @Max-b5z
    @Max-b5z 4 года назад +4

    Круто!🤘 (Просто комментарий для продвижения ролика)

  • @kirillstrigelsky1154
    @kirillstrigelsky1154 4 года назад +2

    Отличный видос !

  • @specserge
    @specserge 4 года назад +2

    Кто как, а я ЗА ролик!)

  • @ИгорьГорбунов-ю9ж
    @ИгорьГорбунов-ю9ж 4 года назад

    Благодарю Вас за видео.

  • @АлинаФарт
    @АлинаФарт 3 года назад +1

    Спасибо! 👍✨

  • @dovuret
    @dovuret Год назад

    Дякую більше цікавого дізнався чого навіть не знав)

  • @АртурМудренко-л5ъ
    @АртурМудренко-л5ъ 4 года назад +1

    Крутой видеоролик мне 12 лет,М Все понятно и доходчиво даже мне в таком возрасте,лайк ставлю подписался со вчера))

  • @Аккаунт-и5е
    @Аккаунт-и5е 4 года назад +5

    Все отлично , уроки проходят довольно весело , а главное , что все понятно и на предельно ясном языке . JavaScript туториалы будут ?
    Не хочется смотреть других , к тебе уже привык 😄👍🏻

  • @vladimirzdanov1319
    @vladimirzdanov1319 3 года назад

    Да, отдельный урок было бы тоже очень интересно!

  • @helenvishnevskaya6832
    @helenvishnevskaya6832 Год назад

    Наконец- то нашла четко и по делу. Очень благодарна. Подскажите пожалуйста, вот я не планирую в данный момент становится профессионалом в веб- дизайне, но мне это нравится и пока не могу выполнять дизайн сайтов, но хочу начать с их элементов( иконки, баннеры, логотипы и т. д.) и если с форматами почти все ясно для новичка, то с размерами не очень. Какой делать размер для вектора и растра, если эта картинка продается отдельно, без привязки к конкретному сайту? Заранее большое спасибо.

  • @valentyndubin5441
    @valentyndubin5441 4 года назад +3

    Спасибо Женя👍🏽🌄) Как всегда все очень полезно! Думаю если будет продолжение в сторону svg то ребята будут рады🙂. В чате было много вопросов по данной теме)

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  4 года назад +1

      Понял, теба большая, потянет на отдельный плейлист видимо)

  • @sherlockholmes5395
    @sherlockholmes5395 4 года назад

    Все понял, Большое спасибо!!!

  • @andreyantonovich379
    @andreyantonovich379 4 года назад

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

  • @mainName777
    @mainName777 3 года назад +1

    спасибо, вы бог!

  • @konstantino7016
    @konstantino7016 3 года назад

    Полезно и информативно! Лайк!

  • @JohnDoe-p1y
    @JohnDoe-p1y 4 года назад +1

    svg!!! и самое важное это его стилизация!!! урок крутой!

  • @user-helena-mankova
    @user-helena-mankova 3 года назад +1

    Спасибо!

  • @lera6580
    @lera6580 4 года назад +4

    Какое у тебя классное рабочее место ^^ космос!
    Про svg отдельный урок хочу =)
    WebP просто зверь
    Спасибо за ролик!

  • @user-expert_2023
    @user-expert_2023 4 года назад +2

    Очень полезно, спасибо

  • @Denis-t2m
    @Denis-t2m 4 года назад +2

    как всегда топ)

  • @shukonfadah5725
    @shukonfadah5725 2 года назад

    Отличное объяснения спасибо!

  • @RinatSadykov-q4j
    @RinatSadykov-q4j 2 года назад +2

    Спасибо тебе большое за твой канал!!!
    Все так понятно и быстро, я уже за месяц научился верстать простые макеты, и все благодаря тебе!!,

  • @loophostage
    @loophostage 4 года назад +1

    Позитивный чувак с отличной подачей)) Благодарю за информацию! Ясен-красен, подписался)

  • @vitaliysmirnov7057
    @vitaliysmirnov7057 4 года назад +1

    круто, как раз хотел разобраться в этом вопросе, спс! :)

  • @lesyadorosh1805
    @lesyadorosh1805 4 года назад

    Жду видео про формат svg! Крутой канал, материал то что надо. Спасибо

  • @isharonov
    @isharonov 3 года назад +1

    Спасибо, Жека!

  • @nadezhdasamilo1919
    @nadezhdasamilo1919 2 года назад +1

    Огромное спасибо за Вашу работу! С Вами сложное становится простым

  • @АнтонХарченко-й5э
    @АнтонХарченко-й5э 4 года назад +1

    Спасибо за видео!

  • @ksu20026
    @ksu20026 3 года назад +1

    Спасибо)

  • @TheAiAm
    @TheAiAm 4 года назад +1

    Супер!!!!!!

  • @medovikov
    @medovikov 3 года назад +1

    Очень полезно!

  • @MaximVernigorov
    @MaximVernigorov 3 года назад

    Да ты просто чудо!:)

  • @Жизнь-я3ъ
    @Жизнь-я3ъ 2 года назад

    Спасибо за твой труд) Ты очень помогаешь!

  • @Anatoli-bq1pe
    @Anatoli-bq1pe 2 года назад

    Спасибо за очередное классное видео)

  • @danilbadretdinov2787
    @danilbadretdinov2787 3 года назад

    Офигенно!

  • @cdenis7578
    @cdenis7578 4 года назад +1

    Автору канала выражаю благодарность за годный контент. Единственный канал где я ставлю лайк до того как запускаю видео. Для меня уже как бренд качества.

  • @Salykin-pro
    @Salykin-pro 3 года назад

    КрутО СПАСИБО!!! Про svg обязательно!

  • @jamshidbekmamurov1841
    @jamshidbekmamurov1841 3 года назад

    Евгений Вам большое СПС за ваш труд. От вас учусь всему. Вы лучший!!!

  • @Andrey_Mendel
    @Andrey_Mendel 3 года назад

    Спасибо! Давно хотел сделать иконку для своего сайта -)

  • @Akezhan_T
    @Akezhan_T Год назад

    Супер спасибо большое

  • @ДаряЮрко-у9т
    @ДаряЮрко-у9т 2 года назад

    👍 Дякую за урок

  • @robertsalvatore1588
    @robertsalvatore1588 3 года назад +2

    Мне не идут усы. Лайк и коммент оставил.

  • @alexandrakozlova2494
    @alexandrakozlova2494 2 года назад +1

    Отличная подача, всё понятно и по существу. Спасибо!

  • @aleksandrsosnin3474
    @aleksandrsosnin3474 4 года назад +1

    Безупречные угрозы в начале видео не оставляют шансов забыть поставить лайк!)) Про .svg естественно интересно!

  • @selleniya999
    @selleniya999 3 года назад +1

    Ты супер!

  • @dimaburichin7726
    @dimaburichin7726 4 года назад

    Как всегда все понятно и ясно вот про оптимизацию очень жду так как есть готовые сайты старые и их картинки сделаны как попало и нужен совет как их оптимизировать помимо пропуска через tinypng ну и самый новый вариант WebP(не очень ясно что это и зачем делал на сайт в этом формате но вот при адаптации на мобилах они не работали).

  • @defect1933
    @defect1933 4 года назад +1

    Очень полезный урок будет: как сделать переключение между webp и jpeg в зависимости от браузера с библиотекой modernizr. Когда сам разбирался, ковырялся часа 2. Новичку сложновато, а гугл очень рекомендует при проверке сайта на скорость загрузки.
    Как всегда лайк, коммент, чтобы "все заработало". :D

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  4 года назад

      Да я все покажу, только гораздо проще)

    • @defect1933
      @defect1933 4 года назад

      @@FreelancerLifeStyle когда это тег img там меняется на picture. А если речь про background-image, то как сделать проще? Подскажи плиз, если такой способ есть

    • @FreelancerLifeStyle
      @FreelancerLifeStyle  4 года назад +1

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

    • @ИмяФамилия-э4ф7в
      @ИмяФамилия-э4ф7в 4 года назад

      С modernizr идея такая: нам библиотека добавляет классы к body в зависимости от браузера. Значит, если изображения подключаются через css то мы просто пишем два варианта. Допустим, нам modernizr добавляет класс webp если поддерживается формат и nowebp если нет. Мы просто добавляем .webp перед нашим селектором, где пишем путь к картинке webp и .nowebp перед селектором, в котором путь к jpeg.

    • @ИмяФамилия-э4ф7в
      @ИмяФамилия-э4ф7в 4 года назад

      С JS идея примерно такая: в начале скрипта заводим глобальную константу IMG-PATH, или как-то так. Далее проверяем, поддерживается ли формат (через navigator, или как там). Если поддерживается, то в неё вставляем 'img/webp/', если нет, то 'img/nowebp/'. Ссылки на картинки в скрипте формируем с этой константой. А в папки кладём файлы в соответствующих форматах с одинаковыми именами.

  • @egorkomarov4719
    @egorkomarov4719 4 года назад +1

    Топ контент!

  • @tomirisibrahim8170
    @tomirisibrahim8170 4 года назад +1

    Супер ❤️🤗

  • @alexslucky
    @alexslucky 2 года назад

    Добре пояснено все. Дякую!
    Одне запитання: чому, іноді, відкриваєш якесь зображення з сайту у новій вкладці (щоб переглянути його в повному розмірі), воно відкривається як .jpg і потім натискаеш ПКМ, щоб зберігти собі на компьютер це зображення, а воно зберігається у форматі .webp? Чому не зберігається у форматі .jpg? (браузер - Google Chrome) Не розумію, навіщо так зроблено на деяких сайтах, це не зручно, бо зображення формату .webp не відкриваються стандартними засобами OS Windows, потім потрібно через онлайн конвертор з .webp робити .jpg - це зайва втрата часу та якості зображення після переконвертації.

  • @ДмитрийЯ-з2д
    @ДмитрийЯ-з2д 4 года назад

    Про SVG однозначно нужен ролик. И, чем подробнее, тем лучше. Вот столкнулся с проблемой, как поменять цвет при необходимости, например. Да и вообще, узнать о его возможностях - что и как с SVG можно делать. Спасибо за позитивные, содержательные и познавательные ролики! RESPECT

  • @ФутбольныйМячик-е5с
    @ФутбольныйМячик-е5с 4 года назад +1

    Круть!

  • @yyatskevych1074
    @yyatskevych1074 11 месяцев назад

    Дякую за класний контент

  • @kseniafenisova7826
    @kseniafenisova7826 2 года назад

    Видео огонь. Спасибо за твои старания))) Только подскажи я вот иконку вставил как ты на видео но чтото она не отображается на сайте, как думаешь что не так? Может чего еще нужно добавить в линк?

    • @kseniafenisova7826
      @kseniafenisova7826 2 года назад

      Разобралась!) Как оказалось в других браузерах все отображается. А вот в сафари не хочет...

  • @appleshadowe371
    @appleshadowe371 3 года назад

    Я согласен! Только альбом надо найти же с начала :).

  • @ВованчоХБКовский
    @ВованчоХБКовский 4 года назад +1

    как всегда все просто и без воды, огромное спасибо Жэкос ))))

  • @oleg_andrianov
    @oleg_andrianov 4 года назад

    Спасибо за ролик! Хотелось бы узнать больше про webp и svg)

  • @selleniya999
    @selleniya999 3 года назад +1

    Женя, ты как всегда великолепен!

  • @Сергей-ю8и1х
    @Сергей-ю8и1х 3 года назад

    Всё по делу, без воды! Круто!!! С SVG уже ознакомился, но думаю не все варианты использования узнал. А именно Спрайты. Не перестаю говорить спасибо!

  • @maxxam2623
    @maxxam2623 2 года назад +8

    Как же триггерит Z на фоне...
    Жека, спасибо за плейлист! Благодаря тебе быстрее идёт процесс обучения и возможно очень скоро найду первую работу в it и свалю из России.
    Слава Украине!

  • @newlife8202
    @newlife8202 2 года назад

    Дуже подобаються уроки!!!

  • @victorchei
    @victorchei 4 года назад

    лучшый контент по верстке что когда либо был!!!!

  • @eragons89
    @eragons89 2 года назад

    Дякую за відео Женя