Использую тег
picture в верстке для оптимизации изображений, Браузер Safari (15.2) при загрузке сайта скачивает несколько изображений вместо одного и из тега
source и из тега
img.
<picture>
<source media="(min-width: 650px)" type="image/webp"
srcset="images/pictures/services/photo-portrait.webp" class="item-services__picture-object">
<source media="(min-width: 650px)" type="image/jpeg" srcset="images/pictures/services/palms.jpeg"
class="item-services__picture-object">
<source media="(min-width: 0px)" type="image/webp"
srcset="images/pictures/services/photo-portrait-m.webp" class="item-services__picture-object">
<source media="(min-width: 0px)" type="image/jpeg" srcset="images/pictures/services/orange.jpg"
class="item-services__picture-object">
<img src="images/pictures/services/photo-portrait-img.jpg" alt='Фотопортрет на холсте'
class='item-services__picture-object'>
</picture>
То-есть по идее, Сафари должен найти первое подходящее изображение из тега
source, скачать его и закончить с тегом
picture после этого, но вместо этого он все равно скачивает изображение из тега
img. Если мы говорим про устройство с viewport width больше 650px Сафари загружает palms.jpeg и photo-portrait-img.jpg. Когда viewport width устройства меньше 650px Сафари загружает orange.jpg и еще photo-portrait-img.jpg, в чем может быть проблема?