С навлизането на мобилното браузване, екраните с висока резолюция и отзивчивия дизайн все по-често срещам решения, които зареждат картинки с различни размери в зависимост от екранната ‘ширина’ на устройствата. Това, което ми прави силно впечатление, е че повечето от уеб приложенията не осмислят изцяло идеята, а директно вмъкват функционалност върху старата инфраструктура.
Често забелязвам подобен код:
<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.