راهنمای نمایش تصاویر ریسپانسیو در HTML

داشتن بالاترین کیفیت تصویر برای وب سایت ها این روزها بسیار مهم است. راهنمای ما یک راه برای نمایش تصاویر ریسپانسیو در HTML  را به شما نشان می دهد.

یک تصویر واکنش گرا تصویری است که با ویژگی های مختلف دستگاه سازگار است. اگر به درستی انجام شود، تصاویر واکنش گرا می توانند عملکرد و تجربه کاربری یک سایت را بهبود بخشند.

این مقاله به بررسی نحوه ایجاد تصاویر ریسپانسیو در HTML با استفاده از srcset و عنصر تصویر می پردازد.

چرا باید از تصاویر واکنش گرا استفاده کنید؟

زمانی که مهندسان نرم افزار در حال ایجاد وب بودند، در نظر نگرفتند که مرورگرها چگونه تصاویر پاسخگو را مدیریت می کنند. از این گذشته، کاربران فقط از دسکتاپ یا لپ‌تاپ به وب دسترسی داشتند. البته امروز این فرضیه دیگر درست نیست.

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

نحوه ایجاد تصاویر ریسپانسیو در HTML

می‌توانید از دو زاویه به تصاویر واکنش‌گرا نزدیک شوید—یا با ارائه یک تصویر با اندازه‌های مختلف یا ارائه تصاویر متفاوت با توجه به ویژگی‌های نمایشگر. می توانید از <picture> یا <srcset> استفاده کنید . این دو گزینه به طور متفاوتی با تصاویر واکنش‌گرا برخورد می‌کنند، اما همه آنها بسته به قوانین تنظیم شده، یک تصویر از گزینه‌های داده شده را نمایش می‌دهند.

• مرتبط : آموزش ایجاد منوی ریسپانسیو

با استفاده از srcset

HTML استاندارد <img> فقط به شما امکان می دهد یک فایل تصویری را مشخص کنید. اگر می خواهید بسته به اندازه دستگاه تصویر متفاوتی نمایش دهید، باید از srcset استفاده کنید .

نحو استفاده از این کد :

<img srcset="" src="" alt="">

srcset به شما امکان می دهد فایل های منبع اضافی را تهیه کنید و مرورگر تصویری را انتخاب می کند که برای آن اندازه تصویر بهینه به نظر می رسد.

<img srcset="cute-cat.jpg 480w,
cute-cat.jpg 800w"
src="cute-cat.jpg"
alt="A cute cat">

srcset از سه قسمت تشکیل شده است : نام فایل تصویر که مسیر تصویر مبدأ را مشخص می کند، یک فاصله و عرض ذاتی یا واقعی تصویر.

استفاده از srcset با اندازه ها

مشکل استفاده از srcset این است که شما هیچ کنترلی روی اینکه مرورگر چه تصویری را برای نمایش انتخاب می کند ندارید. ترکیب srcset با اندازه ها این مشکل را حل می کند. اندازه ها مجموعه ای از شرایط رسانه ای را تعریف می کنند که به تصویر با اندازه بهینه اشاره می کند.

اکنون می توانید تگ <img> بالا را به صورت زیر بازنویسی کنید .

<img srcset="cute-cat.jpg 480w,
cute-cat.jpg 800w"
sizes="(max-width: 600px) 480px,
800px"
src="cute-cat.jpg"
alt="A cute cat">

اندازه‌ها از یک شرط رسانه تشکیل شده‌اند، در این مثال (حداکثر عرض: ۶۰۰ پیکسل) است که نشان‌دهنده عرض، فضا و عرض شکاف (۴۸۰ پیکسل) است و فضایی را که تصویر پر می‌کند در صورت درست بودن شرط رسانه مشخص می‌کند.

در این کد ، مرورگر ابتدا عرض دستگاه را بررسی کرده و آن را با وضعیت رسانه مقایسه می کند. اگر شرط درست باشد، عرض شکاف را بررسی می کند و تصویری را از srcset با همان عرض یا تصویر بزرگتر بعدی بارگذاری می کند.

srcset همچنین به شما امکان می دهد تصاویر را با وضوح های مختلف با استفاده از توصیفگرهای x ارائه دهید.

<img srcset="cute-cat-high.jpg,
cute-cat-high1.jpg 1.5x,
cute-cat-high2.jpg 2x"
src="cute-cat-low.jpg"
alt="A cute cat">

در این مثال، اگر دستگاه دارای وضوح دو پیکسل  در هر CSS یا بیشتر باشد، مرورگر تصویر cute-cat-high1.jpg را بارگیری می کند.

پیکسل های سخت افزاری و نرم افزاری

مشکل این راه حل این است که تصاویر فقط از نظر تراکم پیکسلی دستگاه واکنش گرا هستند. این نسبت پیکسل های سخت افزاری به پیکسل های نرم افزاری یا CSS است. یک پیکسل سخت افزاری نقطه واقعی نور روی صفحه است در حالی که پیکسل نرم افزار یا پیکسل CSS یک واحد اندازه گیری است. تراکم پیکسلی وضوح دستگاه را تعیین می کند.

هنگام ارائه تصاویر واکنشگرا، تنها رزولوشن را در نظر نگیرید. اندازه نمایشگر نیز مهم است. در غیر این صورت، ممکن است به طور غیر ضروری تصاویر بزرگ یا تصاویری را که بیش از حد پیکسل هستند بارگیری کنید.

<img srcset="cute-cat-high1-480w.jpg 1.5x,
cute-cat-high2-640w.jpg 2x"
src="cute-cat-low.jpg"
alt="A cute cat">

با استفاده از <picture>

<picture> یک تگ HTML است که چندین عنصر <source> را شامل فایل‌های منبع مختلف و یک عنصر <img> دربرمی گیرد. در حالی که

<img srcset="" sizes="" alt="">

تصاویر را با ارائه اندازه های مختلف از یک تصویر ریسپانسیو می کند، <picture> به شما امکان می دهد در واقع تصویر نمایش داده شده را تغییر دهید.

نحوه استفاده :

<picture>
<source media="" srcset="">
<source media="" srcset="">
<img src="" alt="">
</picture>

موقعیتی را در نظر بگیرید که در آن تصویر منظره بزرگی دارید. تصویر روی دسکتاپ نمایش داده می شود و متناسب به نظر می رسد، اما در تلفن همراه به طور قابل توجهی کوچک می شود به طوری که عناصر روی تصویر کوچک می شوند. تصویر غیر پاسخگو به تجربه کاربری بد کمک می کند. با <picture> می‌توانید به مرورگر خود بگویید که هنگام استفاده از تلفن همراه، به تصویر پرتره کلوزآپ سوئیچ کند.

<picture>
<source media="(max-width: 639px)" srcset="cute-cat-480w.jpg">
<source media="(min-width: 640px)" srcset="cute-cat-640w.jpg">
<img src="elva-640w.jpg" alt="A cute cat">
</picture>

مانند روش اول، <source> حاوی یک ویژگی رسانه است که می توانید از آن برای ارائه شرایط رسانه استفاده کنید. به عنوان مثال، اگر عرض نمای ۶۳۹ پیکسل یا کمتر باشد، مرورگر “cute-cat-480w.jpg” را نمایش می دهد. srcset مسیر فایل تصویری را که می خواهید نمایش دهید نگه می دارد و src تصویر پیش فرض را مشخص می کند.

جایگزینی برای قالب تصویر WebP

یکی دیگر از مواردی که <picture> به خوبی از عهده آن برمی‌آید این است که برای فرمت‌های تصویر مدرن مانند WebP یک نسخه بازگشتی ارائه می‌کند. تصاویر WebP عملکرد بالایی دارند، کوچک هستند و تجربه وب سریعی را ارائه می دهند. بنابراین می توانید در مورد استفاده از آنها در سایت خود تصمیم بگیرید. چالشی که ممکن است تجربه کنید این است که همه مرورگرها از تصاویر WebP پشتیبانی نمی کنند. با <picture> ، این مشکل را تجربه نمی‌کنید زیرا مرورگر شما می‌تواند یک تصویر جایگزین را در صورت عدم پشتیبانی از WebP بارگیری کند.

<picture>
<source type="image/webp" srcset="cute-cat.webp">
<img src="cute-cat.jpg" alt="A cute cat.">
</picture>

چرا تصاویر ریسپانسیو را در HTML ایجاد کنیم و نه در CSS؟

CSS گزینه های قوی برای مدیریت تصاویر واکنش گرا ارائه می دهد. پس چرا از آن استفاده نکنیم؟ مرورگر قبل از اینکه CSS را تجزیه کند، تصاویر را از قبل بارگذاری می کند. بنابراین قبل از اینکه جاوا اسکریپت سایت شما عرض درگاه دید را برای ایجاد تغییرات مناسب در تصاویر تشخیص دهد، تصاویر اصلی از قبل بارگذاری شده اند. به همین دلیل، بهتر است تصاویر واکنشگرا را با استفاده از HTML مدیریت کنید.

بهترین کیفیت تصویر ممکن را هدف بگیرید

در این مقاله مشاهده کرده اید که چگونه می توانید تصاویر ریسپانسیو در HTML را با استفاده از تگ های <picture > و <srcset> ایجاد کنید. ارائه تصاویر واکنشگرا معمولاً شامل در نظر گرفتن اندازه تصویر و وضوح تصویر است که به اندازه نمایش مربوط می شود. اگر اشتباه انجام شود، کیفیت تصویر ممکن است آسیب ببیند. مطمئن شوید که تصویری را انتخاب کنید که با استفاده از کمترین منابع، قابلیت استفاده بهینه را فراهم کند.