معمولا تصاویر به عنوان بیشترین مواردی که از صفحات وب دانلود میشوند شناخته می شوند و حجم زیادی از فضای حافظه را پر میکنند.
در نتیجه بهینه سازی تصاویر میتواند باعث جلوگیری از اشغال حجم زیاد حافظه و بهبود سایت شما شود. هرچه مرورگر بایت کمتری از سایت دانلود کند کاربر حجم کمتری از پهنای باند خود را استفاده کرده و محتوای ارزشمند سایت نیز سریعتر رندر و بارگذاری میشود.
بهینه سازی تصویر، هم هنر است و هم دانش: هنر است چون هیچ شیوه خاصی برای بهینه سازی هر چه بهتر یک تصویر خاص وجود ندارد و دانش است چون تکنیکها و الگوریتمهای متنوعی برای کاهش چشمگیر حجم تصویر توسعه داده شدهاند. یافتن بهترین شیوه برای تنظیم بهینه سازی تصویر نیاز به آنالیز دقیق مواردی مانند قابلیتهای یک فرمت، محتوای داده انکود شده، کیفیت، ابعاد پیکسلها، و موارد دیگر را دارد.
از بین بردن و جایگزینی تصاویر
اولین سوالی که باید از خودتان بپرسید این است که آیا تصویر نیاز به افکت در نظر گرفته شده دارد یا نه. طراحی خوب دارای سادگی است و ساده بودن همیشه بهترین عملکرد را دارد. اگر بتوانید تاحدودی از کد منبع تصویر بکاهید که معمولا نیاز به حجم زیادی از داده مرتبط با 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 استفاده میکنید، فشرده ساز معمولاً برای این فرمت تنظیمات قابل تغییری مانند کیفیت در اختیار شما قرار میدهد مثلا نوار لغزانی که توسط فتوشاپ برای تنظیم کیفیت تصویر در نظر گرفته شده است که در قسمت ذخیره برای وب قرار دارد، معمولاً عددی از یک تا صد است تا میزان عملکرد الگوریتم های لوزلی و لوزلس را با آن کنترل کنید.
ارسال دیدگاه
(0) نظر