دعم قوالب للريتنا

لاحظت أيضا ذلك في ثيم فورست

وبحسب ما فهمت عند إنشاء موقع متجاوب على الهواتف الذكية يكون عرض الموقع مثلا 480px وإذا وضعت صورة بعرض 480px

ولأن الهواتف الذكية حاليا دقة عرض شاشاتها 1080px في الوضع العمودي أو 1920px في الوضع الأفقي لذلك صورة 480px قد تظهر بشكل غير دقيق جدا، لذلك يتم تغيير src الصورة إلى صورة أخرى بعرض 960px مثلا

مثلا الصورة الأصلية my-image.png وعند الدقة الكبيرة my-image-2x.png

ولتطبيق هذا برمجيا

<img src="my-image.png" data-2x="my-image-2x.png">
<script>
    if (window.devicePixelRatio >= 1.5) {
        (function () {
            var imgs = document.querySelectorAll("[data-2x]"),
                i = imgs.length;
            while (i--) {
                imgs[i].setAttribute("src", imgs[i].getAttribute("data-2x"));
            }
        }());
    }
</script>