С навлизането на мобилното браузване, екраните с висока резолюция и отзивчивия дизайн все по-често срещам решения, които зареждат картинки с различни размери в зависимост от екранната ‘ширина’ на устройствата. Това, което ми прави силно впечатление, е че повечето от уеб приложенията не осмислят изцяло идеята, а директно вмъкват функционалност върху старата инфраструктура.

Често забелязвам подобен код:
<img src="old.image.jpg" id="ID" alt=".."/>

и наслаганото решение:
<script>
if (window.devicePixelRatio > 1) {
   document.getElementById('ID').src = 'device.ratio.jpg'
}
</script>

Това, което не е съобразено в горния код е, че браузърите започват да дърпат файловете още преди оформлението да е изцяло рендрирано, а когато предварителното парсване прихване img src започва да го сваля моментално. Така горния код ще свали и двете картинки.

Наслагването върху старата инфраструктура не е добро решение. За съжаление и не знам приложение, което може да се нарече перфектното. Най-доброто за мен в момента е Adaptive Images на Matt Wilcox, но и той, цитирайки Yoav Veiss, казва:

„Няма начин да се гарантира, че бисквитката ще бъде зададена преди изображенията, да бъдат свалени – макар и скриптът, който поставя бисквитка, да се зарежда от браузъра преди да прихване <img /> таговете.“

Затова помислете, дали не е по-добре, да оставите на потребителя да си гледа старата картинка – така поне ще сваля само една… :о)

Препоръчвам ви статията Adaptive Images for Responsive Designs на Matt Wilcox в 24 ways.