Responsive Web Design – Images
طراحی وب واکنشگرا – تصاویر
وقتی وبسایتی واکنشگرا طراحی میکنید، تصاویر باید بتوانند خودشان را با اندازههای مختلف صفحه نمایش و رزولوشنهای متفاوت تطبیق دهند تا هم زیبا دیده شوند و هم بهینه بارگذاری شوند.
روشهای کلیدی برای تصاویر واکنشگرا:
۱. تصاویر سیال (با استفاده از max-width در CSS)
تصاویر را طوری تنظیم کنید که عرض آنها حداکثر به اندازه عرض ظرف (container) باشد:
max-width: 100%;
height: auto;
display: block;
}
-
max-width: 100%باعث میشود تصویر هیچوقت از عرض ظرف خود بزرگتر نشود. -
height: autoنسبت ابعاد تصویر را حفظ میکند. -
display: blockفضای اضافی زیر تصویر را حذف میکند.
۲. استفاده از عنصر HTML <picture>
عنصر <picture> به شما امکان میدهد که تصاویر متفاوتی را برای اندازهها یا رزولوشنهای مختلف صفحه تعریف کنید.
مثال:
<picture>
<source media=“(max-width: 600px)” srcset=“small-image.jpg”>
<source media=“(min-width: 601px)” srcset=“large-image.jpg”>
<img src=“large-image.jpg” alt=“تصویر نمونه”>
</picture>
-
در صفحههای کوچک (۶۰۰ پیکسل یا کمتر)، تصویر
small-image.jpgبارگذاری میشود. -
در صفحههای بزرگتر، تصویر
large-image.jpgبارگذاری میشود. -
تگ
<img>داخل<picture>نقش پشتیبان (fallback) را دارد.
۳. استفاده از خصوصیات srcset و sizes در تگ <img>
این دو خصوصیت به مرورگر اجازه میدهند بهترین تصویر را بر اساس رزولوشن دستگاه و اندازه پنجره انتخاب کند.
مثال:
src=“image-800.jpg”
srcset=“image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w”
sizes=“(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px”
alt=“تصویر نمونه”>
-
srcsetفهرستی از تصاویر همراه با عرض هر کدام است. -
sizesبه مرورگر میگوید تصویر در هر اندازه صفحه چه عرضی خواهد داشت. -
مرورگر بهینهترین تصویر را برای تعادل کیفیت و سرعت بارگذاری انتخاب میکند.
خلاصه
-
از تصاویر سیال با CSS استفاده کنید تا تصاویر خود به خود اندازهشان تغییر کند.
-
از عنصر
<picture>برای ارائه تصاویر متفاوت بر اساس اندازه صفحه یا تراکم پیکسلی استفاده کنید. -
از خصوصیات
srcsetوsizesاستفاده کنید تا مرورگر بهترین تصویر را انتخاب کند.
دیدگاهتان را بنویسید