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

معمولا تصاویر به عنوان بیشترین مواردی که از صفحات وب دانلود می­شوند شناخته می شوند و حجم زیادی از فضای حافظه را پر می­کنند.

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

بهینه سازی تصویر، هم هنر است و هم دانش: هنر است چون هیچ شیوه خاصی برای بهینه سازی هر چه بهتر یک تصویر خاص وجود ندارد و دانش است چون تکنیک­ها و الگوریتم­های متنوعی برای کاهش چشمگیر حجم تصویر توسعه داده شده­اند. یافتن بهترین شیوه برای تنظیم بهینه سازی تصویر نیاز به آنالیز دقیق مواردی مانند قابلیت­های یک فرمت، محتوای داده انکود شده، کیفیت، ابعاد پیکسل­ها، و موارد دیگر را دارد.

از بین بردن و جایگزینی تصاویر

اولین سوالی که باید از خودتان بپرسید این است که آیا تصویر نیاز به افکت در نظر گرفته شده دارد یا نه. طراحی خوب دارای سادگی است و ساده بودن همیشه بهترین عملکرد را دارد. اگر بتوانید تاحدودی از کد منبع تصویر بکاهید که معمولا نیاز به حجم زیادی از داده مرتبط با HTML، CSS، Javascript و دیگر موارد یک صفحه وب را دارد، این شیوه یکی از بهترین استراتژی­های بهینه سازی است. یادتان باشد که یک تصویر خوب می­تواند بهتر از هزاران واژه مفهوم را انتقال دهد.

فونت‌های تحت وب، امکان استفاده از فونت­های زیبا و توانایی انتخاب، جست و جو و تغییر اندازه متن که یک ویژگی مهم برای بهبود بخشی چشمگیر در بهینه سازی تصویر است را به دست  می دهد.

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

تصاویر وکتور در برابر تصاویر راستر

تصاویر وکتور برای تصاویری که شامل اشکال ژئومتریک می­شوند بهتر است چون دارای قابلیت بزرگنمایی­اند و به رزولوشن وابسته نیستند.

تصاویر راستر باید برای موارد پیچیده که دارای اشکال غیر معمول و جزئیات است بکار روند.

 بعد از آنکه تصویر برای ایجاد افکت بهینه را مشخص کردید نوبت انتخاب فرمت مناسب است:

بزرگنمایی یک تصویر وکتور

گرافیک­های وکتور: از خط ها، نقاط و چند ضلعی­ها برای ایجاد تصویر استفاده می­کند.

گرافیک­های راستر: با استفاده از انکود کردن مقادیر هر پیکسل، در یک جدول مستطیلی شکل ایجاد می­شود.

هر کدام از این دو شیوه خوبی­ها و بدی­های خود را دارد. فرمت­های وکتور برای تصاویر دارای اشکال هندسی مانند لوگوها، متن، ایکون­ها مناسب هستند و نتایجی دقیق در هر رزولوشن و هر بزرگنمایی ایجاد می­کنند که آنها را تبدیل به موردی مناسب برای صفحه نمایش با رزولوشن بالا و مواردی که نیاز است تا تصاویر در سایزهای مختلف نمایش داده شوند می­کند .

هر چند هنگامی که حرف پیچیدگی، مثلا یه عکس، به میان می­آید فرمت­های وکتور ناتوانند، حجم نشانه گذاری SVG که استفاده می­شود بسیار زیاد است و البته همچنان امکان دارد آن تصویرِ واقع گرایانه­ی مورد نظر را به عنوان خروجی ندهد. در این موارد است که باید از فرمت­های تصویری راستر مانند GIF,PNG, JEPG  یا از فرمت­های جدیدتری مانند JPEG-XR و WebP استفاده کرد.

تصاویر راستر در حالت تغییر رزولوشن و بزرگنمایی، آن ویژگیهای زیبایی که در وکتور وجود دارد را ندارند اگر بر روی این تصاویر بزرگنمایی انجام دهید تصویر کمی تار و به هم ریخته می­شود. در نتیجه ممکن است نیاز به گرفتن خروجی­های متفاوت از تصویر داشته باشید تا خروجی بهینه­ی مورد نظرتان را ایجاد کنید.

توضیحاتی درباره نمایشگرهای رزولوشن بالا

نمایشگرهای رزولوشن بالا به ازای هرپیکسل سی اس اس دارای چندین پیکسل دستگاهی (سخت افزاری) هستند. تصاویر دارای رزولوشن بالا نیازمند پیکسل­های بیشتر و بایت بیشتری هستند همچنین شیوه­های بهینه سازی مستقل از رزولوشن هستند.

زمانی که در مورد پیکسل­های تصویر صحبت می­کنیم باید بین انواع پیکسل­ها تفاوت قائل شویم:

پیکسل­های سی اس اسی و پیکسل­های دستگاهی: هر یک پیکسل سی اس اس ممکن است شامل چندین پیکسل دستگاهی شود به عنوان مثال یک پیکسل سی اس اسی ممکن است با یک پیکسل دستگاهی مستقیما در ارتباط باشد. هدف بیان این مطالب چیست؟ هر چه تعداد پیکسل­های دستگاهی بیشتری وجود داشته باشد کیفیت تصویر بالاتری نیز نمایش داده می­شود.

نمایشگرهای با وضوح بالا نتایج بسیار زیبایی ارائه می دهند اما در اینجا یک نکته وجود دارد؛ اینکه تصاویر مورد نظر ما نیاز به جزئیات بیشتری دارند تا بتوانند از قابلیت­های تعداد پیکسل­های دستگاهی بیشتری استفاده کنند، خبر خوب این است که تصاویر وکتور برای چنین کاربردی ایجاد شدند چنانکه می­توان آنها را با هر رزولوشنی با دقت زیاد رندر کرد. ممکن است نیاز به پردازش بیشتری برای ایجاد جزئیات داشته باشیم اما در لایه زیرین همان عدم وابستگی به رزولوشن وجود دارد.

از طرف دیگر تصاویر راستر چالش بیشتری را می­طلبند زیرا آنها داده­های تصویر را در هر واحد پیکسل دستگاهی انکد می­کنند در نتیجه هر چه تعداد شمار پیکسل­ها بیشتر باشد سایز فایل تصویر راستر نیز بیشتر می‌شود به عنوان مثال تفاوت­های بین تصویر نشان داده شده پیکسل­های css  در اندازه ۱۰۰ در ۱۰۰ را در جدول زیر مشاهده کنیم زمانی که رزولوشن تصویر فیزیکی مان را دو برابر کنیم مجموع تعداد پیکسل­ها با فاکتور چهار افزایش می­یابد. دو برابر شدن پیکسل­های افقی ضربدر دو برابر پیکسل­های عمودی. از این رو یک تصویر در اندازه دو ایکس نه تنها دو برابر می­شود بلکه تعداد پیکسل­های مورد نیاز را ۴ برابر می‌کند.

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

بهینه سازی تصاویر وکتور

تصاویر‏svg  نوعی از تصاویر بر پایه فرمت xml می­باشند و فایل­های اس وی جی باید کوچک سازی شوند تا حجم آن ها کاهش یابد بنابراین فایل های اس وی جی باید با جی زیپ فشرده سازی شوند

تمامی مرورگرهای مدرن از گرافیک­های وکتوری قابل انعطاف یا همان‏svg  بهره می­برند که بر پایه تصاویری با فرمت xml می­باشد، این مورد برای تصاویر گرافیکی با دو بعد به کار می­رود.

ما می­توانیم نشانه گذاری­های اس وی جی را در کدهای یک صفحه وب جا دهیم یا آنکه آنها را به صورت فایل­های منبع خارجی استفاده کنیم. فایل­های اس وی جی می­تواند توسط بیشتر نرم افزارهای طراحی پایه وکتور یا مستقیماً توسط خودتان در ویرایشگر متنی مورد علاقه تان نوشته و ساخته شود.

مثال بالا یک دایره ساده همراه با خط خارجی مشکی رنگ و زمینه قرمز را ایجاد می­کند که از خروجی نرم افزار Adobe illustrator به دست آمده است، چنان که می­توان گفت این تصویر حاوی متا دیتا­های بسیار زیاد است مانند اطلاعات لایه کامنت­ها و نام­های فضای xml که معمولاً برای رندر گرفتن تصاویر مرورگر ضروری نیستند در نتیجه همیشه این ایده خوب است که حجم تصاویر اس پی جی را توسط نرم‌افزارهایی مانند svgo پایین بیاوریم.

این نرم افزار سایز تصویر ساخته شده با ایلوستریتور را تا حد ۵۸ درصد کاهش می­دهد که حجم آن را از ۴۷۰ به ۱۹۹ بایت می­رساند و از آنجایی که اس وی جی، یک فایل بر پایه فرمت xml می­باشد، می­توانیم از فشرده سازهایی مانند جی زیپ استفاده کنیم تا حجم فایلی که میخواهیم انتقال دهیم را کاهش دهیم. برای این کار باید مطمئن باشید که سرور شما برای فشرده سازی فایل های اس وی جی تنظیم شده باشد.

بهینه سازی تصاویر راستر

تصویر راستر شامل شبکه‌ای از پیکسل­ها می­باشد که در آن هر پیکسل اطلاعات رنگ و شفافیت را انکد می­کند.

یک تصویر راستر به زبان ساده شبکه دو بعدی از پیکسل­ها می­باشد. برای مثال یک تصویر دارای پیکسل­های صد در صد دنباله­ای از ۱۰ هزار پیکسل در خود دارد در نتیجه هر پیکسل مقدارRGBA   داراست که در اینجا R ‏مخفف کانال قرمز، G به معنی کانال سبز، B معنی کانال آبی و A به معنی آلفا یا شفافیت می­باشد.

 مرورگر ها در داخل خود ۲۵۶ بیت را برای هر کانال در نظر می‌گیرند که به عبارت دیگر ۸ بیت به ازای هر کانال و چهار بایت به ازای هر پیکسل است. در نتیجه اگر ما ابعاد شبکه را بدانیم می­توانیم اندازه فایل را به سادگی محاسبه کنیم.

مقدار حجم ۳۹ کیلوبایت برای یک تصویر دارای پیکسل ۱۰۰ در ۱۰۰ به نظر مقدار زیادی نیست اما این اندازه، برای تصاویر بزرگتر به سرعت افزایش می­یابد و همین موضوع باعث کاهش سرعت در دانلود عکس­ها و گران شدن هزینه دانلود می­شود خوشبختانه آنچه که در این پاراگراف بیان کردیم در مورد تصویری بود که فشرده سازی نشده، حال ما چگونه می­توانیم اندازه فایل این تصویر را کاهش دهیم؟

یک استراتژی ساده می تواند کاهش بیت عمیق در یک تصویر از ۸ بیت بر کانال به مقدار پلت (Palet) رنگ کمتری باشد. ۸ بیت در کانال به ما مقدار ۲۵۶ بیت بر هر کانال و در مجموع مقدار ۲۵۶ بتوان ۳ سطح رنگ را می­دهد، چه می­شود اگر ما مقدار پلت را به ۲۵۶ رنگ کاهش دهیم در نتیجه­ی این کار، ما فقط نیاز به ۸ بیت در مجموع، برای کانال­هایRGB  داریم و به ازای هر پیکسل، دو بار سریعا ذخیره می­شود در نتیجه ۵۰% از تصویر اصلی ما که حاوی چهار بایت بر پیکسل بود فشرده و  ذخیره می­شود.

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

به عنوان مثال آسمان دارای رنگ های تکراری است با استفاده از این اطلاعات ما می­توانیم با شیوه دلتا کدینگ فشرده سازی را انجام بدهیم و به جای آنکه مقادیر خاصی را به ازای هر پیکسل ذخیره کنیم می­توانیم اختلاف بین پیکسل­های نزدیک به هم را ذخیره کنیم اگر پیکسل­های مجاور یکی بودند مقدار دلتا صفر خواهد شد و ما فقط نیاز به ذخیره یک تک بیت داریم.

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

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

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

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

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

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

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

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

 مرحله 1: تصاویری که با استفاده از فیلترهای لوزلی فیلتر شده باشد که در این حالت بعضی از اطلاعات هر پیکسل از بین می­برد.

مرحله 2: تصاویری که با استفاده از فیلتر لوزلس فیلتر شده باشد که اطلاعات هر پیکسل را فشرده سازی می­کند.

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

بنابراین تنظیمات بهینه برای بهینه سازی لوزی و لوزلس چیست؟ در برخی موارد ممکن است که شما از بهینه سازی لوزلی استفاده نکنید تا بتوانید تمامی جزئیات مربوط به یک تصویر را نگاه دارید، در برابر در برخی موارد ممکن است نیاز به استفاده از بهینه سازی سنگین لوزلی داشته باشید تا سایز تصویر خود را به حداقل ممکن کاهش دهید اینجا جایی است که تصمیم شما و محتوایی که مورد نیازتان است نقش مهمی را بازی می­کند اما در کل هیچ شیوه کلی برای این مسئله وجود ندارد.

به عنوان مثال زمانی که شما از یک فرمت لوزلی مانند JPEG استفاده می­کنید، فشرده ساز معمولاً برای این فرمت تنظیمات قابل تغییری مانند کیفیت در اختیار شما قرار می­دهد مثلا نوار لغزانی که توسط فتوشاپ برای تنظیم کیفیت تصویر در نظر گرفته شده است که در قسمت ذخیره برای وب قرار دارد، معمولاً عددی از یک تا صد است تا میزان عملکرد الگوریتم های لوزلی و لوزلس را با آن کنترل کنید.