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

چرا بهینه سازی تصاویر در وبسایت دارای اهمیت است و چگونه می‌بایست این بهینه‌سازی را انجام داد؟ یکی از آسان‌ترین روش‌ها برای سرعت بخشیدن به سایت و بهبود امتیازات PageSpeed ​​و YSlow ، بهینه‌سازی تصاویر است. حال بهینه‌سازی تصویر به چه معنی است، با تیک4 همراه باشید.

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

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

از آنجا که معمولا تصاویر دارای حجم‌های بالایی هستند، شما تصاویر موردنیاز خود را چگونه بدست می‌آورید؟

• وبسایتی خاص
• دوربین
• دستگاه موبایل
• و یا جستجوی وب

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

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

هنگام استفاده از تصاویر بهینه‌سازی نشده، چه اتفاقی می‌افتد؟

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

• مرورگر تصویر را درخواست و بارگیری می‌کند – 2400 x 1350  و 2.5MB .
• براساس طراحی سایت شما،HTML / CSS تصویر را مقیاس کرده تا متناسب با ناحیه تصویر انگشتی شما در ابعاد 300 x 169 باشد.
• مرورگر، تصویر مقیاس یافته را در صفحه شما رندر می‌کند.

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

1. ابعاد تصویر موردنیاز می‌توانسته 300 x 169 باشد – اما شما از تصویری با ابعاد 2400 x 1350 استفاده کرده‌اید.
2. تصویر با حداکثر کیفیت / 12/100%ارائه شده است – در حالیکه این سطح از کیفیت، معمولاً برای چاپ نیاز است.
3. و یا تصویر بطور مستقیم از تلفن / دوربین / اینترنت گرفته شده – که بطور بالقوه دارای ابردیتا، پروفایل رنگی و کیفیت غیرضروری است.

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

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

در این قسمت قصد داریم برروی موضوعات اندازه فایل و تصاویر غیربهینه تمرکز کنیم.
بعبارت ساده، اندازه فایل‌های کوچکتر = کاهش زمان بارگیری = سریعترشدن لود صفحه. در مفاهیم اصلی بهینه سازی تصاویر ابعاد تصویر (اندازه بصری، عرض x ارتفاع) و فشرده‌سازی (کیفیت تصویر و غیره) کاهش می‌یابد.

ابعاد (Dimensions)

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

بعنوان مثال عکسی با حجم 1.8 مگابایت و رزولوشن سی‌صد DPI و ابعاد 4900 در 3200 پیکسل را بهینه‌ کرده‌ایم و فرمت JPEG را جهت فشرده‌سازی بیش‌تر تصویر انتخاب نمودیم. ابعاد را نیز به 1200 در 795 پیکسل کاهش دادیم. با این کار حجم عکس به 103 کیلوبایت تغییر پیدا کرد و این یعنی 94% کمتر از عکس اصلی.

فشرده‌سازی (Compression)

در ابتدایی‌ترین تعریف، الگوریتم‌های فشرده‌سازی بااتلاف (lossy compression) سعی در یافتن و کاهش پیکسل‌های اضافی در یک تصویر دارد. این مورد نقش بسیار مهمی در بهینه سازی تصاویر ایفا می‌کند و دارای درجات گوناگونی از فشرده‌سازی است. از تکنیک‌ فشرده‌سازی بااتلاف معمولا در جهت کاهش حجم داده‌ها و همچنین سهولت بیش‌تر در تبادل آن‌ها استفاده می‌شود که البته افزایش مقدار فشرده‌سازی، باعث کاهش کیفیت تصویر نیز خواهد ‍‌شد.

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

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

در فشرده‌سازی فایل بدون اتلاف داده (Lossless)، کیفیت تصاویر کاملاً یکسان است، با اینحال داده‌هایی که تصویر شما را تشکیل می‌دهند، به شیوه‌ای کارآمدتر و کم ‌حجم‌تر سازمان‌دهی شده و در نتیجه باعث کوچکتر شدن سایز فایل می‌شود.
فشرده‌سازهای مدرن تصاویر، از الگوریتم‌های فشرده‌سازی بسیار پیشرفته و مبتنی بر روش‌های بااتلاف یا بدون اتلاف برای فشرده‌سازی تصاویر و کاهش اندازه فایل در ضمن حفظ کیفیت تصویر، استفاده می‌کنند.
گرچه این دو روش را می‌بایست بصورت غیراتوماتیک و دستی انجام دهید، ولی استفاده از این روش‌ها توصیه می‌شود. همچنین افزونه‌های متعددی برای وردپرس وجود دارد از جمله Optimol،EWWW  و Imsge Optimizer و هنگامی که عکسی را برای اولین بار آپلود می‌کنید، آن را فشرده می‌کنند.

بهینه‌سازی بیش‌تر

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

هنگام استفاده از تصاویر بهینه ‌سازی شده، چه اتفاقی می افتد؟

تصاویر مقیاس‌پذیر و فشرده‌شده سریعتر بارگیری و ارائه می‌شوند.

1. مرورگر تصویر را درخواست و بارگیری می کند – حال فقط 300 x 169 و 68kb
2. به تغییر مقیاس HTML / CSS نیازی نیست، بنابراین مرورگر تصویر را مطابق صفحه شما رندر می‌کند.
3. سرعت در بارگیری و رندر تصاویر در سایت، نتیجه بهینه‌سازی خواهد بود.

ارائه تصاویر مقیاس‌‌پذیر و وب پاسخگو

فرض کنید شما یک طراحی پاسخگو برای وبسایت خود دارید و GTmetrix به شما در مورد ” Serve scaled images” هشدار می‌دهد، منظور از خطای موردنظر این است که، تصاویر در اندازه‌ی استانداردی قرار نگرفته‌اند.

چگونه باید سایت من پاسخگو باشد، در ضمن اینکه باید از تصاویر مقیاس‌پذیر استفاده کنم؟

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

برای رفع خطای  serve scaled images می‌توان از روش‌های زیر استفاده نمود.

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

کلام آخر

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