آموزش ریسپانسیو کردن تصاویر در صفحات وب

در این مقاله قصد داریم در مورد مفهوم تصاویر ریسپانسیو و نحوه پیاده سازی آنها صحبت کنیم. تصاویری که در اندازه ها و رزولوشن‌های مختلف، بدرستی نمایش داده می‌شوند. یادگیری این بحث به ما کمک می‌کند تا بتوانیم میزان عملکرد وبسایتمان را در ارائه محتوا -خصوصا توسط تصاویر-  به مخاطبان افزایش دهیم و در نهایت تجربه کاربری بهتری را در اختیار آنها قرار دهیم.

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

تصاویر یکی از مهمترین ابزارهای انتقال اطلاعات و مفاهیم در صفحات وب هستند. اما تقریبا در ۲۵ سال گذشته تغییر چندانی در نحوه عملکرد آنها پیدا نشده است. طراحان و توسعه دهندگان فرانت‌اند بخوبی با محدودیتهای استفاده از تصاویر باخبر هستند خصوصا وقتی که پای نمایش آنها در دستگاهها با رزولوشن‌های مختلف در میان باشد. تصاویر در حالت پیشفرض با تغییر اندازه‌ی محدوده دید (viewport) یا اندازه مرورگر تغییری در اندازه نمی‌کنند. اما تصاویر ریسپانسیو نسبت به تغییر اندازه مرورگر واکنش نشان داده و با حفظ نسبت طول و عرض، تغییر اندازه می‌دهد.

تصاویر اولین موانع ایجاد صفحات ریسپانسیو (صفحاتی که در طول و عرض مقیاس پذیر باشند و در همه حال محتوای آنها بخوبی نمایش داده شوند) هستند.

اما راههایی برای این موضوع وجود دارد که در ادامه به آنها می‌پردازیم:

استفاده از ویژگی max-width در CSS

یک راه ساده اما بسیار کاربردی برای اینکه تصاویر با کوچک شدن پنجره کوچکتر شوند و همزمان تناسب خود را نیز حفظ کنند، اینست که به تصویر مقدار max-width: 100% بدهیم. در اینحالت تصویر در جایی که امکانش را دارد در اندازه کامل خود به نمایش در خواهد آمد و با کوچکتر شدن مرورگر عرض تصویر هم به همان مقدار کوچکتر خواهد شد و چون مقدار پیشفرض ویژگی height در عناصر برابر با auto است، بنابراین ارتفاع تصویر هم به همان نسبت کوچکتر می‌شود و تناسب تصویر حفظ می‌شود. البته در خیلی جاها این ویژگی را هم (height: auto) به عنصر اضافه می‌کنند تا بصورت ناخواسته از جای دیگری ارث نپذیرد.

img {
   max-width: 100%;
}

استفاده از مدیا کوئری

بی‌شک یکی از اصلی‌ترین ابزارهای توسعه وب برای طراحی صفحات ریسپانسیو مدیا کوئری است. البته استفاده از این روش هم یک روش قطعی نیست اما اگر بخواهید که مرورگر در اندازه‌های مختلف، سایزهای متفاوتی از تصویر را نمایش دهد، استفاده از مدیا کوئری می‌تواند یک روش مؤثر باشد. در مثال زیر می‌بینید که در مقدار مشخص شده در مدیا کوئری عرض تصویر تغییر می‌کند.

img {
    max-width: 50%;
}
@media (max-width: 530px) {
    img {
         max-width: 100%;
    }
}

در این مثال میبینیم که در اندازه‌های کمتر از 530px تصویر بصورت تمام عرض در صفحه به نمایش در میاید.

استفاده از ویژگی object-fit در CSS

این ویژگی یکی از دستورات کمتر شناخته شده اما بسیار مؤثر در کار با تصاویر در CSS  است. در اینجا می‌توانید در مورد این ویژگی بیشتر بخوانید. در مثال زیر با استفاده از ویژگی object-fit مشخص می کنیم که تصویر در عین داشتن ارتفاع ثابت در تمام اندازه‌ها بصورت تمام عرض و با حفظ تناسب تصویر نمایش داده شود. اگر قصد داشته باشیم که ناحیه خاصی از تصویر نمایش داده شود، می‌توانیم از ویژگی object-position هم استفاده کنیم.

img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: center;
}

استفاده از صفت srcset در تگ img

 صفت srcset در تگ img به شما این امکان را می‌دهد تا با مشخص کردن تصاویر مختلف به مرورگر این امکان را بدهید تا بر اساس عرض مرورگر یا دستگاه نمایش صفحه وب ( مانیتور، تبلت، گوشی همراه و …) از آنها استفاده کند. در این روش مرورگر تنها منابعی که نیاز دارد را استفاده می‌کند و از دانلود تصاویر بزرگتر برای دستگاههای کوچک مانند موبایل خودداری می‌کند.

در اینجا مثالی داریم که در آن ۴ تصویر برای ۴ اندازه (در اینجا عرض) نمایشگر مشخص می‌کنیم.

<img src="dog.png"
  alt="A picture of a dog"
  srcset="dog-500.png 500w,
          dog-800.png 800w,
          dog-1000.png 1000w,
          dog-1400.png 1400w">

در صفت srcset ما از حرف w برای مشخص کردن عرض مرورگر استفاده می‌کنیم. همچنین ما به صفت sizes هم نیاز داریم:

<img src="dog.png"
  alt="A picture of a dog"
  sizes="(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px"
  srcset="dog-500.png 500w,
          dog-800.png 800w,
          dog-1000.png 1000w,
          dog-1400.png 1400w">

در این مثال قطعه کد در صفت sizes اندازه تصویر را به نسبت عرض محدوده دید (viewport) مرورگر مشخص می‌کند که شرایط مختلف نیز با کاما از یکدیگر جدا شده‌اند.

شرط max-width: 500px اندازه تصویر را در ارتباط با عرض محدوده دید (viewport) مشخص می‌کند. بطور خلاصه اگر عرض تصویر کوچکتر از 500px باشد، مرورگر تصویر را تمام عرض نشان خواهد داد. اگر اندازه مرورگر بیشتر از 500px  ولی کمتر از 900px باشد، مرورگر تصویر را به اندازه نصف عرض مرورگر نشان خواهد داد. و اگر تصویر بیشتر از این مقدار باشد بیشتر از این هم باشد، مرورگر تصویر را با عرض 800px نشان خواهد داد.

واحد vw ممکن است برای شما تازگی داشته باشد که در این مقاله در باره آن صحبت کرده‌ایم، اما بطور خلاصه 1vw برابر است با %1 از عرض پنجره مرورگر بنابر این 100vw هم برابر با %100 خواهد بود.