در دنیای توسعه وب، مهم است که مطمئن شوید وب سایت شما آخرین استانداردهای عملکرد را دارد. به‌روزرسانی Google Core Web Vitals توجه بیشتری را به تجربه کاربر و سرعت بارگذاری صفحه جلب کرد. یکی از توصیه های کلیدی ابزار PageSpeed Insights گوگل، پشتیبانی از فرمت های تصویر NextGen مانند WebP است. در حالی که پلتفرم هایی مانند وردپرس پلاگین هایی را برای مدیریت این بهینه سازی ارائه می دهند، بلاگر به رویکرد دستی تری نیاز دارد. در این راهنما، نحوه ارسال تصاویر WebP به وبلاگ بلاگر خود و همچنین مشکلات و راه حل های رایج را خواهید آموخت.
آشنایی با فرمت WebP
WebP یک فرمت تصویر مدرن است که توسط گوگل توسعه یافته و تکنیک های فشرده سازی بهتری را در مقایسه با فرمت های سنتی مانند JPEG و PNG ارائه می دهد. با ارائه تصاویر در فرمت WebP، می توانید اندازه تصاویر خود را بدون کاهش کیفیت به میزان قابل توجهی کاهش دهید و در نتیجه بارگذاری صفحات سریعتر و عملکرد بهتری داشته باشید.
Blogger چگونه تصاویر را مدیریت می کند
بلاگر، پلتفرم وبلاگ نویسی محبوب گوگل، به طور خودکار تصاویر آپلود شده را با تبدیل آنها به فرمت WebP پردازش می کند. این بدان معناست که حتی اگر تصاویر را با فرمت‌های JPEG، PNG یا GIF آپلود کنید، سرور تصویر Blogger می‌تواند آن تصاویر را در قالب WebP تبدیل و ارائه کند. با این حال، درک نحوه درخواست این تصاویر بهینه شده به صورت دستی می تواند عملکرد وبلاگ شما را حتی بیشتر افزایش دهد.
راهنمای گام به گام میزبانی تصاویر WebP در بلاگر
1. تصاویر را در بلاگر آپلود کنید
برای شروع، تصاویر خود را طبق معمول از طریق داشبورد بلاگر خود آپلود کنید:
به داشبورد Blogger خود بروید.
به پست یا صفحه ای که می خواهید تصویر را در آن درج کنید بروید.
روی نماد “درج تصویر” در ویرایشگر پست کلیک کنید.
یک فایل تصویری (JPG، JPEG، PNG) را از رایانه خود انتخاب کرده و آن را آپلود کنید.
2. به حالت HTML بروید
پس از آپلود تصویر، برای پیکربندی URL تصویر باید به حالت HTML بروید:
در ویرایشگر پست، روی تب “HTML” کلیک کنید تا به حالت HTML بروید.
برچسب را پیدا کنید برای تصویر آپلود شده در کد HTML.
3. تغییر URL تصویر
سرور تصویر Blogger از انواع اندازه ها و قالب های تصویر پشتیبانی می کند. برای درخواست نسخه WebP یک تصویر، باید URL تصویر را با اضافه کردن پسوند -rw تغییر دهید:
URL تصویر را در تگ پیدا کنید . چیزی شبیه به این خواهد بود:
html
کد را کپی کنید
URL را با اضافه کردن -rw بعد از پارامتر اندازه تغییر دهید. به عنوان مثال:
html
کد را کپی کنید
آن را به:
html
کد را کپی کنید
در اینجا s640 اندازه تصویر را مشخص می کند و -rw فرمت WebP را درخواست می کند.
4. تنظیم اندازه تصویر
برای نمایش تصاویر در اندازه های مختلف، پارامتر اندازه را بر اساس آن تنظیم کنید:
برای تصاویر کوچک: s320 تبدیل به s320-rw می شود
برای تصاویر متوسط: s640 تبدیل به s640-rw می شود
برای تصاویر بزرگ: s1024 تبدیل به s1024-rw می شود
نمونه ای از یک تصویر کوچک:
html
کد را کپی کنید
5. تأیید تحویل تصویر WebP
برای تأیید اینکه تصویر شما در قالب WebP ارائه شده است:
تغییرات خود را ذخیره کنید و پیام خود را منتشر کنید.
پست منتشر شده را در مرورگر باز کنید.
روی تصویر کلیک راست کرده و “Open image in new tab” یا “Inspect” را انتخاب کنید تا URL تصویر را مشاهده کنید.
URL را بررسی کنید تا مطمئن شوید به -rw ختم می شود، که به این معنی است که قالب WebP در حال استفاده است.
عیب یابی و سازگاری تم
1. مشکلات موضوعی با WebP
برخی از تم های بلاگر ممکن است به طور کامل از تصاویر WebP پشتیبانی نکنند. اگر با مشکلاتی مانند تصاویر شکسته یا مشکلات چیدمان مواجه هستید:
به ویرایشگر تم Blogger دسترسی پیدا کنید.
فایل تابع تم اصلی را که معمولاً یک فایل جاوا اسکریپت طولانی در کنار تگ است، پیدا کنید