بهینه سازی عکس

تصاویر معمولاً بیشترین بایت دانلود شده بر روی یک صفحه‌ی وب را تشکیل میدهند  و اغلب فضای بصری قابل‌توجه ای را اشغال می‌کنند. درنتیجه بهینه‌سازی تصاویر می‌تواند در بیشتر مواقع منجر به صرفه‌جویی بیشتر بایت‌ها و بهبود عملکرد وب‌سایت شما شود ( بایت‌های کمتری که مرورگر مجبور به دانلود آنها باشد برابر است با تقلای کمتری در پهنای باند سرویس‌گیرنده ( client )  ) و مرورگر می‌تواند محتوی ی مفید بر روی صفحه را سریع‌تر دانلود و رندر( render ) کند.

بهینه‌سازی تصویر هم یک هنر و هم یک علم است: یک هنر زیرا هیچ جواب قطعی‌ای برای چگونگی فشرده‌سازی بهتر یک تصویر تکی وجود ندارد، و یک علم زیرا تکنیک‌ها و الگوریتم‌های بسیار پیشرفته‌ای وجود دارد که می‌تواند به شکل قابل‌توجه ای اندازه‌ی تصویر را کاهش دهد. پیدا کردن تنظیمات بهینه برای تصویرتان نیازمند تحلیل با دقت به همراه بسیاری از ابعاد دیگر است: ظرفیت‌های قالب ( format ) ، محتوی داده‌های کدگذاری شده، کیفیت، ابعاد پیکسل و غیره.

حذف و جایگزینی تصاویر

– حذف منابع تصویری غیرضروری

– به‌کارگیری از جلوه‌های CSS3 در صورت امکان

– استفاده از فونت وب به‌جای کدگذاری تصویر در متن

اولین سؤالی که شما باید از خودتان بپرسید این است که آیا یک تصویر هدفی که شما به دنبال آن هستید را منتقل می‌کند. یک طراحی خوب ساده است و همیشه منتهی به بهترین عملکرد می‌شود. اگر شما بتوانید منابعیک تصویر را حذف کنید – که این کار اغلب نیازمند به بکارگیری تعداد زیادی از بایت‌های مرتبط با HTML، CSS، جاوا اسکریپت و دیگر ابزار روی صفحه است – این راهبرد بهترین راهبرد بهینه‌سازی است. به‌قول‌ معروف تصویری که در جای مناسب استفاده شود می‌تواند بیش از هزار کلمه سخن بگوید، بنابراین ایجاد توازن بر عهده‌ی شماست.

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

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

تصاویر Vector در مقابل تصاویر Raster

– تصاویر vector برای تصاویری که دارای اشکال هندسی هستند ایدئال است.
– vector ها از زوم و رزولوشن بسیار بالای برخوردار است .
– تصاویر Raster باید برای صحنه‌های پیچیده با جزئیات و شکل‌های بسیار استفاده شود.

هنگامی‌ که یک تصویر یا درواقع فرمت بهینه را انتخاب کردید ، انتخاب مهم بعدی قالب مناسب است.

• وکتورها از خطوط، نقاط و چندضلعی‌ها برای نشان دادن تصویر استفاده می‌کنند.
• تصاویر Raster  را از طریق کدگذاری مقادیر تکی هر پیکسل درون یک شبکه‌ی مربعی نشان داده می شود .

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

با این‌ حال تصاویر وکتور در هنگامی‌که صحنه پیچیده است (مانند یک عکس) ناکارآمد هستند . مقدار نشانه‌گذاری SVG برای شرح تمامی شکل‌ها می‌تواند حجم بالایی پیدا کند و خروجی ممکن است «به واقعیت عکس» درنیاید. در این موارد شما باید از یک قالب تصویر Raster مانند GIF، PNG، JPEG یا یکی از قالب‌های جدیدتر مانند JPEG-XR و WebP استفاده کنید.

تصاویر Raster خصوصیت های  خوبی مشابه ای Vector ها  مانند  بزرگنمایی و تفکیک‌پذیری ندارند – هنگامی‌ که شما یک تصویر Raster را بزرگنمایی می‌کنید، شما گرافیک‌های دندانه‌دار و تار می‌بینید. درنتیجه شما نیاز به چند نسخه از یک تصویر راستر در تفکیک‌پذیری‌ های مختلف خواهید داشت تا تجربه‌ای بهینه ای به کاربرها منتقل کنید.

مزایای صفحات دارای رزولوشن بالا

– صفحات دارای رزولوشن بالا دارای چندین پیکسل دستگاهی به ازای هر پیکسل CSS دارند.

– تصاویر دارای رزولوشن بالا نیازمند تعداد بالاتری از پیکسل و بایت هستند.

– تکنیک‌های بهینه‌سازی تصویر بدون توجه به رزولوشن یکسان هستند.

هنگامی‌که ما از پیکسل‌های تصویر صحبت می‌کنیم، ما نیاز به ایجاد تمایز بین انواع پیکسل‌ها داریم ( پیکسل‌های CSS و پیکسل‌های دستگاه ). یک پیکسل CSS تکی ممکن است حاوی چندین پیکسل دستگاه باشد . برای مثال یک پیکسل CSS تکی ممکن است برابر یک پیکسل تکی دستگاه باشد، یا اینکه توسط چندین پیکسل دستگاه پشتیبانی شود. نتیجه چیست؟ خب هرچه تعداد پیکسل‌های دستگاه بیشتر باشد، جزئیات بهتری از محتوی نمایش داده‌شده در صفحه‌نمایش داده می‌شود.

صفحه‌های دارای DPI بالا (HiDPI) نتایج زیبایی را تولید می‌کنند، ولی نیازمند یک‌چیز واضح هستندکه تصاویر ما باید دارای جزئیات بیشتری باشد تا این صفحات از تعداد پیکسل‌های بیشتر در دستگاه بهره ببرند. خبر خوب این است که وکتور ها برای این کار ایدئال هستند، زیرا می‌توانند در هر تفکیک‌پذیری‌ ای با نتایجی تروتمیز به نمایش در آید .

از سوی دیگر تصاویر Raster چالش بسیار بزرگ‌تری ایجاد می‌کنند، زیرا آنها داده‌های تصویر را بر اساس هر پیکسل کدگذاری می‌کنند. ازاین‌رو هرچه تعداد پیکسل‌ها بیشتر باشد، اندازه‌ی فایل یک تصویر Raster نیز بیشتر است. به‌عنوان‌مثال بیاید تفاوت بین یک محتوی تصویری نشان داده‌شده در ۱۰۰×۱۰۰ پیکسل (CSS) را نگاه کنیم.

هنگامی‌که ما زوم صفحه‌ی فیزیکی را دو برابر می‌کنیم، تعداد کل پیکسل‌ها با ضریب ۴ افزایش پیدا می‌کن( تعداد پیکسل‌های افقی و عمودی افزایش پیدا می‌کند) درنتیجه صفحه‌ی «۲x» تعداد پیکسل‌های موردنیاز را نه‌تنها دو برابر، بلکه چهار برابر می‌کند!

خب این در عمل به چه معناست؟ صفحه‌نمایش‌های دارای زوم پذیری بالا ، ما را قادر به نمایش تصاویر زیبا می‌کنند، که می‌تواند یک ویژگی عالی از یک  محصول باشد. ولی صفحات دارای زوم پذیری بالا نیز نیاز به تصاویر دارای زوم پذیری نیز دارد: ترجیح در صورت امکان از تصاویر وکتور  استفاده کنید زیرا زوم پذیری بالایی دارند  و همیشه نتایج تروتمیزی را ارائه می‌کنند ، ولی اگر نیاز به تصویر Raster داریم، چندین نسخه از هر تصویر با کمک srcset  ارائه و بهینه‌سازی می‌کنیم.

بهینه‌سازی تصاویر وکتور(Vector)

– SVG یک قالب تصویر مبتنی بر XML است.

– فایل‌های SVG باید حداقلی شوند تا اندازه‌شان کاهش یابد.

– فایل‌های SVG باید با GZIP فشرده شوند .

تمامی مرورگرهای جدید گرافیک‌های برداری مقیاس‌پذیر(SVG) را که یک قالب تصویر گرافیکی دوبعدی مبتنی بر XML است را پشتیبانی می‌کنند: ما می‌توانیم نشانه‌گذاری SVG را به‌صورت مستقیم یا به شکل یک منبع خارجی جاسازی کنیم. یک فایل SVG به‌نوبه‌ی خود می‌تواند توسط اکثر نرم‌افزارهای طراحی مبتنی بر بردار یا به‌صورت دستی و مستقیم از طریق ویرایشگر متن دلخواهتان ایجاد شود.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
   x="0px" y="0px" viewBox="0 0 612 792" xml:space="preserve">
<g id="XMLID_1_">
  <g>
    <circle fill="red" stroke="black" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/>
  </g>
</g>
</svg>

مثال بالا یک شکل دایره‌ی ساده با خطوط خارجی سیاه و پشت زمینه‌ی قرمز را  نمایش و آن را از ادابی ایلوستریتور صادر می‌کند. همان‌طور که حدس می‌زنید، این کد دارای قراداده‌ی زیادی مانند اطلاعات لایه، نظرات و فضای نام‌های XML است که اغلب برای رندر محتوی درون مرورگر غیر الزامی هستند. درنتیجه پیشنهاد می‌شود که برای حداقل سازی فایل‌های SVG را از طریق ابزاری مانند svgo انجام دهید.

دراین‌ ارتباط  svgo اندازه‌ی فایل SVG تولیدشده توسط ایلوستریتور را تا ۵۸% کاهش می‌دهد و آن را از ۴۷۰ به ۱۹۹ بایت می‌رساند. همچنین به دلیل اینکه SVG یک قالب مبتنی بر XML است، ما می‌توانیم فشرده‌سازی GZIP را برای کاهش اندازه‌ی انتقال اعمال کنیم – مطمئن شوید که سایت شما برای فشرده‌سازی محتوی SVG تنظیم‌ شده است!

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

– یک تصویر Raster شبکه‌ای از پیکسل‌ها است.

– هر پیکسل اطلاعات رنگ و شفافیت را کدگذاری می‌کند.

– فشرده‌ساز تصویر ، از تکنیک‌های گوناگونی برای کاهش تعداد بیت‌های موردنیاز به ازای هر پیکسل به‌منظور کاهش اندازه‌ی فایل تصویر استفاده می‌کند.

هر تصویر Raster یک شبکه‌ی ۲ بعدی از «پیکسل‌های» تکی است – برای مثال یک تصویر ۱۰۰×۱۰۰ پیکسل دنباله‌ای از ۱۰۰۰۰ پیکسل است. هر پیکسل به‌نوبه‌ی خود مقادیر «RGBA» را ذخیره می‌کند: R کانال قرمز، G کانال سبز، B کانال آبی، و A کانال آلفا (شفافیت) است.

به‌صورت داخلی ، مرورگر مقادیر ۲۵۶ (درجه رنگ) را برای هر کانال اختصاص می‌دهد که ۸ بیت را به ازای هر کانال (۲ ^ ۸ = ۲۵۶) و ۴ بایت به ازای هر پیکسل (۴ کانال × ۸ بیت = ۳۲ بیت = ۴ بایت) ترجمه می‌شود. درنتیجه اگر ما ابعاد شبکه را بدانیم به‌راحتی می‌توانیم اندازه‌ی فایل را محاسبه کنیم:

• تصویر ۱۰۰×۱۰۰ px از ۱۰۰۰۰ پیکسل تشکیل‌شده است
• ۱۰۰۰۰ پیکسل × ۴ بایت = ۴۰۰۰۰ بایت
• ۴۰۰۰۰ بایت / ۱۰۲۴ = ۳۹ کیلوبایت

توجه: از سویی دیگر صرف‌نظر از قالب تصویر استفاده‌شده برای انتقال داده از سرویس‌دهنده به سرویس‌گیرنده، هنگامی‌که یک تصویر توسط مرورگر کدگذاری می‌شود، هر پیکسل همیشه ۴ بایت از حافظه را اشغال می‌کند. این مسئله می‌تواند محدودیت مهمی برای تصاویر بزرگ و دستگاه‌هایی باشد که حافظه‌ی در دسترس زیادی ندارند – مثل دستگاه‌های سیار دارای حافظه‌ی کم.

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

یک راهبرد ساده کاهش «عمق بیت» تصویر از ۸ بیت به ازای هر کانال به جدول رنگ کوچک‌تری است: ۸ بیت به ازای هر بیت به ما ۲۵۶ مقدار  ، به ازای هر کانال و ۱۶۷۷۷۲۱۶ (۲۵۶۳) رنگ در کل به ما می‌دهد. حال اگر ما جدول رنگ را به ۲۵۶ رنگ کاهش دهیم چه اتفاقی میفتد؟ آن موقع ما تنها به ۸ بیت برای کانال‌های RGB نیاز داریم و بلافاصله دو بایت برای هر پیکسل صرفه‌جویی کردیم – این یعنی ۵۰% فشرده‌سازی بیشتر نسبت به قالب اصلی‌ای که هر پیکسل ۴ بایت لازم داشت!

توجه: چپ به راست (PNG): 32 بیت (۱۶ میلیون رنگ)، ۷ بیت (۱۲۸ رنگ)، ۵ بیت (۳۲ رنگ). صحنه‌های پیچیده با تغییر رنگ تدریجی (گرادیانت ها، آسمان و غیره) نیازمند جدول رنگ بزرگ‌تری است تا اثرات بصری‌ ای مانند آسمان پیکسل پیکسل نشده تا مانند عکس سمت راست عکس بی کیفیت به دست نیاید . از سویی دیگر اگر در تصویر تنها از چندرنگ استفاده کنیم ، آنگاه در یک جدول رنگ بزرگ تنها بیت‌های باارزش را هدر می‌دهد!

پس‌ از آن هنگامی‌ که ما داده‌های ذخیره‌شده در هر پیکسل را بهینه‌سازی کردیم، می‌توانیم بیشتر زرنگی کنیم و به پیکسل‌های نزدیک نیز نگاهی بیندازیم: معمول شده است که بسیاری از تصاویر – مخصوصاً عکس‌ها – دارای پیکسل‌های نزدیک بارنگ‌های مشابه ای هستند – مثل آسمان، الگو های تکرارشونده ( textures ) و غیره. با بهره‌ برداری از این اطلاعات فشرده‌ ساز می‌توان « Delta encoding » را اعمال کرد که به‌جای ذخیره کردن مقادیر تکی برای هر پیکسل، ما می‌توانیم تفاوت بین پیکسل‌ها را ذخیره کنیم ( اگر پیکسل‌های مجاور یکسان بودند، آنگاه دلتا «صفر» است و نیاز به ذخیره‌ی ۱ بیت دارد! ولی چرا همین‌جا بس نکنیم …)

چشم انسان دارای سطوح متفاوتی است که به رنگ ها متفاوت حساس است . ما می‌توانیم کدگذاری رنگمان را بهینه‌سازی کنیم. پیکسل‌های «نزدیک» یک شبکه‌ی دوبعدی را تشکیل می‌دهند، این بدین معنی است که هر پیکسل دارای چندین همسایه است . ما می‌توانیم از این نکته استفاده کنیم تا کدگذاری دلتا را بهبود بخشیم. به‌جای نگاه کردن به تنها همسایه‌های کناری هر پیکسل، ما می‌توانیم به بلاک‌های بزرگ‌تری از پیکسل‌های نزدیک نگاه کنیم و بلاک‌های متفاوت را با تنظیمات متفاوت کدگذاری کند. و همین‌طور ادامه میابد…

همان‌طور که حدس می‌زنید، بهینه‌سازی تصاویر به‌ سرعت پیچیده (یا جالب، که بستگی به طرز فکر شما دارد) می‌شود، و این حوزه یک حوزه‌ی فعال پژوهش‌های علمی و تجاری است. تصاویر بایت‌های زیادی مصرف می‌کنند و توسعه‌ی یک تکنیک فشرده‌سازی تصویر  ارزش زیادی دارد! اگر شما دوست دارید که بیشتر بدانید، سری به صفحه‌ی ویکی‌پدیا یا گزارش تکنیک‌های فشرده‌سازی WebP بزنید تا با مثال‌های عملی آشنا شوید.

خب همه‌ی این‌ها هم خیلی عالی هستند هم خیلی علمی ، اما چطور این‌ها در بهینه‌سازی تصاویر صفحاتمان به ما کمک می‌کنند؟ خب ما قطعاً در موقعیتی نیستیم که با تکنیک‌های فشرده‌سازی جدید کارکنیم، ولی درک شکل مسئله مهم است: پیکسل‌های RGBA، عمق بیت و تکنیک‌های بهینه‌سازی مختلف. تمامی این مفاهیم برای درک مسئله بسیار مهم هستند و باید قبل از شروع بحث قالب‌های مختلف تصاویر Raster را بدانیم.

فشرده‌سازی تصویر بدون اتلاف و پراتلاف

– به دلیل شیوه‌ای که چشم ما کار می‌کند، تصاویر پراتلاف کاندیدهای بهتری برای فشرده‌سازی هستند .

–  بهینه‌سازی تصاویر ،  تابعی از فشرده‌سازی پراتلاف و بدون اتلاف است .

– تفاوت‌های درون قالب‌های تصویر به دلیل تفاوت در چگونگی و انتخاب الگوریتم‌های فشرده‌سازی پراتلاف و بدون اتلاف برای بهینه‌سازی تصویر است .

– هیچ  قالب مشخصی برای «تنظیمات کیفیت»  برای تمامی تصاویر وجود ندارد ( هر ترکیب فشرده‌ساز با تصویر ای مشخص ، نتیجه‌ای منحصر به‌ فردی تولید می‌کند.

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

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

1. تصویر که با یک فیلتر و یا یک اکشن «با اتلاف» پردازش شود ، برخی از داده‌های پیکسل را از بین می‌برد.
2. تصویر با یک فیلتر یا یک اکشن «بدون اتلاف» پردازش شود ، داده‌های پیکسل ، فشرده خواهد شد.

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

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

به‌عنوان یک مثال عملی، هنگام استفاده از قالب‌های پراتلافی مانند JPEG، فشرده کننده معمولاً یک تنظیمات «کیفیت» قابل تنظیمی را قرار می‌دهد (مثل گزینه‌ی «ذخیره برای وب» در فتوشاپ)، که معمولاً از ۱ تا ۱۰۰ قابل تنظیم است و این مقدار اندازه‌ی الگوریتم‌های پراتلاف و بدون اتلاف را کنترل می‌کند. برای بهترین نتیجه، چندین تنظیمات کیفیت را با تصویرهایتان امتحان کنید، و نگران کم کردن کیفیت نباشید – نتایج بصری اغلب خوب و صرفه‌جویی اندازه‌ی فایل می‌تواند به شکل قابل‌توجه ای زیاد باشد.

توجه: توجه داشته باشید که سطوح کیفیت برای قالب‌های تصویر متفاوت به‌صورت مستقیم قابل قیاس نیستند، این امر به دلیل تفاوت در الگوریتم‌های متفاوت برای کدگذاری تصویر است: کیفیت ۹۰ JPEG نتیجه‌ی بسیار متفاوتی از کیفیت ۹۰ WebP تولید می‌کند. درواقع حتی سطوح کیفیت یک قالب تصویر یکسان نیز ممکن است بر طبق پیاده‌سازی فشرده‌ساز نتایج بصری متفاوتی تولید کند!

انتخاب قالب صحیح

– شروع با انتخاب قالب جامع صحیح: GIF، PNG، JPEG

– آزمایش و انتخاب بهترین تنظیم برای هر قالب: کیفیت، اندازه جدول رنگ و غیره

علاوه بر الگوریتم‌های پراتلاف و بدون اتلاف، قالب‌های تصویر متفاوت ویژگی‌های متفاوتی مانند انیمیشن و کانال‌های شفافیت (آلفا) را پشتیبانی می‌کنند. درنتیجه انتخاب «قالب صحیح» برای یک تصویر ترکیبی از نتایج بصری دلخواه و نیازمندی‌های عملکردی است .

سه قالب تصویر پشتیبانی شده‌ی جامع وجود دارد: GIF، PNG و JPEG. علاوه بر این قالب‌ها، برخی مرورگرها نیز از قالب‌های جدیدتری مانند WebP و JPEG XR نیز پشتیبانی می‌کنند که فشرده‌سازی کلی بهتر و ویژگی‌های بیشتری دارند. پس باید از کدام قالب استفاده کنید؟

۱- آیا به انیمیشن نیاز دارید؟ اگر بله GIF تنها انتخاب جامع شماست.

GIF جدول رنگ را به حداکثر ۲۵۶ رنگ محدود می‌کند که برای اغلب تصاویر انتخاب ضعیفی است. همچنین PNG-8 فشرده‌سازی بهتری را برای تصاویر با جدول رنگ کوچک ارائه می‌کند. درنتیجه GIF پاسخ صحیح در هنگام نیاز به انیمیشن است

۲- آیا نیاز به حفظ جزئیات ریز با بالاترین تفکیک‌پذیری هستید؟ از PNG استفاده کنید.

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

اگر محتوی تصویر حاوی تصویر اشیاء هندسی بود، تبدیل آن به قالب برداری (SVG) را در نظر داشته باشید!

۳- آیا شما از یک عکس یا  screenshot یا  محتوی شبیه با آن را بهینه‌سازی می‌کنید؟ از JPEG استفاده کنید.

JPEG از ترکیبی از بهینه‌سازی‌های پراتلاف و بدون اتلاف استفاده می‌کند تا اندازه‌ی فایل تصویر را کاهش دهد. چندین سطح کیفیت JPEG را امتحان کنید تا بهترین کیفیت را در مقابل اندازه‌ی فایل به دست آورید.

در آخر، هنگامی‌که شما قالب بهینه‌ی تصویر و تنظیماتش را برای هرکدام از محتوی خود مشخص کردید، اضافه کردن محتوی کدگذاری شده در WebP و JPEG XR را نیز در نظر داشته باشید. هردوی این قالب‌ها جدید هستند و متأسفانه (هنوز) به شکلی جامع توسط تمامی مرورگرها پشتیبانی نمی‌شوند، ولی بااین‌حال این قالب‌ها می‌توانند صرفه‌جویی قابل‌توجه ای را برای سرویس‌گیرنده‌های جدیدتر فراهم سازند – برای مثال، به‌طور میانگین WebP اندازه فایل را در مقایسه با تصویر JPEG 30% کاهش می‌دهد.

ازآنجاکه نه WebP و نه JPEG XR به شکلی جامع پشتیبانی نمی‌شوند، شما نیاز به افزودن پلاگین  جدید به برنامه ها و یا سرویس‌دهنده‌ جدیدی هستید تا از فرمت های فوق پشتیبانی کنند .

• برخی از CDN ها بهینه‌سازی تصویر را به‌ عنوان یک سرویس ارائه می‌کنند که این سرویس شامل JPEG XR و WebP نیز می‌شود .
• برخی از ابزار منبع باز (مثل PageSpeed برای Apache یا Nginx) بهینه‌سازی ، تبدیل و ارائه خدمات مناسب آن را ارائه می‌کنند.
• شما می‌توانید منطق برنامه‌ اضافه کنید تا مشتری را شناسایی کند و کنترل کند که کدام مشتری کدام قالب را پشتیبانی می کند  و بهترین قالب تصویر موجود را برای آنها ارائه کنید.

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

ابزار و پارامترها

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

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

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

– ارائه‌ی تصویر به اندازه مناسب یکی از ساده‌ترین و مؤثرترین بهینه‌سازی‌ها است .

– توجه خاصی به تصاویر بزرگ داشته باشید زیرا آنها داری حجم زیادی هستند.

– تعداد پیکسل‌های غیرضروری را با اندازه تصاویرتان به‌ اندازه‌ی مورد نمایش کاهش دهید.

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

درنتیجه، یکی از ساده‌ترین و مؤثرترین تکنیک‌های بهینه‌سازی تصویر این است که مطمئن شویم که تصویر ما هیچ پیکسل بیش از اندازه‌ای برای نمایش محتوی درون مرورگر نمی‌فرستد. ساده به نظر می‌رسد نه؟ متأسفانه اکثر صفحات برای بسیاری از محتوی تصویری‌شان ، این آزمون را انجام نمی‌دهند: آنها معمولاً محتوی بزرگ‌تری را ارسال می‌کنند و از مرورگر برای اندازه مجدد آنها استفاده می‌کنند ( که این امر باعث افزایش منابع CPU نیز می شود و از پیکسل های کمتری برای نمایش استفاده می کند.

توجه: توقف بر روی عنصر (element) تصویر در ابزار توسعه‌ی کروم نشان‌دهنده‌ی اندازه‌های «طبیعی» و «نمایش» محتوی تصویری است. در مثال بالا تصویر ۳۰۰×۲۶۰ پیکسلی دانلود شد ولی در هنگام نمایش در مرورگر اندازه مجدد (۲۱۲×۲۴۵) نمایش داده می شود .

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

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

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

برخی از نکات و تکنیک‌هایی که هنگام کار برای بهینه‌سازی تصویر باید در خاطر داشته باشید:

• تصاویر وکتور : تصاویر وکتور دارای زوم پذیری و کیفیت بالا هستند که برای دستگاه های مختلف و رزولوشن های بالا  ایدئال هستند.
• حداقل سازی و فشرده‌سازی محتوی SVG: نشانه‌گذاری XML که توسط اکثر برنامه‌های طراحی تولید می‌شود اغلب دارای فراداده‌های غیرضروری است که قابل‌حذف هستند؛ مطمئن شوید که سرویس‌دهنده‌ی شما (هاستینگ شما) طوری تنظیم‌شده است تا فشرده‌سازی GZIP را به محتوی‌های SVG اعمال کند.
• انتخاب بهترین قالب تصویر Raster : تعیین نیازمندی‌ها , عملکرد شما و انتخابی که مناسب محتوی مخصوص شماست.
• آزمایش تنظیمات بهینه‌ی سازی مختلف برای بالا ترین  کیفیت برای قالب‌های Raster: از کاهش تنظیمات «کیفیت» نترسید، نتایج خیلی خوب اغلب درصرفه‌جویی در بایت ها قابل‌توجیح هستند.
• حذف فراداده‌ی غیرضروری تصویر: بسیاری از تصاویر راستر حاوی فراداده‌های غیرضروری درباره‌ی محتوی هستند: اطلاعات جغرافیایی، اطلاعات دوربین و غیره. از ابزار مناسب برای جداسازی این داده‌ها استفاده کنید.
• ارائه‌ی تصاویر مناسب نسبت به سایز قرار گیری تصویز : تصاویر را بر روی سرویس‌دهنده تغییر اندازه دهید تا تضمین کنید که اندازه‌ی «نمایش» تا جای ممکن نزدیک به‌اندازه‌ی «طبیعی» تصویر است. توجه زیادی به شکلی خاص به تصاویر بزرگ داشته باشید، زیرا این‌ها دارای بزرگ‌ترین بایت ها هستند!
• خودکار ، خودکار و خودکار: بر ابزار و زیرساخت‌های خودکاری سرمایه‌گذاری کنید که تضمین کند تمامی محتوی تصویری شما بهینه‌شده است.

منبع : از مقالات گوگل