Я просмотрел несколько статей о StackOverflow, но ни одна из них не помогла мне сделать именно то, что я пытаюсь, то есть использовать изображения с разным разрешением в зависимости от типа устройства, на котором осуществляется доступ к веб-сайту. По сути, я хочу просто отобразить изображение шириной 400 пикселей на смартфонах, изображение шириной 800 пикселей на планшетах и изображение шириной 1400 пикселей на настольных и портативных компьютерах. Я начал с использования медиазапросов в моих CSS файлах и настройки «display: none», чтобы скрыть изображения другого размера. Проблема с этим методом заключается в том, что хотя изображения не показывались на странице, они все еще загружались в фоновом режиме, что замедляло время загрузки моей страницы.
Я нашел способ загрузить только размер изображения, который я хочу, используя атрибут "srcset" тега img в моем файле HTML, но у меня чертовски много времени выясняется, как его правильно использовать. Вот ссылка на страницу , которую я нашел, которая объясняет, как это сделать. Проблема, с которой я сейчас сталкиваюсь, заключается в том, что в нем указано, что он будет загружать изображения наилучшего размера для данного типа устройства, но когда я укажу три изображения с разным разрешением, я не смог заставить его использовать на своем смартфоне другое изображение, чем отображается на моем планшете. Я не эксперт по HTML или CSS, но это не должно быть почти так же сложно, как имхо сделать это. Я действительно не нуждаюсь в загрузке изображения 800px на смартфон, когда 400 выглядит хорошо и уменьшит размер файла почти на 1/4.
Вот код, который я сейчас использую, который использует метод, описанный в статье:
<img src="images/index-tiles/blue-watercolor-md.jpg" srcset="images/index-tiles/blue-watercolor-wd.jpg 800w, images/index-tiles/blue-watercolor-md.jpg 1400w" sizes="(min-width: 800px) 800px, 100vw">
Я попытался добавить третий уровень в атрибуте размеров (с минимальной шириной 300 пикселей и т. Д. c.), Чтобы попытаться настроить таргетинг на мой смартфон, так как а также добавив 3-е изображение srcset (шириной 400 Вт), но не мог понять, как заставить его работать должным образом после часа пробовать все, что мог придумать. Одним из основных преимуществ этого метода является то, что он позволяет мне использовать изображения с квадратным соотношением сторон на мобильных устройствах (с оптимальным разрешением для этого типа устройств), но использовать широкое изображение с более высоким разрешением для настольных компьютеров и ноутбуков. Это единственный способ сделать это эффективно, без ненужной загрузки других изображений в фоновом режиме (например, при использовании display: ни один, чтобы скрыть большие изображения на других типах устройств, используя медиа-запросы в моем CSS), поэтому Мне бы очень хотелось, чтобы это заработало.
Заранее спасибо за любую помощь!