Вставка картинок для ретина, webp, оптимизация графики

[@kirillguryanov4925]

Спасибо дружище. А то все жопят такую инфу))

[@aleksanderkarsunzev9302]

70.000 поздравляю 🎉🎊

[@2day159]

Дякую за вечеринку

[@vadymprokopchuk]

Будь ласка

[@talivel118]

Просто топчик!:)

[@serjmarkelov9915]

Почему так мало просмотров? Информация - золото!

[@ruslankandiba]

Годная штука. Спасибо за то что делишься такими вкусностями ))

[@SvitlanaDenisova]

Благодарочка! Круто доходчиво объясняешь! ❤

[@SerhiiNesterov]

Спасибо

[@Tech-m3o]

вообще круто, спасибо Вадим!

[@СергейАрхипов-у6б]

Прикольно. Последовательно смотрю видосы. После книг твои наглядные примеры быстрее запоминаются)

[@IrynaAbrosimova]

есть вопрос, и у тебя всегда можно найти ответ, спасибо

[@АлександрПлатонов-ъ7о]

Спасибо,ты крутой перец

[@alexalex1799]

Спасибо вам. Отличное, структуированное объяснение.

[@НиколайНиколаенко-ш5ф]

Суперрр!!! Всё коротко и ясно. Так держать !

[@dvsDesing]

Спасибо за инфу по изображениям!

[@andriitkach6775]

Ну что сказать?....Благодарочка!!!!

[@NanNan-nb4qf]

Всё чётко, ясно и понятно! От души благодарность!)

[@АлексейСветлович-в2у]

Спасибо! Кратко. чётко, по делу. Вот только бы еще рассказал как 2х и 3х делать.

[@igormashinski1533]

Вадим -- лучший !!!!! , респект , почет , и , уважуха ,!!!!!! , даёшь уроки по верстке для чайников / начинающих !!!! , , , , привет из украины-запорожья , !!! , удачи и ни пуха

[@vadymprokopchuk]

Спасибо и к черту )

[@appleipad9226]

Канал с 0 до 💯 👍🏿👏🏿

[@BlockElement]

Годно, благодарю. Ты лучший

[@sergio-ip7in]

спасибо Вадим!

[@deniskazakov4584]

а как быть , если IMG kak background?

[@oleksandr6831]

Спасибо за видос! Небольшое примечание: на 6:10 говорится, что webp работает в Cафари, но не в Файфоксе. Но пока что все наоборот, и даже в в Эдж завезли поддержку: caniuse.com/#search=webp Видимо ребята из apple до последнего открещиваются от гугловского формата :)

[@КостянтинТерезюк-ы6и]

Инфа золото! ЛАЙК!

[@Viktorres1]

Очень ценю Ваши видео!

[@dobrMAV]

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

[@vadymprokopchuk]

Спасибо, успехов в изучении!

[@kolyabokov88]

Realtime хорошо конечно, особенно вот как ты делаешь, не скучно и дико полезно. Но фичи такие тоже очень круто! Продолжай!)

[@vadymprokopchuk]

Спасибо, обязательно буду)

[@DreamersStoriesForYou]

Огромное спасибо за видео, как всегда на высоте.Очень полезный контент)

[@nicholasdev1853]

Спасибо. Было интересно!

[@jangow5716]

Вадим, спасибо за видос. А как быть с отступами, размеров шрифтов и т.д в пикселях на retina, получаеся если у нас ретина 3x и указан шрифт 16px, то он будет в три раза меньше чем на обычном екране, или он как-то пересчитывается?

[@natalia_0729]

Почему на мобильном устройстве с ретина экраном картинка отображается большего размера, чем на обычном. (В media запросах была задана ширина и высота в px). Как исправить этот момент?

[@mykhailobokalo6037]

СПАСИБО!)

[@mushnikov35]

Такое пожелание, сложные макеты с максимальным использованием jquery ) было бы круто )

[@uxuidesigner6952]

Спасибо! хороший обзор! Может подскажите как добавить правильно webp через css ?

[@skiphog]

Годно 👍

[@hpbulbasaur8946]

что-то не понял момента,вот мы в теге picture указали в первом source wax.webp,а во втором wax.png,приоритет отдался .webp(браузер будет пытаться его загрузить в первую очередь),а если он не нашел нужную картинку wax.webp,то почему он не подгрузил из второго source wax.png, типо почему не произошла замена картинки?

[@Mykhailo_Vdovychenko]

Бомбезно! СПАСИБО! =)

[@aquilon1790]

Вадим, приветствую. Подскажите Retina Ready и webp стоит использовать только когда этого требует заказчик? Ведь мы то можем создать пак с изображениями 2х 3х .webp и тд, но что будет когда заказчик захочет заменить картинку, через cms к примеру? Получается у него все упадет и придется либо ручками делать кучу форматов изображений, либо конвертировать 1 картинку в несколько на самом сервере?

[@ДмитрийНормов-ю6ц]

Ну как, нашли ответ?

[@stormbraker637]

​@@ДмитрийНормов-ю6цна вордпрессе есть плагин который сам конвертит

[@arturtalimonchyk7451]

3 года прошло , я только начинаю , вопрос очень хороший. Нашли ответ?

[@alexstanix1026]

А размеры блоков прописанные в пикселях на ретине будут визуально меньше выглядеть, чем на нормальном дисплее? Вообще есть какие-то особенности верстки под разные разрешения мониторов одного физического размера? Допустим блок в 100 пикселей будет меньше на разрешении fullhd в сравнении с hd монитором одного размера. Это в верстке как-то учитывается?

[@Tech-m3o]

а нужно ли сейчас для сафари указывать атрибут type="image/webp" ???

[@catrey1]

16:00 на 12 строке желательно добавить type="image/webp", то iphone не поймёт, правильно?

[@vadymprokopchuk]

и на 13 тоже. так как на 14 должно быть, там просто пропустил

[@sevi43]

Просто топыч)

[@-shakirov]

А фавиконки нужно резать ?

[@krystynakoryagina356]

можно в тег img вставлять одну и ту же картинку разных расширений? например, Или лучше делать через ?

[@krystynakoryagina356]

а что на счет -webkit-image-set, можно его использовать в background-image?

[@RetoGalstyan]

Если не поставить widht и height то pageSpeed будет ругатся, вопрос как поставить widht и height,если ты вставишь картинки и 1x и 2 x

[@Канал-м6ц]

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

[@shp-o4p]

отличное видео)

[@jangow5716]

Вадим, спасио за видео. А откуда брать изображения 2х 3х - это задача дизайнера или верстальщика?

[@vadymprokopchuk]

диз, а если у вас макет в фигме, то там можно так сохранить

[@olegparsheguba1954]

best)

[@TechnoDukes]

Дьякую. Полезно

[@КАбрамян-ш4э]

здравствуйте спасибо за урок)) получается 1x это обычный изображение который грузиться на обычных мониторах ? а на ретина 2x 3x ?

[@vadymprokopchuk]

Пожалуйста, да, все верно

[@anastas7880]

можно ли webp использовать при верстке email-рассылок? почтовики ругаются?

[@vadymprokopchuk]

не тестил, но думаю что нельзя

[@maksymbelogonov5326]

Привет. А как обстоят дела например с интернет магазинами или сайтами, где изображений много. Получается серверу нужно будет хранить вместо 1 изображения для 1 карточки товара например целых 6? Спасибо

[@vadymprokopchuk]

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

[@ilnurtak9276]

Спасибо. Очень полезно. Попробую реализовать в следующем сайте. Вопрос: как быть с картинками, вставленные через css в виде фона?

[@vadymprokopchuk]

Есть вариант проверки с помощью js, читает ли браузер wedp, но я его не юзаю просто оставляю джепег для фонов

[@VolodymyrTymkiv]

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

[@markminerov]

"Failed parsing 'srcset' attribute value since it has an unknown descriptor." Не работает. В чём проблема?

[@vadymprokopchuk]

Это кто тебе такую ошибку пишет ?

[@markminerov]

@@vadymprokopchuk и хром, и опера.

[@markminerov]

@@vadymprokopchuk можешь скинуть сёрфы эти, как с видео, может проблема в размере фото?

[@vadymprokopchuk]

Я скину, но не скоро, смогу 24-25, сейчас в отъезде без компа

[@markminerov]

@@vadymprokopchuk нашёл решение, не знаю как это работало у тебя, но мне нужно писать к примеру srcset="[e-mail] 200w, [e-mail] 400w", ошибок в консоли нет, значит всё нормально. Но пока что ещё не понимаю как с этим работать

[@stole-name]

А кому вообще приходит в голову ставить дизы?

[@Dmitry_Harlamov]

купил мак и не мучаюсь с ретиной

[@VolodymyrTymkiv]

Духовное пробуждение TM походу твой мак без ретины🤥🤥😂

[@dmitryvertoprakhov5469]

Спасибо