تصاویر و ویدیوی ری‌سپانسیو

تصویر ری‌سپانسیو

img {
    max-width: 100%;
    height: auto;
}

این دو خط، جلوی بیرون‌زدن تصویر از کادر را می‌گیرد و نسبت ابعاد را حفظ می‌کند.

تصویر هوشمند (srcset)

مرورگر بر اساس اندازهٔ صفحه، تصویر مناسب را دانلود می‌کند:

<img src="small.jpg"
     srcset="small.jpg 500w, large.jpg 1200w"
     alt="...">

ویدیوی ری‌سپانسیو

video { max-width: 100%; height: auto; }

/* نسبت ثابت ۱۶:۹ برای iframe یوتیوب */
.video { aspect-ratio: 16 / 9; width: 100%; }

تصاویر بهینه و ری‌سپانسیو = سرعت بالا = سئوی بهتر.