HTML5 #6 Картинки (Images)

[@TheProfessionalGambler]

Всё подробно и понятно 👍 Небольшая заметка: 2:11 Хорошая практика задавать хотябы width в атрибуте img тега. В CSS можно переопределить размеры указанные в атрибутах и они ни как не будут влиять на респонсив дизайн. А заданные размеры в атрибуте img имеют несколько плюсов - браузер понимает размеры изображения до загрузки CSS и отрисовка просиходит без "прыжков" контента на странице. И если вдруг css вообще не загрузится, то картинки не будут растягиватся на всю страницу, что часто случается с векторными изображениями.

[@nonamenoproblem.6372]

Я за курсы 155000 отдал и там этого не расказали. Спасибо автору, очепь приятно смотреть, слушать и впитывать.

[@YauhenKavalchuk]

Спасибо большое за отзыв

[@slygrin1971]

Искренне благодарю, пожалуйста, продолжайте в том же духе

[@ВикторияСереброва]

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

[@YauhenKavalchuk]

Большое пожалуйста

[@tgffvvvgtt34543]

Отличный курс! Буду смотреть дальше

[@YauhenKavalchuk]

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

[@vyacheslavgvorus3883]

Полезно, был не в курсе пока не стал использовать webp форматы

[@TheProtMen]

Мое почтение, Евгений

[@YauhenKavalchuk]

Благодарю

[@olehyefimenko6693]

Спасибо за курс и проделанную тобой работу! Благодаря твоим курсам узнал много нового! Ну а с моей стороны - лайк, подписка, комментарий!

[@YauhenKavalchuk]

Спасибо за поддержку

[@linqcodmax8965]

Продолжай в том же духе, и ждем так же плейлиста по CSS :D

[@КостянЕрмаков-е9ю]

Мне кажется, что еще можно было добавить про картинки с @х2 пикселями, чтобы браузер сам выбирал какую ему грузить.

[@YauhenKavalchuk]

Можно

[@anvacula]

Продолжай в том же духе.

[@annavoloshyna3524]

Нам на курсах рассказывали только про , остальные варианты вообще не упоминались.

[@YauhenKavalchuk]

Плохо(

[@mkt111one]

А что это за курсы были, если не секрет?

[@ИИванов-ь6с]

Отлично 👍👏😆

[@DmitryShelestrans]

Огромное спасибо!

[@sunnyorange8265]

Спасибо большое!!!!♥♥♥

[@YauhenKavalchuk]

Пожалуйста

[@Andrii.W]

я уже и не знаю,как благодарить!!!задонатил бы,но сижу без работы из-за войны.Спасибо!

[@YauhenKavalchuk]

Желание ищет возможность, а нежелание причину

[@Andrii.W]

@@YauhenKavalchuk я знаю это) но это так

[@Andrii.W]

поддержал немного!)чем богат)

[@maksimrackomin6424]

Здравствуйте! Отличное видео и канал в целом. Скажите пожалуйста, как применение конструкции влияет на количество запросов на сервер?

[@YauhenKavalchuk]

Количество запросов увеличивается

[@maksimrackomin6424]

@@YauhenKavalchuk Спасибо!

[@ИИванов-ь6с]

Отлично

[@dmitrijponkin]

Спасибо!

[@ЕкатеринаНестеренко-ъ5г]

Хочу выразить большую благодарность автору. Мало того, что все понятно и это за 5-10 мин видео. Так ещё и "залипаешь" так, что не можешь оторваться. Хотела спросить, а как делать карточки товара? Через figure и figcaption? Просто все через div делают и не заморачиваются

[@YauhenKavalchuk]

Лучше - делать всё верно с точки зрения семантики. На нормальных проектах делают через figure

[@ЕкатеринаНестеренко-ъ5г]

@@YauhenKavalchuk Спасибо за ответ! Объясню суть ситуации. Я выучилась на SEO и хотела этим заниматься. Мне стало интересно, а что это такое -теги. Посмотрела видео. И теперь я учу фронтенд(до этого я понятия не имела, что это такое) и пришла к этому через SEO. Поэтому семантика для меня не пустое слово. Это небольшая преамбула. Я просто сейчас начинаю потихоньку делать портфолио. И меня саму удивляет, что карточки товаров делают через div. Иногда просто даже пренебрегая h2-h3( что можно использовать для названия товара), тег "p" для его описания, если уж даже делают через div. Даже на авторитетных, каналах тоже через div. Я к чему. Не случится ли такого, что я буду делать через figure, и когда буду искать вакансию меня просто не поймут. Так сказать не случится ли "Горе от ума". Ещё раз спасибо за обратную связь

[@spav4vaps694]

Круто)

[@nicefellow7929]

Годно!

[@waden666]

Хотел узнать, допустима ли такая конструкция? Вроде валидатор не ругался, но ругался на вариант вложения, source в figure, без оборачивания в picture. It is a simple description for a picture above

[@YauhenKavalchuk]

Конструкция, которую прислали - валидна и правильна. Source нужно оборачивать в picture

[@waden666]

@@YauhenKavalchuk Большое спасибо!)

[@f_anderson428]

спасибо сам хотел спросить этот вопрос, и спасибо за ответ

[@АртемМарусетченко-ц1х]

Немного не понял разницу между контейнером picture и fig

[@rank5011]

а если изображение надо фоном расположить, что лучше для адаптива, background-image или все таки через picture+img+source?

[@YauhenKavalchuk]

В идеале на сервере обрабатывать и возвращать разных размеров. Но и background пойдёт)

[@olenalazarenko5108]

а можна использовать вместе с ?

[@YauhenKavalchuk]

Можно

[@alexandrsorokin1385]

не совсем понятно как именно прописывать картинку в html, грубо говоря, у меня есть своя картинка условно на рабочем столе, если я вставляю ее в код с путем, то он мне ее не показывает.

[@YauhenKavalchuk]

В идеале картинка должна лежать в папке с проектом. Браузер, а тем более сервер не откроет картинки находящиеся не понятно где

[@alexandrsorokin1385]

@@YauhenKavalchuk спасибо) уже допер сам до этого)

[@iGotton]

+

[@YauhenKavalchuk]

👍

[@gatrianL]

Как по мне это очень не практично, допустим у меня есть каталог из 1000 товаров и мне на каждый товар нужно будет делать по 3 media запроса на картинки, к дополнению еще и нарезать эту кучу картинок

[@denis_minimal]

Я применял такой подход в слайдере. Для мобиле своя картинка, для десктоп своя

[@КостянЕрмаков-е9ю]

Рано или поздно, но тебе все равно придется это делать, иначе те же гугл сервисы начнут топить твое детище в выдаче и засыпать красными уведомлениями что картинки не соответствуют размерности и пора все это првиести в порядок.

[@TheProfessionalGambler]

А представь как пользователю с мобильного грузить картинку 2к - 4к разрешения с мобильного интернета, а не у всех интернет стоит копейки. А так сразу грузится нужная картинка под конкретный экран.