А как же быть с рекламой, если у них в основном формат png?
@WANNABELIKE
5 жыл бұрын
Вадим, спасибо, что ужал меня! Я чувствую себя на 92% легче!
@pepelsbey
5 жыл бұрын
Экспресс-диета :) Это я так привет передавал, в основном, Оле ;)
@AlisherMakhmudov
5 жыл бұрын
Misha, jdem otvetochku, no po chasti dizayna :-)
@pashkes
5 жыл бұрын
Вадим, ждём обзор HTML Academy 😃
@rmnkot
5 жыл бұрын
Ваши видео ну просто очень кстати, в части аксессибилити и оптимизации производительности просто помогли мне вырасти над собой, спасибо за труды, такого рода толковой информации на самом деле очень мало. Затроньте пожалуйста еще в будующих видео тему тяжелых шрифтов, что с ними делать,( может какая-то отложенная загрузка или асинхронная загрузка - ну такого рода кейсы, думаю многие с этим сталкивались), если дизайнер присылает, например, 2 шрифта по 5 начертаний общим весом в 11 мб и обязательно требует их имплементации на сайт. Спасибо !
@sergeypautov8086
5 жыл бұрын
Потрясающе. Уверен, что факультет журналистики помог тебе в способах объяснения новой информации. Речь легка, жестикуляция неизбыточна, а примеры живые и простые. Спасибо, Вадим!
@user-oe3un8ky6l
5 жыл бұрын
Шикарно. Вадим, как всегда четко! Пожалуйста, прошу тебя, продолжай!!! Ты делаешь полезный контент, формат просто СУПЕР!
@Alex-ni2uv
5 жыл бұрын
согласен 100%
@unselfishpodcast888
2 жыл бұрын
Снято 3 года назад, а более чем актуально сейчас)) Держит в тонусе
@user-wl2hi2hs8m
Жыл бұрын
Просто отлично. Премного благодарен!
@trampsport
4 жыл бұрын
огонь! прошло почти два года, но актуально как никогда. Видим - очень хорошо объясняет, спасибо!
@ihatetoys1528
3 жыл бұрын
Не ну просто респектище!! Жму руку
@o.kiryukhin
2 жыл бұрын
Класс! Спасибо, Вадим!
@TortugaStudio
3 жыл бұрын
а вот эта штука про прозрачность в пнг8, которую не умеет фотошоп, это просто как откровение, спасибо за то, что чувствую себя просветленным.
@alexandrgusletsov2567
11 ай бұрын
Спасибо, Вадим!
@m-fusion
5 жыл бұрын
Сразу бахнул лайк, а потом посмотрев видос расстроился, что нельзя еще поставить.
@andriichornyi9143
4 жыл бұрын
Спасибо за годный контент: такое большая редкость)))
@Szesorvs
5 жыл бұрын
Спасибо огромное за полезный выпуск. Теперь буду ,Squoosh, пользоваться при оптимизации картинок!
@m1sima
5 жыл бұрын
Круто! Идея для заставки: серия фоток в разных футболках.
@Andrey_4dev
5 жыл бұрын
Хорошая информация и известная, но почему-то мало используется. Большой лайк, за чёткое и простое объяснение как это работает!
@stanislav-chyrva
3 жыл бұрын
Это, конечно, очень полезная информация. И рассказано просто прекрасно! Спасибо
@digitaloutlook472
5 жыл бұрын
Ну ты волшебник спасибо ценный материал! Я подписался на тебя чтоб следить за тобой ))
@juliazjochova4737
5 жыл бұрын
Для всех пользователей Mac OS. Screenshot в Mojave сохраняет картинку в .png. Если вы ее хотите использовать на веб странице, ее надо перевести в .jpg. Поменять эту настройку можно в Терминале: defaults write com.apple.screencapture type jpg. Экономит массу времени.
@pepelsbey
5 жыл бұрын
Даже этот JPEG будет неоптимальным, так что его всё равно надо будет оптимизировать: размер, сжатие. Так что лучше оставьте PNG, а потом кидайте его в squoosh.app/ и оптимизируйте нормально.
@Mazai58
5 жыл бұрын
Вадим, это просто ОХРИНИТЕЛЬНО! Супер выпуск! Без твоего просвещения нам не выжить, продолжай ;)
@SergioUkrAr
5 жыл бұрын
Вадим большое спасибо, материал очень классный, таких материалов качественных как ты выкладываешь очень мало, спасибо огромное.
@user-ut4hj7kc1t
5 жыл бұрын
Тот самый момент, когда начинаешь чувствовать что верстальщик, это все-таки не личинка фронтендера =)
@ulibkaify
3 жыл бұрын
Вадим, спасибо за видео! В частности узнал что оказывается есть псевдокласс :any (который chrome не поддерживает), поэтому Вы используете :-webkit-any документация: developer.mozilla.org/ru/docs/Web/CSS/:any
@blackbirdchannel-c7b
3 жыл бұрын
Интересно. Спасибо.
@timurkhudiyev
5 жыл бұрын
Ну очень круто. Буду постепенно внедрять в свою работу все это дело с картинками
@user-pg6rh2vh8r
4 жыл бұрын
Вадим, хрони тебя Господь, ты очень крут и невероятно полезен. Хочу футболку с твоим лицом!
@pavelarseyev452
5 жыл бұрын
Спасибо за видео, даже не сразу заметил, что оно длиннее обычного :)
@pepelsbey
5 жыл бұрын
Оно было ещё длиннее, я много резал. Увлёкся!
@VofusMobile
5 жыл бұрын
Вадим, спасибо! Не задумывался раньше даже об оптимизации картинок: что дал дизайнер, то и ставил. Теперь все летает))
@user-mj2qn8ok4u
3 жыл бұрын
Спасибо большое за сквош! В работе начал применять, это просто топ)
@PhilippeRigovanov
5 жыл бұрын
Огромное спасибо, Вадим! Столько драгоценной инфы! Изменим веб к лучшему!
@r2d2true
5 жыл бұрын
Снимаю шляпу перед создателем ZenCoding. Теперь и видео формат. Был приятно удивлен, когда ютуб подсунул мне ваше видео в ленту👍
@michaeldevichenskiy4588
4 жыл бұрын
Я ваш фанат! Спасибо за видео такие . Учусь по вашим видео правильно верстать .
@ilya-norske
5 жыл бұрын
Вадим, спасибо за полезный контент! Там ниже был вопрос по шрифтам, я бы предложил расширить на иконические шрифты и вообще иконки. Смешно звучит, но до сих пор очень неоднозначный вопрос. Простейшие вещи, вроде бы, но тьма нюансов и нет "правильных" вариантов. То ли спрайтами, то ли инлайн-svg, то ли шрифтом... По семантике то ли :before, то ли самостоятельный элемент с классом (в иконических интерфейсах значимо, во вспомогательных - не особенно), то ли еще чем... Если шрифтом, то что с font-dispaly. Что с aria. И т.п. Тема острая) Для себя я нашел более-менее типичные ответы с учетом специфики проектов. Но во-первых, с большим интересом послушал бы ваше мнение, а во-вторых, очень нужен какой-то внятный ролик, который можно будет давать ребятам-коллегам, задающим все эти повторяющиеся вопросы. Это правда актуально) Статей-то вагон, но они либо рассматривают отдельную технику изолированно, либо сравнивают очень поверхностно, к контексте удобства верстки, а не качества сайта. Нет ресурса, в который можно ткнуть и сказать "на, вот тут всё объяснили")
@stanislavvozikov5999
5 жыл бұрын
Поддерживаю вопрос про подключение иконок! Время идет, веб развивается, мода меняется. Хотелось бы услышать рекомендацию от Вас Вадим, какой поход рациональнее использовать.
@Alex-ni2uv
5 жыл бұрын
отлично как обычно) спасибо Вадим! сервис для картинок супер!!!
@VYuhim
5 жыл бұрын
Спасибо! Я Ваш фанат ) Вы лучший учитель на Ютубе ))) Продолжайте в том же духе, очень полезный материал.
@illiamaksymov5673
5 жыл бұрын
Блин, какая же это годнота. Спасибо большое, Вадим)
@a.d.3019
5 жыл бұрын
оч интересно и полезно! спасибо! для меня тег picture - открытие с учетом того что возможна такая оптимизация для картинок. И я пойду все свои сайты переделаю и ускорю!
@lisivets
5 жыл бұрын
Вадим, отличный материал! Спасибо!
@capstanfearless
5 жыл бұрын
Еееее, новый урок
@user-zf8kl6js8j
5 жыл бұрын
Огромное спасибо, за мега полезный контент! Впервые о вас узнал очень давно, по вашему блогу. За деятельностью не следил, просто знал, что есть мега крутой верстальщик - Пепелсбей. Ну знаете, как Devaka в СЕО. В общем есть некие гуру в разных направлениях IT, и ты хоть и не следишь ежедневно, даже иногда не следишь годами, но знаешь, что они есть. А недавно увидел вас в Ютубе. Обрадовался, что легенда верстки таки жива - никуда не делась. И даже на сайт зашёл. И да, сайт всё тот же минимализм с коричневой шапкой, всё тот же лого. Через Page Speed проверил - на мобильной версии у гуру 99, а у меня максимум 55 (а в старой версии Page Speed было 90). Ну, обрадовался, что гуру таки держит марку, молодец!)) Пару ваших выпусков посмотрел, и понял, что ничего не понимаю. А вот этот выпуск ну очень полезен для меня. Потому что оптимизация картинок для меня - это проблема. Раньше хватал оптимизированные с Google Speed Tool, теперь в новой версии Гугл перестал давать оптимизированные картинки, пришлось отделываться только фотошопом сохранённым для web - но это кка вы понимаете не айс. Обязательно попробую рекомендованный вами сайт. А ещё попробую этот способ верстки. Дело в том, что с адаптивностью картинок я отделывался "кастылями", которые не очень удобные. Неудобны тем, что приходилось всё время считать padding-bottom - который в этом костыле играет главную роль. И чтобы его вычесть, нужно было делить ширину на высоту, и потом записывать полученный результат в padding-bottom: XX, где XX - это полученный результат переведённый в процентное соотношение. Вот рабочий пример моего кода для баннеров: #two-year-birthday{background-image:url(/img/banners/birth-2-yaers-728x264-10.jpg);background-repeat:no-repeat;max-width:728px;width:100%;height:auto;max-height:264px;padding-bottom:36%;background-size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;margin:-5px 0 10px 0;} @media only screen and (max-width:580px){#two-year-birthday{background-image:url(/img/banners/birth-2-yaers-580x580-20.jpg);background-repeat:no-repeat;max-width:580px;width:100%;max-height:580px;height:auto;padding-bottom:100%;background-size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;} } В данном коде, если ширина дисплея больше 580, то загружается десктопная версия. Если меньше, то мобильная. А в больной версии размер дисплея уже не важен, потому что мобильный баннер сохраняя свои пропорции уменьшался под ширину дисплея. У меня обычно всего 2 варианта баннера, для мобилок и для десктопа. И использую форматы jpg, либо .png - в общем без наворотов. Но обратите внимание на код. Я не верстальщик ни разу и мой уровень - это ежедневное заглядывание за подсказками в htmlbook, чтобы освежить в памяти самые обычные 100-летние тэги. А Этот код нашёл с большим трудом в сети и был очень рад. Другие варианты не были кросс браузерными. С этим кодом мне не приходится делать баннеры под каждый формат дисплея, и нужно всего 2 версии . Но приходилось постоянно считать. В итоге для своего проекта утвердил одинаковые размеры баннеров, которые не менял, чтобы не париться с подсчётами. А о ретине за не имением таких девайсов я даже никогда и не думал. Мне даже смотреть результат негде. Ваш вариант с адаптивностью баннеров без костылей - и это круто. Я думал без костылей нельзя такие вещи сделать, что меня удивляло. Потому что в сети не было ни одного рабочего кросс браузерного кода с адаптивностью баннеров. Обязательно попробую ваш вариант. Огромное вам спасибо! Лайк!
@_ialekseev_
5 жыл бұрын
Отличный выпуск. Очень полезно. Спасибо!
@3ombieautopilot
3 жыл бұрын
Многое узнал. Про display:none для img вообще удивило
@1987jiva
5 жыл бұрын
Очень полезное видео! Палец вверх !
@sengokusky1515
3 жыл бұрын
Благодарочка за годный контент :)
@IgnisDev
5 жыл бұрын
Ох. Опоздал я) Спасибо за выпуск!
@user-rv4kz3yw5t
5 жыл бұрын
Теперь, я наконец-то понял фразу - "сколько нужно веб-разработчиков, что бы вставить элемент " )) ха-ха)) Спасибо!
@user-mk2fo7dh4f
5 жыл бұрын
Вчера сидел разбирался с picture, даже запутался, сегодня посмотрел 5 минут видео и понял как работает)
@eidenblock
5 жыл бұрын
Вадим, спасибо, столько полезного....
@Teacification
5 жыл бұрын
There you go, dude. You've turned SkillBox inside out.
@CyberAcidPlanet
5 жыл бұрын
Эх, так надеялся увидеть подход с mask-image! Для фоток с прозрачностью самый эффективный вариант это картинка в jpeg (и WebP через тег picture) плюс маска в 8-битном чёрно-белом PNG. И эту маску можно делать в 2-3 раза меньше чем сама картинка, браузер остальное сам сгладит. Да, для поддержки IE придётся повозиться, но эффект огромный.
@pepelsbey
5 жыл бұрын
Я еле ужал выпуск в полчаса, так бы на час вышло. Надо понемногу за раз, но регулярно :) Ещё доберусь до этой темы отдельно, SVG-маски тоже огонь.
@olivias4710
4 жыл бұрын
спасибо за видеобзор новых фишек, у элемента большое будущее, обидно у IE до сих пор нет поддержки :(
@annagri1798
5 жыл бұрын
Круто! Очень хочется посмотреть обзор сайта HTML Academy!)
@pepelsbey
5 жыл бұрын
Будет! Дождусь нового лендинга, там поинтереснее будет, и сделаю.
@vataRF
Жыл бұрын
спс за сквош, закинул себе в нотион
@savinyurii
5 жыл бұрын
Спасибо за видео! Хотелось бы обзор сайтов операторов сотовой связи: Tele2, MTS, Beeline, Megafon
@user-nc6pd4lp1j
5 жыл бұрын
Очень познавательно. Спасибо.
@dahamyr
5 жыл бұрын
27:10 $0 значит не совсем текущая картинка. $0 значит указатель на ноду, выбранную на вкладке Elements. Поскольку вадим выбрал на вкладке Elements тег img, для него $0 стал указателем на ноду картинки. Вообще $0 невероятно удобная для отладки штука, всем рекомендую
@pepelsbey
5 жыл бұрын
Я специально пошёл в инспектор, выделил картинку и потом добавил к ней атрибут, который и показал текущую картинку. Вроде всё логично. Углубляться в нюансы не стал, экономил время.
@dahamyr
5 жыл бұрын
Я не обвиняю, всё верно сказали. Просто хочу поделиться с людьми, которые не знают об этой фиче, уж так она меня впечатлила
@levsonc
5 жыл бұрын
«Это картинка с прозрачностью, это png24…» - Вадим, 24 - это количество бит на цвета. По 8 бит на каждый канал (от 0x00 до 0xFF), отсюда и запись вида #RRGGBB. Канал альфа-прозрачности добавляет ещё 8 бит, и получается уже все 32 бита. #RRGGBBAA из CSS Color Module level 4. Это пошло из Фотошопа, у которого есть опция png24 в противовес 256-цветному, такой вариант формата тоже есть (но не в Фотошопе), но в редакторе просто имеется дополнителная галка прозрачности. Итого: называть картинку с прозрачностью png24 - некорректно, там все полные 32 бита. Проще всего говорить просто PNG и уточнять битность (глубину цвета) по необходимости. Ещё есть техника уменьшения количества цветов на полноцветном PNG. Например, до 1024 или 4096. Тоже иногда помогает сократить эдак 10% веса, относительно картинки со всеми цветами (оптимизированной) без какой-либо заметной на глаз разницы.
@pepelsbey
5 жыл бұрын
Я говорил, преже всего, про количество цветов в 8-битном и 24-битном форматах. Это их ключевое различие в рамках этого видео. Прозрачность была довеском, то есть 24-битный PNG с прозрачностью (то есть 32-битный). Выросло целое поколение с такой терминологией в голове. Мне кажется это вполне корректное допущение. Я не первый раз слышу, что ты не согласен, но продолжу гнуть свою линию. С радостью воспользуюсь другим поводом, когда буду говорить про графику, чтобы уточнить нюанс, но схема PNG-24 с прозрачностью кажется мне более привычной широкому кругу верстальщиков.
@r2d2true
5 жыл бұрын
Так уж повелось, что когда мы говорим о прозрачности, мы имеем ввиду png и именно 24. Это уже как аксиома. Не знаю времени, когда было подругому. Но в целом информация про 32 бита полезная и интересная. Не знал.
@na3notech
5 жыл бұрын
Круто, узнал про squoosh, но - этот инструменты был бы идеален если бы было можно изменять сразу много картинок. Спасибо !
@user-ql4xu5qu2u
3 жыл бұрын
Офигеть, 2 года назад ты эти космические технологии использовал. Требую актуализации. Уже и сафари вроде как вебп начал поддерживать, да и в общем "много воды утекло" с той поры.
@biLLie_wiLLie
5 жыл бұрын
Хороший формат
@rvolik
5 жыл бұрын
ДЯКУЮ!
@arsenmanasuev4934
4 жыл бұрын
Божественно
@pekarskiy_nikolai
5 жыл бұрын
Один дизлайк, интересно фанаты skillbox'a или верстальщик их сайта?! ))
@user-oe3un8ky6l
5 жыл бұрын
Дизлак помоему поставил какой-то не грамотный человек. Вадик всегда дает очень конструктивную критику с фолбеком на полезные методики. И дает массу полезных советов, за это только лайки заслуживает. Не понимаю таких людей, которые ставят дизлайк человеку, который хочет сделать Веб лучше и всячески прикладывает к этому усилия.
@pepelsbey
5 жыл бұрын
@@user-oe3un8ky6l может кому-то просто не нравится звук моего голоса :) Я не против и честно прошу в конце не стесняться и ставить то, что хочется. Как я ещё пойму - не делаю ли я ерунду?
@Qu2uW
5 жыл бұрын
Это кому-то youtube порекомендовал видео, которое ему не интересно. И чтобы показать это рекомендовалке ютуба, этот юзер дизлайкнул это видео.
@redegun
5 жыл бұрын
Это у некотрых условный рефлекс на слово Skillbox, Вадик здесь не причем
@dmitry.gashko
5 жыл бұрын
Классное виде!!
@rmnkot
5 жыл бұрын
мега полезное видео!!!!
@CNCraft8644
4 жыл бұрын
Видео не зря - скилбокс исправился
@nikolaichkonstantin5041
5 жыл бұрын
нажал колокольчик ))
@Prevedov
5 жыл бұрын
Здорово, классно
@_denys
5 жыл бұрын
Вадим, крутой обзор!👍 Многие вроде и слышали, и знают, но как оно толком работает не понимают. Вы в конце видео говорили о скрипте. Я вот сейчас с нуля переписал под такие вот задачи библиотеку. Кстати, натолкнули на парочку идей, что можно ещё добавить. Библиотека полностью бесплатная и выложил ее на GitHub, также ее можно установить через компосер. Саму библиотеку делал с инсталятором под Joomla, но ее можно использовать в своих проектах, как уже выше писал через composer. В виде пакета на Packaging: packagist.org/packages/joomla-ua/juimage В виде расширения для Joomla: github.com/Joomla-Ukraine/JUImage Пожелания, идеи -- приветствуются!
@morto4220
5 жыл бұрын
С картинками основная трудность - это обычно клиент. Ты сделаешь им оптимизированные картинки, но потом ему нужно обновлять сайт, он посадит кого-то левого заполнять сайт контентом, а он просто налепит картинок в том виде, каком получил. 2800*1800px для мобилки. Но видео - да, полезное.
@pepelsbey
5 жыл бұрын
Сделайте интерфейсную графику хорошо, а хорошо делать контентную должна админка - что ни загружаете, всё сконвертирует в правильный формат.
@z1mo_ok
5 жыл бұрын
Элементарные же правила Но почему-то их многие не придерживаются
@tsssssssss1
5 жыл бұрын
Тоже не понимаю, почему picture или хотя бы srcset-ы не используют даже гранды. У меня маленькая студия из 3-их человек и нам не впадло заморочиться и сделать, чтобы админка конвертила, нарезала и раскидывала по соурсам и срсетам в webp / jpg любой входящий файл. Потому что, если уж начистоту, такие вещи проще автоматизировать на бекенде, чем обучать и контролировать каждого нового контент-менеджера
@pionergena
5 жыл бұрын
бомбический выпуск ))) Новое для меня.
@DmitryPopovFreeWind
5 жыл бұрын
Спасибо!
@dobry_den321
5 жыл бұрын
Вадим, сравни Squoosh и Tinypng. Я выбрал 10jpg и 10png с рабочего проекта и прогнал их через эти два сайта, tinypng в среднем на 10% делал размер меньше, а разницу в качестве не замечал. Ну и как еще одно преимущество это API с возможностью автоматизировать это действие.
@pepelsbey
5 жыл бұрын
Если вам нужно дожать PNG до пределов, то нужно использовать программы (или сервисы), перебирающие алгоритмы оптимизации. Их штук 7 есть. Но там разница достигает 10% только в случае самых мелких картинок, вроде иконок. Ну и Tinypng и API вы можете построить себе сами на Gulp и Webpack с плагинами.
@wisdman
5 жыл бұрын
Вадим, отличное видео, спасибо! Продолжай в том же духе нести свет качественной разработки в мир вебдева. Одно но, в codepen ужасная цветовая схема для кода, текст очень сильно сливается с серым фоном.
@pepelsbey
5 жыл бұрын
Вот я тоже заметил. Это был эксперимент, в предыдущих видео у меня редактор с более контрастной схемой был. То ли найду как это настроить, то ли вернусь в редактор. Но демки точно буду хранить там, оказалось удобно. По крайней мере, пока не заведу раздел на своём сайте.
@kost9kost
5 жыл бұрын
СПАСИБО!!!
@MrPirogkow
3 жыл бұрын
Photoshop уже умеет экспортировать 8 бит с альфа-каналом Alt+Shift+Ctr+W :)
@pepelsbey
3 жыл бұрын
Только количество цветов там не настроить, смысла в этом немного.
@MrPirogkow
3 жыл бұрын
@@pepelsbey Забыл в предыдущем посте сказать спасибо за видео! Спасибо! А по поводу цветов тоже всё настраивается) скрины - prntscr.com/y0c69g и prntscr.com/y0cj5e
@pepelsbey
3 жыл бұрын
Не, смотрите: в старом диалоге можно настроить количество цветов, но нельзя сохранить PNG-8 с альфа-прозрачностью (только с обычной: да/нет). В новом диалоге можно сохранить PNG-8 с альфой, но нельзя настроить количество цветов. Засада!
@MrPirogkow
3 жыл бұрын
@@pepelsbey Согласен, но в конкретном примере на видео, банер можно было и PNG-8 ужать неплохо. Я то видео ваше нашел пока, искал про WebP и как его прикрутить к WordPress. Пока адекватных решений в виде плагинов, немного и те платные (за сжатие). Хотя только что здравая мысль постучала в голову). Конвертить сторонними сервисами или на ПК, после загружать по FTP и через плагин устанавливать в записи, страницы))) Вот уж где правда: в споре рождается истина!
@SpaceCoding
5 жыл бұрын
26.04.2019 у них все еще такие показатели: мобилка - 23, компы - 59
@juliazjochova4737
5 жыл бұрын
Руки чешутся построить все эти source блоки и порядке mobile first. Но большие картинки тогда не грузятся совсем.
@tsssssssss1
5 жыл бұрын
Julia Rietveld ай фил ю(
@alexandraweather4156
Жыл бұрын
Как понятно и красиво! А для чайников, что если я пока верстаю с левых чужих дизайнов и там нет картинки в двойном размере, я могу как-то сама сделать?
@pepelsbey
Жыл бұрын
Откройте картинку в любом графическом редакторе и увеличьть её в два раза :) Некоторые редакторы умеют улучшать графику при ресайзе, некоторые грубо увеличивают. Но для учебного проекта сойдёт в любом случае.
@user-xg3ik2zg5j
4 жыл бұрын
Спасибо за доступное пояснение. Давно искал достойную инфу. Есть сайт по оптимизации изображений tinyPng. Вопрос как сохранять изображения для ретины (2х)?
@pepelsbey
4 жыл бұрын
Не скажу про TinyPNG, но если вы зайдёте на сайт Squoosh.app, то там есть опция Resize, в которой можно сделать из большой двукратной картинки маленькую (50%) и вставить подходящим вам образом.
@alextopsite
5 жыл бұрын
Вынесу полезное знание - фотографии в PNG не хранить
@kseveru
5 жыл бұрын
так вот кто эти люди, которые так делают...)
@pnlabs
5 жыл бұрын
А это сразу разве не очевидно?
@astrotrain
5 жыл бұрын
Вадим, лови его, я его нашёл!
@tsssssssss1
5 жыл бұрын
Но только если ты не фотограф
@user-ut4hj7kc1t
5 жыл бұрын
В одном из выпусков html шортов вы говорили, что фокус эффект нужно оставлять на кнопках. И не только на них. И я с вами полностью согласен. Но что делать, если он появляется во время клика? Есть ли возможность показывать фокус только при табуляции, а при клике его хайдить?
Не всё так просто, оставьте фокус в покое, ей богу medium.com/web-standards/just-use-focus-799c577a8479
@user-ut4hj7kc1t
5 жыл бұрын
@@pepelsbey не все так просто, когда клиент дерево и не понимает слов любви) Не имейте дел с такими клиентами скажете вы и будете правы, по-своему.
@artemkom
5 жыл бұрын
Спасибо, пример очень классный. Я уже частенько использую этот тег для картинок, очень классно. Одна была проблема это как совместить все:) Т.е. и разные разрешения и ретина/не ретина. Теперь есть что брать за основу. Единственный вопрос по автоматизации. Ну с прогоном по форматам понятно, да прикрутить какой-то скрипт можно. Но как быть с форматами для мобайл/десктоп? За частую, сходя из дизайна нарпимер, автоматически порезать картинку для моб и не моб не получится. Там прямоугольник, там квадрат.... А надо еще чтоб в этот квадрат попал тот элемен, а не другой и тд... (
@pepelsbey
5 жыл бұрын
Если у вас в админке будет инструмент, который позволит кропать картинки (по сути, выделять важную область) и отдавать их дальше на автоматизацию - это решит все сложности. Но его либо нужно найти, либо написать. К сожалению, это потребует поисков и работы.
@artemkom
5 жыл бұрын
Вот, да. Собственно так это и понимал. Ибо остальное можно вообще посути "пакетно" организовать. А тут как ни крути придется кому-то поштучно кропать, даже и использованием UI. Спасибо
@kaban_78
5 жыл бұрын
Чтобы самому в консоли не вводить нужные селекторы, можно применить кастомный CSS: t7.github.io/construct.css/ Этот стиль подсветит на странице все элементы с проблемами, все будет на виду.
@powerrampage
2 жыл бұрын
Здравствуйте. Вопрос: о , Если браузер поддерживает webp, но там показывает только формат .jpg на Devtools. почему ?
@pepelsbey
2 жыл бұрын
Выделите в инспекторе и запустите вот такое в консоли: $0.currentSrc - если там будет адрес с WebP, то значит всё работает.
@user-sp9gh1sj7c
Ай бұрын
Вау
@dmitry.gashko
5 жыл бұрын
h1 был как-то совсем неожиданным..)
@artemkabanin7743
5 жыл бұрын
Здравствуйте Вадим. Спасибо за ваши видео! Интересует такой вопрос: в мире гридов и флексов осталось ли еще место для таблиц? Все время слышу и читаю, что таблицы больше не нужны так как их полностью могут заменить гриды, но есть сомнения на этот счет. Интересно ваше мнение. Спасибо
@operkot777
5 жыл бұрын
Вадим, хотелось бы узнать ваше мнение по поводу методологии utility first CSS.
@AlexBelibov
3 жыл бұрын
Давно назревал вопрос по PICTURE. Если вставлять картинку отдельно где-то в тексте или как галерею - вроде как все нормально. А если картинка соседствует с каким то блоком в плотную и нужно выдержать размеры изображения - то picture немного мешает prnt.sc/152hwow. Как можно красиво это подправить???
@pepelsbey
3 жыл бұрын
Разберитесь, чем именно мешает и уберите этот эффект :) Покажите демку, чтобы было понятнее. Ну или если вам вдруг нужен только чтобы ретину вставлять, то есть атрибут srcset прямо для .
@olegvintoniuk5288
3 жыл бұрын
Привет Вадим. Выдео очень познавательное. Как правильно подбирать ширину изображения под ширину сайта чтобы не грузить лишние килобайты? Например если максимальна ширина сайта 1400px. То какая должна быть оптимальная ширина изображения? Спасибо!!!
@pepelsbey
3 жыл бұрын
Ширину нужно выбирать под место вставки картинки, а не ширину всего сайта. Плюс нужно учитывать плотность пикселей на целевом экране и отдавать две версии: одну под ширину вставки, вторую в двукратном разрешении с помощью атрибута srcset.
@olegvintoniuk5288
3 жыл бұрын
@@pepelsbey Большое спасибо за ответ и контент!!!
@m1sima
5 жыл бұрын
Еще название придумал: html
@grantbalayan2209
5 жыл бұрын
10/10
@RetuZZik
5 жыл бұрын
Хм.... А это возможно совместить с конструкцией для object-fit c полифилом для IE или svg ?
@pepelsbey
5 жыл бұрын
это просто управляющая конструкция, которая меняет адрес в , так что чистый SVG-способ не сработает. А полифил вроде должен завестись.
@InverserPro
5 жыл бұрын
На самом деле, многие современные интернет-обозреватели уже умеют применять технологию Turbo, которая изначально была в Presto Opera. Поэтому, есть ли смысл экономии нескольких даже десятков килобайт, с конвертированием и вставкой различных форматов ради одного изображения, увеличивая размер занимаемых на сервере данных, увеличивая объем HTML, сказать трудно, как трудно сказать и для каких сайтов подойдет данный метод. Также есть формат GIF, о котором Вы не упомянули, который достаточно хорошо оптимизирует некоторые изображения. Однако, стоит отметить, что разные изображения могут по-разному оптимизироваться одними и теми же алгоритмами и форматами сжатия. webp на данный момент не поддерживается критическим количеством интернет-обозревателей, поэтому даже для больших проектов, тратить ресурсы на него - как-то не оптимально. А тот факт, что его умеет поддерживать Chromiun еще не говорит, что нет Safari, FF и прочих странных интернет-обозревателей. caniuse.com/#search=webp И еще одно дополнение, XnView в помощь.
@pepelsbey
5 жыл бұрын
Чтобы браузеры оптимизировали картинки сами (то, что вы назвали Турбо), нужны сервера, на которых крутятся фермы, которые кэшируют, проксируют и оптимизируют. Это очень дорогое удовольствие и я пока не вижу массовых браузеров, в которых это работает. Аргумент не засчитан.
@pepelsbey
5 жыл бұрын
Место на серверах достаточно дешёвое (если только у вас не хостинг картинок №1, но тогда у вас и так проблемы) и увеличение HTML, по сравнению с экономией, ничтожное. Это просто текст и он фантастически хорошо гзипуется. Аргумент не засчитан.
@pepelsbey
5 жыл бұрын
Формат GIF, по сравнению с PNG-8, почти всегда хуже. GIF лучше только в редких случаях, когда размеры небольшие и нет сложных заливок. GIF умеет сжимать одинаковые строки только горизонтально. PNG ещё и вертикально. То есть забудьте про GIF, особенно анимированный.
@pepelsbey
5 жыл бұрын
Firefox Nightly, как я уже сказал, поддерживает, Edge тоже. Остаётся только Safari. Но для этого я и предложил всегда делать фолбэк. Аргумент про браузерную поддержку не засчитан.
@pepelsbey
5 жыл бұрын
Ну то есть я вас не уговариваю, хоть в BMP отдавайте. Я привёл здесь примеры, как оптимизировать картинки хорошо. WebP - это следующий шаг после того, как вы всё сделали правильно: одни в PNG, другие в JPG. Это стоит сделать, если вам есть дело до повышения скорости вашего сайта. Но выбор формата - это уже много.
@user-rj6ro3mp1p
5 жыл бұрын
Это отличный урок. Такой вопрос возник, пр чтении всей этой конструкции браузер атрибут "alt" будет вычитывать из "img", больше его никуда прописывать не нужно? Пожалуй добавлю в закладочки этот сервис.
@pepelsbey
5 жыл бұрын
Атрибут alt (альтернативный текст, описывающий картинку) применяется только к .
@tsssssssss1
5 жыл бұрын
Picture - всего лишь невидимый элемент, обёртка вокруг img. Даже посмотрите, как Вадим его всегда набирает. Любое изображение транслируется чз img. Попробуйте его убрать из picture и картинка просто не отобразится.
Пікірлер: 305