Друзья, всем мира!
Посоветуйте, как подобрать размеры изображений?
Первый слайд, это карусель, в этой карусели у меня изображение, и текст.
Мне нужно сохранить контекст изображения и текст соответственно.
Но вот вопрос:
Как угадать размеры изображения, что бы первый экран был 100vh и 100vw, ведь размеры мониторов разные и тут много вопросов у меня:
- от 768 до 320 это мобильные и для них нужно вертикальное изображение что бы и тест был размещен и содержимое изображения было видно? или на мобильных лучшей практикой будет вообще не использовать слайдер для обеспечения легкости сайта?
- от 768 и выше изображение уже горизонтальное изображение нужно. Но мониторы разные у людей и хотелось бы обеспечить для всех мониторов одинаковое качество изображений и сохранить высокую скорость загрузки сайта.
Если я верно понимаю, то при создании изображения, нужно одно и то же изображение загрузить на сайт, но в нескольких разрешениях и потом их подгружать, под разные разрешения экрана?
Что то типа:
240×320
320×240
320×480
480×360
360×640
480×800
768×1024
640×960
1280×800
2048×1536
Друзья, я совсем запутался.
Объясните "на пальцах".
Спасибо.
Все зависит от дизайна, кол-ва текста, кол-ва полезной информации на самой картинке и т.д.. Ваш вопрос в данном случае слишком абстрактный, чтобы все было хорошо на любом устройстве верстайте резину + адаптив с медиа запросами, меняйте размер экрана в инспекторе и смотрите что получается
Сначала нужно определиться кто вы: дизайнер или верстальщик?
С верстальщиком в некотором роде проще: можно узнать как это видит дизайнер и верстать.
Адаптивные контентные картинки верстаются тегом picture.
Остальное перестраивается с помощью @media либо за счет гибкости флексов или гридов.
Если дизайнер: статистика, конкуренты, изучение геометрии и т.д. И 100 раз подумать, а действительно ли для всех вьюпортов разумно делать на один экран.
Для правильного размера изображения можно использовать тег picture
А для позиционирования текста относительно картинку, можно регулировать через css media-запросы
Средний
