میزان صحیح کم حجم کردن عکس را از کجا متوجه شویم؟
تصاویر معمولاً از نظر حجم، بیشترین بایت را به خود اختصاص می‌دهند. همچنین از نظر بصری نیز بیشترین فضا را اشغال می‌کنند، در نتیجه بهینه‌سازی تصاویر می‌تواند تأثیر چشم‌گیری بر صرفه‌جویی در مصرف داده‌های وبسایت داشته باشد. به این ترتیب با بهینه‌سازی تصاویر شما می‌توانید به بهبود عملکرد کلی وبسایت خود و سئو سایت نیز کمک شایان توجهی کنید. با کاهش میزان بایت دانلود‌شده، پهنای‌باند بیشتری در اختیار مشتری قرار می‌گیرد. به این ترتیب مشتری می‌تواند با سرعت بالاتری می‌تواند داده‌های مفید وبسایت شما را رندر نماید.
بهینه‌سازی تصاویری هم یک هنر و هم یک علم است. در وهله اول این کار یک هنر است، زیرا روش یکسانی برای کاهش حجم و فشرده‌سازی همه تصاویر وجود ندارد. یعنی هر تصویر را باید به روش خاصی فشرده‌سازی کنید. در وهله دوم این کار یک علم است. زیرا باید از الگوریتم‌‌ها و تکنیک‌های مختلف برای کاهش سایز تصاویر استفاده کنید. یافتن بهترین شرایط برای تصاویر شما، نیاز به تحلیل‌های دقیق در ابعاد مختلف دارد. شما می‌بایست format capabilities یا همان قابلیت‌های فرمت، محتوای داده‌های اینکد شده، ابعاد پیکسل و سایر ابعاد را هنگام بهینه‌سازی تصاویر در نظر داشته باشید.
بهینه‌سازی تصاویر وکتور
تمامی مرورگرهای امروزی از وکتورها یا همان SVG ها پشتیبانی می‌کنند. وکتور یک فرمت تصویر 2بعدی بر اساس XML است. شما می‌توانید مارک – آپ SVG را به‌صورت مستقیم در صفحه یا ریسورس‌های اکسترنال imbed کنید. شما می‌توانید از اکثر نرم‌افزارهای طراحی وکتور محور برای ساخت SVG استفاده کنید یا اینکه خودتان به‌صورت دستی در یک ویرایشگر متنی آن‌ها را کدنویسی کنید.
مثال بالا یک دایره ساده قرمز را نشان می‌دهد که دور آن یک خط مشکی کشیده شده است. رنگ قرمز پس‌زمینه دایره از Adobe Illustrator خروجی گرفته شده است. همان طور که می‌بینید، در این کد از متادیتاهای بسیاری همانند اطلاعات لایه، کامنت و XML Namespace استفاده شده است. اکثر این اطلاعات برای رندر یک Asset در مرورگر غیرضروری هستند. در نتیجه بهتر است با کمک ابزارهایی همانند SVGO، تا حد امکان کدهای یک SVG را کاهش دهیم. با کمک SVGO، اندازه تصویر بالا را تا حدود 58 درصد کاهش دادیم. در نتیجه سایز آن از 470 بایت به 199 بایت کاهش پیدا کرد.
به‌دلیل آنکه SVG یک فرمت XML محور است، می‌توانید از الگوریتم فشرده‌سازی Gzip نیز برای کاهش حجم آن استفاده کنید. فقط حتماً مطمئن شوید که سرور شما بر اساس Assetهای SVG فشرده شده، پشتیبانی می‌کند.
از طرف دیگر یک تصویر Raster از 2بعد ساده به شکل چهارخانه ساخته می‌شود. این چهارخانه‌ها همان پیکسل‌ها هستند. به‌عنوان مثال یک تصویر 100x100پیکسل، یک مربع با 10،000 پیکسل است. از طرف دیگر هر پیکسل حاوی اطلاعات یک RGBA است. R مخفف Red Channel، G مخفف Green Channel، B مخفف Blue Channel و در نهایت A مخفف Alpha Transparency Channel است.
به‌صورت پیش‌فرض، مرورگر 256 واحد را به هر کانال اختصاص می‌دهد. این یعنی 8 بیت به هر کانال (2 ^ 8 = 256), و 4 بایت به هر پیکسل (4 channels x 8 bits = 32 bits = 4 bytes) اختصاص داده می‌شود. در نتیجه اگر تعداد پیکسل‌های یک تصویر را بدانیم، می‌توانیم اندازه نهایی آن را بر همین اساس محاسبه کنیم:
- یک تصویر 100 در 100 پیکسل شامل 10،000 پیکسل می‌شود
- 10،000 پیکسل ضرب در 4 بایت معادل 40،000 بایت خواهد شد
- 40،000 بایت تقسیم بر 1024 معادل 39 کیلوبایت می‌شود
گذشته از این، بدون در نظر گرفتن فرمت تصویری که برای انتقال داده‌ها از سرور به مشتری انتخاب شده است، وقتی که تصویر توسط مرورگر دی – کد می‌شود، همواره هر پیکسل 4 بیت از مموری را اشغال می‌کند. این مسئله یک محدودیت بسیار بزرگ برای تصاویری با حجم بالا محسوب می‌شود. اگر دستگاه کاربر حجم قابل دسترس کافی نداشته باشد، این مسئله می‌تواند مشکل‌ساز شود. به‌عنوان مثال می‌توانید یک دستگاه موبایل با حافظه کم را در نظر بگیرید.
| ابعاد | پیکسل‌ها | اندازه فایل |
| 100* 100 | 10,000 | 39 KB |
| 200* 200 | 40,000 | 156 KB |
| 300* 300 | 90,000 | 351 KB |
| 500* 500 | 250,000 | 977 KB |
| 800* 800 | 640,000 | 2500 KB |
شاید در نگاه اول یک عکس 100 در 100 پیکسل با سایز 39 کیلوبایت، اصلاً بزرگ به نظر نرسد؛ اما سایز فایل برای تصاویر بزرگ‌تر ناگهان با سرعت تصاعدی افزایش پیدا می‌کند و این مسئله باعث می‌شود تا Assetهای تصویری با سرعت کمتری دانلود شوند و هزینه بیشتری در بر داشته باشند. البته این جدول اندازه تصاویر بدون در نظر گرفتن فشرده‌سازی را نشان می‌دهد. خوشبختانه با کمک فشرده‌سازی بخش عمده این سایزها کاهش پیدا می‌کنند.
یک روش ساده برای کاهش حجم تصاویر، کاهش "bit-depth" تصاویر از 8 بیت در هر کانال به پالت‌های رنگ کوچک‌تر است. 8 بیت در هر کانال 32 بیتی به ما 256 واحد در هر کانال می‌دهد. در نهایت باید 256 را به توان 3 برسانیم تا میزان رنگ‌های کلی به دست بیاید. پس از محاسبات به عدد 16,777,216 رنگ در کل دست پیدا خواهیم کرد. خب حالا اگر این مقدار عجیب و بزرگ را به 256 رنگ کاهش دهیم چه اتفاقی رخ می‌دهد؟ در این شرایط شما فقط 8 بیت را به کانال‌های RGB اختصاص می‌دهید و 2 بایت در هر پیکسل را صرفه‌جویی می‌کنید. این یعنی فقط با کاهش 4 بایت در هر پیکسل، به فشرده‌سازی 50 درصدی دست پیدا کردید!
اگر تصویر شما دارای مناظری با رنگ‌های تدریجی باشد، به Assetهایی 5 بیتی نیاز خواهید داشت. رنگ آسمان هنگام غروب را می‌توان مثالی از رنگ‌های تدریجی دانست. یعنی زمانی که رنگ به‌تدریج تغییر پیدا می‌کند، نیاز به پالت‌های رنگی بیشتری خواهید داشت. در صورتی که از پالت‌های رنگی کم استفاده کنید، تصویر شما حالت چهارخونه و مصنوعی پیدا خواهد کرد. از طرف دیگر اگر تصویر شما فقط از چند رنگ محدود استفاده می‌کند، استفاده از پالت رنگی بزرگ، اسراف بیت است!
در مرحله بعدی پس از آنکه داده‌های ذخیره‌شده در هر پیکسل را بهینه‌سازی کردید، باید کمی خلاق‌تر باشید و به پیکسل‌های اطراف نیز نگاهی بیاندازید. در بسیاری از تصاویر، پیکسل‌های اطراف آن دارای رنگ‌های مشابه هستند. به‌عنوان مثال در تصویر آسمان از جزئیات تکراری بسیاری استفاده می‌شود.
از این اطلاعات می‌توانید برای بهبود فشرده‌سازی خود استفاده کنید. برای این کار از Delta Encoding استفاده نمایید تا به جای آنکه هر یک مقدار در یک پیکسل ذخیره شود، تفاوت بین مقدار پیکسل‌های مجاور در یک پیکسل قرار بگیرد. به این ترتیب اگر پیکسل‌های کنار هم دارای اطلاعات رنگی یکسان باشند، دلتا صفر خواهد بود. به این ترتیب فقط 1 بیت ذخیره می‌کنید. شاید از نظر شما این روش فشرده‌سازی خیلی هوشمندانه باشد؛ اما چرا به این مرحله بسنده کنیم؟
چشم انسان به رنگ‌های مختلف، حساسیت متفاوتی نشان می‌دهد. شما می‌توانید با کاهش یا افزایش پالت برای رنگ‌های حساس، اینکدینگ رنگ‌های تصاویر خود را بهینه‌سازی کنید.
پیکسل‌های کنار هم، یک تصویر چهارخانه 2بعدی را تشکیل می‌دهند. این یعنی هر پیکسل دارای چند همسایه مختلف است. شما می‌توانید با کمک این روش، دلتا اینکدینگ خود را بیش از این هم ارتقاء دهید.
برای این کار به جای آنکه فقط به همسایه‌های کناری یک پیکسل نگاه کنید، می‌توانید کمی نگاه خود را عقب‌تر ببرید و به ترکیب پیکسل‌ها، به‌عنوان بلوک‌های بزرگ‌تر نگاه کنید. سپس هر بلوک را با شرایط مختلف اینکد کنید.
خب همان طور که مشاهده می‌کنید، بهینه‌سازی تصویر به سرعت پیچیده می‌شود. البته این به دیدگاه شما بستگی دارد. تصاویر حجم بسیاری را اشغال می‌کنند. به همین خاطر روش‌های متعددی برای فشرده‌سازی آن‌ها نیز مطرح می‌شود.
خب در نهایت باید گفت که تمامی این روش‌های عالی هستند؛ اما کاملاً تخصصی و آکادمیک به حساب می‌آیند. این روش‌ها تا چه حد به بهینه‌سازی تصاویر روی وبسایت شما کمک می‌کنند؟
خب برای پاسخ به این سؤال باید ابتدا نوع مشکل را درک کنید. تکنیک‌های مختلفی همانند RGBA Pixels، Bit-Depth و سایر روش‌های بهینه‌سازی برای این کار وجود دارند. برای آنکه درباره فرمت‌های مختلف تصاویر Raster بخوانید، باید تمامی این کانسپت‌ها را به‌خوبی درک کرده باشید.
تعریف فشرده‌سازی بدون اتلاف و فشرده‌سازی اتلافی تصاویر
در هنگام فشرده‌سازی برخی از انواع دیتا، همانند سورس کدهای یک صفحه یا فایل‌های کلیدی، هیچ یک از فایل‌های اورجینال نباید حذف بشوند. از دست رفتن بخشی از فایل اورجینال باعث می‌شود تا ماهیت فایل تغییر پیدا کند یا اینکه حتی آن فایل به‌صورت کلی از بین برود. در عین حال فقط بخشی از دیتا اورجینال فایل‌هایی همانند فایل صدا، تصویر و ویدئو نیز می‌تواند قابل قبول باشد.
در حقیقت با توجه به عملکرد چشم انسان، می‌توان برخی از دیتاها را نادیده گرفت. به‌عنوان مثال در فشرده‌سازی یک تصویر می‌توانید از این حقیقت کمک بگیرید که چشم انسان فقط به برخی از رنگ‌ها حساسیت دارد. این یعنی می‌توانید برخی رنگ‌ها را با تعداد بیت‌های کمتری encode کنید. به‌صورت کلی بهینه‌سازی یک تصویر شامل دو مرحله مختلف می‌شود:
- تصویر را با روش فشرده‌سازی اتلافی فشرده کنید. به این طریق داده‌های برخی از پیکسل‌ها از بین می‌رود
- تصویر را با روش فشرده‌سازی غیراتلاقی فشرده کنید. به این طریق دیتا پیکسل‌ها فشرده می‌شوند
استفاده از مرحله اول اختیاری است. از این الگوریتم بر اساس نوع فرمت عکس می‌توانید استفاده کنید. البته باید به یاد داشته باشید که با کمک فشرده‌سازی اتلافی، سایز هر نوع تصویری را می‌توان کاهش داد. در حقیقت تفاوت بین انواع مختلف فرمت تصویر همانند GIF، PNG، JPEG یا فرمت‌های دیگر، در استفاده از ترکیب انواع مختلف الگوریتم فشرده‌سازی اتلافی و غیراتلافی ایجاد می‌شود.
حالا به این سؤال باید پاسخ دهیم که بهترین پیکربندی برای بهینه‌سازی پیکربندی اتلافی و غیراتلافی چیست؟
پاسخ به این سؤال به محتوای تصویر شما بستگی دارد. همچنین خودتان باید تعادلی بین اندازه فایل و افت کیفیت حاصل از فشرده‌سازی اتلافی ایجاد کنید. در برخی مواقع برای آنکه جزئیات تصویر شما حفظ شود، از بهینه‌سازی اتلافی استفاده نمی‌کنید.
در برخی مواقع دیگر، برای کاهش سایز فایل Asset تصویری، از روش بهینه‌سازی اتلافی استفاده خواهید کرد. این مسئله فاقد یک الگوی همیشگی و جهانی است. در حقیقت شما باید بر اساس شرایط و محتوای صفحه خود، به این تصمیم‌گیری مهم دست پیدا کنید.
برای آنکه این مسئله را بهتر درک کنید، یک مثال کاربردی و ملموس برای شما می‌آوریم. وقتی که از یک فرمت اتلافی همانند JPEG استفاده می‌کنید، می‌توانید خودتان کیفیت نهایی عکس را تعیین کنید. زمانی که در فوتوشاپ تصویر را ذخیره می‌کنید، می‌توانید عددی بین 1 تا 100 را به‌عنوان کیفیت خروجی نهایی انتخاب نمایید.
انتخاب این عدد در حقیقت استراتژی اتلافی و غیراتلافی را مشخص می‌کند. هرچه عدد به‌سمت 1 نزدیک‌تر باشد، سایز عکس کاهش پیدا می‌کند و در نتیجه قسمتی از پیکسل‌های تصویر شما حذف می‌شود.
بالعکس هرچه عدد به‌سمت 100 نزدیک‌تر باشد، حجم عکس شما افزایش پیدا می‌کند و در عوض پیکسل‌های کمتری حذف می‌شوند. برای درک بهتر این موضوع، بهتر است اعداد مختلف را در این بخش انتخاب کنید و نتایج را کنار هم قرار دهید.
در نهایت متوجه خواهید شد که با کاهش این عدد، کیفیت تصویر از نظر بصری به‌صورت چشم‌گیر کاهش پیدا نمی‌کند؛ اما اندازه آن به‌مراتب کوچک می‌شود.
نکته
توجه داشته باشید که کیفیت نهایی تصویر با الگوریتم‌های بهینه‌سازی مختلفی که برای encode کردن آن استفاده شده است ارتباط مستقیم ندارد. به‌عنوان مثال کیفیت 90 فرمت JPEG از نظر کیفیت تفاوت بسیاری با کیفیت 90 فرمت WebP دارد. در حقیقت حتی اگر سطح انتخابی کیفیت شما یکسان باشد، خروجی فایل شما بر اساس فرمت تصویر، کیفیت بسیار متفاوتی خواهد داشت!
بیشتر بخوانید: هزینه خدمات سئو در منتوریکس چقدر است؟
چک لیست بهینه‌سازی تصویر
در قسمت آخر قصد داریم تا یک سری نکته و تکنیک را به‌صورت چک لیست در زمینه بهینه‌سازی تصویر به شما ارائه دهیم:
- بیشتر از فرمت وکتورها استفاده کنید. وکتورها به رزولوشن و مقدار بزرگ‌نمایی وابستگی ندارند. همین مسئله باعث می‌شود تا فرمت وکتور برای استفاده در دستگاه‌های مختلف و رزولوشن‌های متفاوت عملکرد مطلوبی را از خود نشان دهد.
- Assetهای SVG را تا حد امکان کاهش دهید و فشرده کنید. مارک‌های XLM ساخته شده توسط اکثر اپلیکیشن‌های طراحی، شامل متادیتاهایی غیرضروری بسیاری هستند. این متادیتاهای غیرضروری را می‌توان حذف کرد تا حجم SVG را کاهش داد. در نهایت از این بابت اطمینان حاصل کنید که سرور شما برای اعمال الگوریتم فشرده‌سازی GZIP بر روی Assetهای SVG پیکربندی شده باشد.
- بیشتر از فرمت WebP به جای فرمت‌های قدیمی استفاده نمایید. تصاویر WebP به‌مراتب اندازه کمتری در مقایسه با سایر فرمت‌های تصویری دارند.
- بهترین فرمت تصاویر Raster را انتخاب کنید. حتماً بر اساس نیاز پیج خود، از بهترین فرمت Raster استفاده کنید.
- تنظیمات کیفیت تصاویر Raster را به‌صورت آزمون و خطا تغییر دهید. شما می‌توانید مقدار کیفیت تصاویر Raster را از 1 تا 100 به‌صورت آزمون و خطا انتخاب کنید. به این ترتیب می‌توانید متوجه شوید که کدام کیفیت با حداقل حجم برای صفحه وبسایت شما مناسب است.
- متادیتاهای غیرضروری را از روی تصاویر خود حذف کنید. بسیاری از تصاویر Raster شامل متادیتاهای غیرضروری بسیاری هستند. به‌عنوان مثال در زمینه این Asset، انواع اطلاعات دوربین عکاسی، اطلاعات موقعیت جغرافیایی بر روی تصویر Raster ثبت می‌شوند. از ابزارهای مخصوص برای پاک‌کردن این اطلاعات غیرضروری استفاده کنید.
- حتماً اندازه تصاویر را تغییر دهید. اندازه تصاویر را به حدی تغییر دهید تا اینکه نزدیک به اندازه طبیعی خود باشد. مراقب تصاویر بزرگ باشید. این تصاویر حجم بسیاری را به خود اختصاص می‌دهند. پس حتماً آن‌ها را باید تغییر سایز دهید.
- از ابزارهای خودکار استفاده کنید. حتماً از ابزارهای خودکاری استفاده کنید که می‌توانند بدون نیاز به دستورات شما، تصاویر را به‌صورت خودکار بهینه‌سازی کنند.
بهینه‌سازی حجم تصویر از عواملی‌ست که بر سرعت سایت و تجربه‌ی کاربری اثر می‌گذارد. این معیار از جمله عواملی‌ست که در امتیاز core web vitals سایت‌ها موثر است؛ امتیازی که به‌تازگی برای سئو سایت اهمیت زیادی پیدا کرده است. پس مطمئن شوید که عکس‌های‌تان حجم بهینه‌ای دارند و مدام این موضوع را بررسی کنید.
این مطلب توسط اعضای تیم منتوریکس تهیه و گردآوری شده است.
انتشار مطالب فوق تنها با ذکر مرجع به همراه لینک وبسایت منتوریکس مجاز می‌باشد.
لطفا به حقوق هم احترام بگذاریم.