Всем привет! Можете подсказать ? Который раз уже пытаюсь понять истину, как

грамотно указывать width и height в различных случаях использования изображений, в спеках вроде бы и написано, но не совсем применимо ко всем ситуациям что-ли, либо мне это тяжеловато дается скорее всего )
Как вчера обсуждалось - в source для picture появилась возможность указывать width и height совсем недавно, но это не суть вопроса.
Для максимальной примитивности приведу такой пример:
Вот к примеру есть резиновая верстка, mobile first подход.
Есть резиновое изображение во всю ширину экрана.
Есть 6 типов этого изображения:

image@1x.avif
image@2x.avif
image@1x.webp
image@2x.webp
image@1x.jpg
image@2x.jpg

Изображение у меня начинает отображаться к примеру при (min-width: 1200px) и выше
Если я его сделаю 1200px шириной для @1x и 2400px для @2x - на ширине вьюпорта 1920px - оно в любом случае растянется и станет замыленным
Исходя из этого - у меня возникается мысль - сделать его больше в 2 раза в любом случае, т.к. если оно будет сжато - замыленности не будет, а при максимальном растяжении - оно как раз будет примерно по ширине viewport'а
Делаю 2400px шириной для @1x и 4800 для @2x
В таком случае мне всегда, независимо от того, source это или img - указывать в width и height размеры именно исходников ? Т.е. Intrinsic size
Т.е. width="2400" для @1x и width="4800" для @2x ?
Или я все-же что-то не понимаю ?

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

Хорошо, Спасибо!

нужно смотреть просто на фото и подбирать на каждом разширении, а так обычно достаточно добавить еще один размер в 1440px, если ты гонишься за качеством, с плотностью пикселей лучше не пробовать адаптировать картинки, она подходит чтоб улчучшить качество картинке там где это нужно(есть лендинги где это маст хев)

В спецификации сказано: (прилагаю скриншот) Довольно размытые касаемо данного вопроса формулировки, но лично мной воспринимается, как напутствие для указания размеров исходников, для помощи UserAgent'у при подсчете Aspect Ratio при построении Layout'а. Вчера общался с человеком, чье мнение в данном вопросе лично для меня точно имеет значение (выступает с докладами для сотрудников Яндекса и других подобных компаний) - мнение таковое, что в html атрибутах width и height следует указывать размеры именно исходников. Вобщем в любом случае Спасибо за готовность помочь! ) Я не спора ради, всегда благодарен за готовность помочь ) Странно, что такой, казалось бы элементарный вопрос - вызывает так много размышлений о правильности решения )

userconcept Concept
Т.е. просто на глаз подбирать ? ) Ну это тогда и p...

нужно что-то посрединке, а 1300-1500 это реальный размер окна браузера где-то 90% ноутбуков и где-то 15-20% дестопа(но по нем точно не помню) 1440, это просто где-то посрединке и часто на этот размер делают дизайн:)

я именно об этом и говорил, в html не нада ничего писать больше со стороны стиле, пардон если не понятно обяснил

поздравляю вы поняли что чуствуют синьеры, любую тему можно копать до бесконечности почти :)

Да вот ноутбуки сейчас часто 1920/1080 идут, если бы как раньше 1366/768 - полегче было бы, а сейчас либо масштаб делать, либо breakpoint дополнительный ) Но в целом Спасибо вам за готовность помочь! Вообще радует, что в этом чате всегда можно пообщаться по делу, без лишних троллингов, оффтопов, хамства и всегда есть люди, готовые помочь! 🙂 А у senior'ов да, наверное прилично бессонных ночей проходит, за изучением поведения совместно используемых text-rendering: optimizeLegibility; и -webkit-font-smoothing: antialiased; на Retina 6K + масштаб 200% + вариативный шрифт по всем возможным осям, с jest для автоматизации процесса 😀

нет 1920, это то что на бумаге, он у моегго тоже написано что 1920, в реальности 1460вроде, сделай простый скрипт и протести у себя, если любопытно

это масштаб дэфолтный просто, 125%

userconcept Concept

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

Андрей

И это просто к всем компьютерам, с них где-то 40 процентов это ноутбуки, а тех ноутбуках чаще всего написана одна ширина в реальности немного другая для браузера

Совсем нет, потому что это вы зачем-то забиваете себе голову лишними деталями, которые на практике не особенно нужны)

Просто реальное разрешение изображения и все.

Если правильно вас понимаю - наверное имеется ввиду, что пользователи ноутбуков часто используют масштабирование ?

нет, реальные размеры екрана браузера намного меньше чем те что указанные

Андрей

пограйтесь и проверьте сами, у меня крутой легион 7, в какого вказанная ширина 1920px

Спасибо! Надо поизучать вопрос, удивительно очень. Я бы предположил, что из-за масштаба ОС - innerWidth выводит именно css пиксели, но спорить не буду, попробую поизучать )