مقدمه‌ای اساسی برای بهینه سازی تصویر در وب

تصاویر یکی از عناصر ضروری اغلب وبسایت‌ها هستند. کیفیت بصری تصاویر تاثیر مستقیمی بر روی تصویر برند و پیامی که آن تصاویر منتقل می‌کنند دارد و حجم تصاویر معمولا ۴۰ تا ۶۰ درصد داده‌های منتقل شده در وب را تشکیل می‌دهند.

این معمولا بیشترین تاثیر را در بارگذاری سایر منابع مانند جاوااسکریپت دارد. بنابراین، اگر ما یک وبسایت را ایجاد یا راه‌اندازی کنیم، باید تصاویر و پایپ‌لاین‌ها را بهینه سازیم.

گزینه‌های زیادی برای انجام این کار وجود دارد، مانند: نرم‌افزار توسعه‌های درون سازمانی مبتنی بر کتابخانه‌های متن‌باز، مجموعه‌هایی از ImageMagick مبتنی بر ابزارهای ابری و APIها.

برای بهینه سازی، ۴ وظیفه‌ی اصلی وجود دارد که هر پایپ‌لاین باید آن را انجام دهد.

تغییر اندازه‌ی تصاویر

تغییر اندازه‌ی تصاویر اولین و مهم‌ترین مرحله است. این کار تاثیر زیادی بر روی کیفیت بصری می‌گذارد، تا زمانی که با کم کردن رزولوشن باعث کاهش کیفیت و زشت شدن تصویر نشود. ما همیشه باید حداکثر رزولوشن تصویر (۲۰۰۰ پیکسل) را در وبسایت خود تنظیم و اجرا کنیم.

در حالت ایده‌آل، ما می‌خواهیم وبسایت خود را با تنظیم Breakpointهای مختلف و ارائه‌ی تصاویر مناسب با صفحه نمایشگر کاربران، رسپانسیو سازیم.

انتخاب فرمت مناسب

فرمت JPEG، قالب پیش‌فرض تصاویر در وب است. ممکن است فرمت PNG با رنگ‌های ثابت طرح‌های گرافیکی بهتر کار کند، اما ممکن است حجم و کیفت بهتری داشته باشد. ممکن است شما پیشنهاد WEBP را برای کاربران کروم، اِج، فایرفاکس و اندروید در نظر داشته باشید و JPEG را به‌عنوان بازخورد سافاری و iOS نگه دارید. این کار ممکن است ۱۰ تا ۳۰ درصد از حجم تصویر را با کیفیت بسیار مشابه و شاید کمی تارتر، کم کند.

فشرده‌سازی صحیح تصاویر

ما می‌توانیم این کار را با یک مجموعه‌ی متن‌باز قدرتمند مانند ImageMagick انجام دهیم و به سادگی یک فاکتور کیفیت (معمولاً ۷۵ تا ۸۵) را برای تصاویر JPEG و WEBP تنظیم کنیم. شما هنوز هم می‌توانید از یک معیار ادراکی برای محافظت بهتر از کیفیت و حجم فشرده‌تر استفاده کنید،‌ این گزینه در برخی از ابزارهای بهینه سازی تصویر ابری موجود است.

از دست metadata خلاص شوید

از عکس‌برداری گرفته تا ویرایش، تصاویر هم مانند داده‌های exif، metadata را جمع‌آوری می‌کنند. در حالی‌که آن ها ممکن است برای اهداف ویرایش و مدیریت مفید باشند، اما هیچ تاثیری در نحوه‌ی نمایش تصاویر در وب ما ندارند. حجم آن‌ها به راحتی می‌تواند در هر تصویر ۲۰ کیلوبایت یا بیشتر باشد. ما باید قبل از انتشار تصاویر در وب از شر ابرداده‌ها خلاص شویم. ما فقط باید اطمینان حاصل کنیم که تصاویر با جهت‌گیری مناسب و با یک مشخصه‌ی sRGB، مطابق با روش‌های مدیریت خوب رنگ، کدنویسی شده‌اند.

منبع