در این پست قصد داریم نکاتی ساده اما کاربردی برای استفاده از عکس‌ها در صفحات وب به‌عنوان یک توسعه‌دهنده‌ی فرانت‌اند ارائه دهیم.
سایت‌های بسیاری وجود دارند که به کمک آن‌ها می‌توانیم عکس‌های خود را فشرده کنیم. با این کار حجم فایل‌ها تا حد قابل قبولی کاهش پیدا می‌کند و معمولا کاهش کیفیت عکس‌ها به گونه‌ای می‌باشد که چشم انسان قادر به تشخیص افت کیفیت ناشی از فشرده‌سازی عکس‌ها نمی‌باشد.
فرمت WebP فرمت تصویری است که توسط گوگل راه اندازی شده است که هم روش های فشرده سازی با اتلاف و هم بدون اتلاف را ارائه می دهد. مزیت آن در الگوریتم فشرده‌سازی تصویر عالی آن منعکس شده است که می‌تواند حجم تصویر کمتر و کیفیت تصویر بالاتر را به ارمغان بیاورد. طبق دستورالعمل‌های رسمی، .webp می‌تواند حجم PNG را در حالت فشرده‌سازی بدون اتلاف ۲۶ درصد و در صورت فشرده‌سازی با اتلاف ۲۵ تا ۳۴ درصد کاهش دهد.
سایت‌های بسیاری در اینترنت وجود دارند که به کمک آن‌ها می‌توان فرمت‌های مختلف عکس را به فرمت webp تبدیل کرد. به‌عنوان نمونه می‌توانید از این لینک برای تبدیل عکس‌های jpeg به webp استفاده کنید.
تگ <picture> حاوی صفر یا چند تگ <source> و یک تگ <img> برای ارائه نسخه‌های جایگزین تصویر برای سناریوهای مختلف (از نظر شیوه نمایش یا نوع دستگاه) می‌باشد.
مرورگر تگ‌های <source> را در نظر گرفته و بهترین آن‌ها را بسته به شرایط انتخاب می کند. اگر هیچ کدام از این موارد مناسب نبودند و یا مرورگر از عنصر <picture> پشتیبانی نکند، عکس موجود در src داخل تگ <img> انتخاب می‌شود. سپس تصویر انتخاب شده در فضای اشغال شده توسط عنصر <img> نمایش داده می شود.
به‌عنوان مثال می‌توانیم داشته باشیم:
<picture>
<source srcset="/static/banner.webp" type="image/webp" />
<source srcset="/static/banner.jpg" type="image/jpg" />
<img src="/static/banner.jpg" alt="banner" class="top-banner" />
</picture>
از آنجایی که ممکن است مدتی طول بکشد تا تصاویر به طور کامل لود شوند، خوب است background-color عکس ها را روی رنگ مناسبی تنظیم کنیم تا کاربر بداند در هنگام بارگذاری کامل با چه چیزی روبرو خواهد شد.
