آموزش جی تی متریکس قسمت 15 | استفاده از نسل جدید تصاویر

استفاده از نسل جدید فرمت‌های تصاویر

یکی از موضوعات پراهمیت در ورژن جدید Lighthouse استفاده از نسل جدید فرمت های تصاویر(next generation imge) است. که همان فایل هایی با فرمت jpg2000,jpgxr و webp هستند. در این آموزش قصد داریم ببینیم که این فرمت ها چه مزیتی نسبت به بقیه دارند و چگونه می‌توانیم JPG را به آنها تبدیل کنیم؟

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

حال می‌خواهیم روش های تبدیل به webp را بررسی کنیم:

راه اول استفاده از دستور cwebp در لینوکس است. اسم فایل و quality را در پارامترها اختصاص می‌دهیم و خروجی Webp را به ما می‌دهد. webp در سایز‌های بزرگ و quality بالا حجم را کاهش نمی‌دهد و ممکن است بیشتر هم شود اما در سایزهای کوچک و با quality پایین تر به شدت حجم را کاهش می‌دهد.

اگر یک تعداد زیادی عکس Jpg داشته باشیم و بخواهیم تبدیل به webp کنیم از حلقه for استفاده می‌کنیم.

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

ابزار دیگری که در لینوکس است و open source میباشد و می‌توانید در ویندوز استفاده کنید ابزار Gimp است.

نکته: gif های متحرک را به Webp تبدیل نکنید و به ویدئو تبدیل کنید.

آموزش ابزار جی تی متریکس (GTmetrix)

اکثر ‌وبسایت‌ها تصاویر را با فرمت JPEG یا PNG که از دهۀ 1990 وجود دارد، ارائه می‌دهند. در دسترس بودن نسل جدیدی از فرمت‌های تصاویر فرصتی را برای کاهش بیشتر اندازه فایل های تصویری ارائه می دهد.

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

•   WebP (پرکاربردترین و توصیه شده ترین قالب)
•   JPEG 2000 (مناسب برای موارد تخصصی)
•    JPEG XR (مناسب برای موارد تخصصی)

در حالی که میزان سازگاری سیستم‌های مدیریت محتوا و مرورگرها برای هر فرمت متفاوت است اما استفاده ار نسل جدید فرمت‌های تصاویر می‌تواند به بارگذاری سریع تصاویر و ارائه یک تجربه کاربری مثبت کمک کند.

نسل جدید فرمت‌های تصاویر چیست؟

نسل جدید فرمت تصاویر جدیدترین فنآوری‌های موجود برای بارگیری سریع تر محتوا در صفحات وبسایت هستند. حجم تصاویر 60 تا 65 درصد از صفحه را شامل می‌شود که ممکن است باعث کاهش سرعت بارگذاری صفحه هستند. WebP، JPEG 2000 و JPEG XR فرمت‌های نسل جدید هستند که عمدتاً برای بهبود سرعت سایت پیشنهاد شده‌اند.‌

این فرمت‌ها دارای فشرده سازی و ویژگی‌های کیفی بالاتری هستند. در اکثر موارد، استفاده از WebP می‌تواند اندازه فایل‌های تصویری را به ترتیب 25 تا 50 درصد کاهش دهد. تغییر به فرمت‌های جدید تصویر نه تنها اندازه فایل‌های تصویری را کاهش می‌دهد بلکه حجم کلی صفحات وبسایت را نیز کاهش می‌دهد. چیزی که WebP را منحصر به فرد می‌کند، نحوه تبدیل تصاویر است. این فرمت تصاویر را به روشی بسیار تمیز و کارآمد رمزگذاری می‌کند که در نهایت حجم آنها را به میزان قابل توجهی کوچک‌تر از PNG‌ و  JPEG‌ می‌کند و بدون آنکه کیفیت را به خطر بیندازد.

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

نسل جدید فرمت‌های تصاویر چه مزایایی دارند؟

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

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

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

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

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

نسل جدید فرمت‌های تصاویر و سازگاری آن با مرورگرها چگونه است؟

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

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

چگونه از نسل جدید فرمت‌های تصاویر استفاده کنیم؟

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

1- تصاویر خود را به فرمت WebP  تبدیل کنید

می‌توانید استفاده از کانورترهای آنلاین تصاویر خود را با به فرمت WebP تبدیل کنید. با سرچ عنوان «WebP Converter» را در گوگل، می‌توانید وبسایت های مختلفی را برای تبدیل فایل‌های JPEG یا PNG را به WebP پیدا کنید.

2- از افزونه فتوشاپ استفاده کنید

اگر با فتوشاپ آشنا هستید، می‌توانید از افزونه فتوشاپ برای تبدیل یا ذخیره تصاویر خود در قالب WebP استفاده کنید.

3- از جاوا اسکریپت استفاده کنید

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

4- از نشانه گذاری HTML استفاده کنید

متداول‌ترین روش برای ارائه تصاویر WebP با پشتیبان از طریق نشانه گذاری HTML است. به طور خاص، ما می‌توانیم از تگ تصویر در ترکیب با برچسب img استفاده کنیم.

در زیر یک مثال وجود دارد:

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

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

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

5- فایل htaccess را اصلاح کنید

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

به عنوان یک قاعده کلی، استفاده از فایل htaccess گزینه مناسبی برای کاربران با دانش کم فنی نیست. اگر ندانید که چه کار می کنید، بازنویسی فایل می تواند به شدت به وبسایت شما آسیب برساند.

نکته: اگر از وردپرس استفاده می‌کنید، می‌توانید از افزونه‌ها برای بهینه سازی و ارائه تصاویر WebP در ‌وبسایت خود استفاده کنید.

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

جی تی متریکس صفحات وبسایت شما را تجزیه و تحلیل می‌کند و تمام تصاویری را که در قالب‌های قدیمی مانند BMP ،JPEG یا PNG ارائه می‌شوند را شناسایی می‌کند. سپس هر تصویر را به قالب WebP تبدیل می‌کند تا محاسبه شود که اندازه فایل هر تصویر چقدر می‌تواند کاهش یابد. با کلیک روی گزارش جی تی متریکس، همۀ تصاویر و کاهش حجم احتمالی آنها در KB فهرست می‌شود. ناگفته نماند، فقط تصاویری که حداقل هشت کیلوبایت قابل کاهش هستند نمایش داده می‌شوند.

کلام آخر

مهمترین مزیت استفاده از نسل جدید فرمت‌های تصاویر، بارگذاری سریع‌تر تصاویر سرعت و عملکرد کلی وبسایت را بهبود می‌بخشد. موتورهای جستجو مانند گوگل هنگام تصمیم گیری در مورد رتبه سایت‌ها، سرعت بارگذاری را به عنوان یک عامل مهم سئو در نظر می‌گیرد.

سرعت بارگذاری سریع‌تر، تجربه مشتری و نرخ تبدیل کاربر به مشتری را بهبود می‌بخشد. WebP، JPEG 2000 و JPEG XR یک راه حل مناسب برای اندازه تصاویر است زیرا حجم فایل‌ها را بدون آسیب رساندن به کیفیت آنها کاهش می‌دهد. سعی کنید، از همین امروز به سراغ نسل جدید فرمت‌های تصاویر بروید و از آنها برای بهینه سازی وبسایت خود استفاده کنید.