مقدمه: چرا بهینه‌سازی تصاویر در ووکامرس مهم است؟
برای بهینه‌سازی تصاویر ووکامرس، ابتدا مشخص کنید کدام تصویر و کدام صفحه بیشترین مشکل را دارند. راه‌حل معمول از ترکیب اندازه مناسب، فشرده‌سازی قابل قبول و ترتیب درست بارگذاری به دست می‌آید. تبدیل همه فایل‌ها به یک فرمت یا فعال‌کردن یک گزینه عمومی، به‌تنهایی نشان نمی‌دهد مشکل برطرف شده است. در فروشگاه، تصویر باید علاوه بر سبک‌بودن، رنگ، بافت و جزئیات محصول را درست نشان دهد؛ بنابراین کیفیت بصری بخشی از معیار تصمیم است.
این راهنما یک مسیر عملی برای بررسی تصاویر فهرست محصولات، صفحه محصول و گالری ارائه می‌کند. آزمون‌ها پیشنهادی هستند و نتیجه اندازه‌گیری‌شده روی فروشگاه شما محسوب نمی‌شوند. پیش از تغییر گسترده، از فایل‌های اصلی و تنظیمات نسخه پشتیبان داشته باشید و روش را روی چند محصول آزمایشی بررسی کنید.
پیش‌نیازهای بهینه‌سازی تصاویر
ابتدا سه نمونه نماینده انتخاب کنید: یک صفحه دسته‌بندی دارای چند محصول، یک صفحه محصول با عکس اصلی بزرگ و یک محصول با گالری چندتصویری. برای هر نمونه، آدرس فایل دریافت‌شده، ابعاد آن، حجم انتقال و اندازه نمایش روی صفحه را یادداشت کنید. مقایسه باید درباره فایل واقعی باشد؛ حجم تصویر اصلی در کتابخانه رسانه همیشه برابر فایلی نیست که مرورگر دریافت می‌کند.
در ووکامرس، اندازه و برش تصویر اصلی و بندانگشتی‌ها را جداگانه بررسی کنید. مسیر و گزینه‌های دقیق با قالب متفاوت است و بعضی قالب‌ها کنترل اندازه را خودشان بر عهده دارند. نسبت برش باید با نوع عکس محصول سازگار باشد؛ برای مثال، برش مربعی ممکن است بخش مهمی از یک کالای بلند را حذف کند. اگر تصویر تار است، ابتدا بررسی کنید اندازه نسخه نمایش‌داده‌شده برای فضای صفحه کافی باشد.
اصل عکس را نگه دارید و روی یک نسخه جداگانه کار کنید. تنظیمات فعلی قالب و افزونه‌های مرتبط با تصویر را نیز ثبت کنید تا امکان بازگشت داشته باشید. تغییر هم‌زمان چند ابزار تشخیص علت بهبود یا افت کیفیت را دشوار می‌کند. برای آزمایش اولیه یک روش را انتخاب کنید و همان نمونه‌ها را پیش و پس از تغییر مقایسه کنید.
یک معیار پذیرش ساده تعریف کنید: عکس در موبایل و دسکتاپ واضح باشد، برش نامناسب نداشته باشد و فایل دریافت‌شده بدون کاهش غیرقابل‌قبول کیفیت سبک‌تر شود. برای همه محصولات یک حجم ثابت و اجباری تعیین نکنید؛ عکس ساده و عکس دارای جزئیات ریز، نیاز یکسان ندارند.
روش‌های بهینه‌سازی تصاویر در ووکامرس
از اندازه شروع کنید. اگر یک کارت محصول تصویر کوچکی نمایش می‌دهد، دریافت عکس بسیار بزرگ برای آن کارت معمولاً انتخاب مناسبی نیست. در مقابل، گالری و قابلیت بزرگ‌نمایی ممکن است به نسخه بزرگ‌تر نیاز داشته باشند. انتخاب اندازه را برای هر محل نمایش جداگانه انجام دهید و نسخه اصلی را صرفاً به دلیل استفاده از بندانگشتی حذف نکنید. پس از تغییر تنظیمات، خروجی صفحه را بررسی کنید تا معلوم شود اندازه موردنظر واقعاً استفاده شده است.
وردپرس برای تصاویر مناسب، اطلاعات srcset و sizes را به خروجی اضافه می‌کند تا مرورگر میان اندازه‌های موجود انتخاب کند. این قابلیت به وجود نسخه‌های تصویر و نحوه خروجی‌دادن قالب وابسته است. صرف دیدن فایل‌های کوچک در کتابخانه، اثبات نمی‌کند کارت محصول همان فایل را دریافت کرده است. فایل انتخاب‌شده را در ابزار توسعه مرورگر بررسی کنید؛ اندازه نمایش و تراکم پیکسلی دستگاه می‌توانند در انتخاب اثر داشته باشند.
سپس فرمت را با نوع تصویر هماهنگ کنید. JPEG برای عکس محصول می‌تواند انتخاب قابل استفاده‌ای باشد؛ WebP و AVIF نیز گزینه‌هایی برای فشرده‌سازی هستند و باید خروجی واقعی آن‌ها را مقایسه کرد. PNG برای موارد نیازمند شفافیت یا حفظ جزئیات مشخص کاربرد دارد. SVG بیشتر به گرافیک برداری مانند آیکون مربوط است و جایگزین خودکار عکس دوربین نیست. کوچک‌تر بودن یک فرمت برای هر تصویر تضمین‌شده نیست.
کیفیت فشرده‌سازی را مرحله‌ای تغییر دهید و لبه نوشته روی بسته‌بندی، بافت پارچه و تفاوت رنگ‌ها را در اندازه نمایش واقعی بررسی کنید. عدد کیفیت در ابزارهای مختلف الزاماً نتیجه یکسانی ندارد. به‌جای انتخاب یک عدد برای همه تصاویر، چند خروجی از همان عکس بسازید و نسخه‌ای را انتخاب کنید که حجم کمتر و جزئیات قابل قبول دارد. تبدیل فایل فشرده‌شده قبلی ممکن است کیفیت را بیشتر کاهش دهد؛ ترجیحاً از اصل عکس شروع کنید.
در پایان، متن جایگزین را توصیفی بنویسید. ویژگی‌های قابل مشاهده و مرتبط با محصول را بیان کنید و از انباشتن کلیدواژه پرهیز کنید. متن جایگزین جای تصویر دقیق محصول را نمی‌گیرد، اما هنگام نمایش‌نیافتن عکس یا استفاده از فناوری کمکی، بخشی از اطلاعات تصویر را منتقل می‌کند.
محدودیت‌های بهینه‌سازی تصاویر
بارگذاری تنبل برای تصاویر پایین صفحه مفید است، اما نباید بدون بررسی روی عکس مهمِ ابتدای صفحه اعمال شود. تصویر اصلی محصول یا بنرِ قابل مشاهده در شروع ممکن است عنصر مهم بارگذاری صفحه باشد؛ تأخیر عمدی آن می‌تواند نمایش محتوای اصلی را عقب بیندازد. برای تصاویر خارج از نمای اولیه، رفتار loading="lazy" را بررسی کنید و سپس با اسکرول مطمئن شوید عکس‌ها به‌موقع ظاهر می‌شوند.
برای معرفی یک عنصر HTML در متن آموزشی، نام آن باید به‌صورت متن نمایش داده شود؛ برای مثال <img>، <picture> و <source>. این نام‌ها در این مقاله نمونه توضیحی‌اند و دستور اضافه‌کردن دستی تصاویر به قالب نیستند. اجرای تغییر قالب نیازمند بررسی خروجی فعلی و جلوگیری از تعارض با ابزارهای موجود است.
ثبت عرض و ارتفاع تصویر به مرورگر کمک می‌کند پیش از دریافت فایل، فضای آن را در صفحه در نظر بگیرد. نسبت ابعاد باید درست باشد؛ ابعاد نادرست می‌تواند ظاهر را مخدوش کند. این موضوع را هنگام بارگذاری آهسته بررسی کنید تا عکس باعث جابه‌جایی ناگهانی متن و دکمه‌ها نشود. تنظیم اولویت دریافت نیز برای تصویر مهم معنا دارد، نه برای همه تصاویر به‌صورت یکسان.
فشرده‌سازی تصویر مشکل کندی پاسخ سرور، اسکریپت سنگین یا ارتباط پرداخت را حل نمی‌کند. اگر فایل‌های تصویر مناسب‌اند ولی فروشگاه همچنان کند است، بخش‌های دیگر را جداگانه بررسی کنید. از کاهش حجم عکس، افزایش قطعی فروش یا رتبه جستجو نتیجه نگیرید؛ این ادعاها نیازمند شواهد مستقل هستند.
آزمون و نتیجه‌گیری از بهینه‌سازی تصاویر
آزمون را با همان صفحه‌ها و شرایط قابل مقایسه تکرار کنید. نوع دستگاه، اندازه پنجره، وضعیت ورود و شیوه استفاده از کش را ثابت نگه دارید. یک بار بارگذاری اولیه و یک بار مراجعه دوباره را جدا ثبت کنید؛ ترکیب این دو وضعیت می‌تواند نتیجه را گمراه‌کننده کند. شرایط شبکه نیز بر زمان دریافت اثر دارد، پس تفاوت زمان را بدون توجه به شرایط آزمون به تغییر تصویر نسبت ندهید.
در ابزار توسعه مرورگر، درخواست‌های تصویر را جدا بررسی کنید. ببینید برای کارت محصول و گالری چه فایل‌هایی درخواست می‌شوند و آیا نسخه مناسب اندازه نمایش دریافت شده است. پس از تبدیل فرمت، آدرس و نوع فایل واقعی را کنترل کنید؛ تغییر تنظیمات افزونه لزوماً به معنی استفاده صفحه از خروجی جدید نیست. اگر هنوز نسخه قدیمی دیده می‌شود، ابتدا محل نگهداری همان پاسخ را شناسایی کنید و کش مرتبط را طبق روش ابزار بررسی کنید.
آزمون بصری را به صفحه نخست محدود نکنید. در موبایل چند محصول را باز کنید، میان عکس‌های گالری جابه‌جا شوید و قابلیت بزرگ‌نمایی را امتحان کنید. روی محصول دارای نوشته ریز و محصول دارای بافت، افت کیفیت را بهتر می‌توان دید. برای عکس‌های پایین صفحه، اسکرول تدریجی انجام دهید و بررسی کنید جای خالی طولانی یا جابه‌جایی ناگهانی محتوا ایجاد نشده باشد.
نتیجه را به‌صورت تصمیم ثبت کنید: کدام اندازه برای کدام محل نمایش مناسب بود، چه فرمتی انتخاب شد و چه ایرادی باقی ماند. اگر نسخه جدید تار یا دارای برش نامناسب است، به فایل و تنظیمات قبلی برگردید و فقط همان عامل را اصلاح کنید. اگر بهبود در نمونه‌ها قابل قبول بود، تغییر را مرحله‌ای به محصولات دیگر گسترش دهید و نمونه‌های استثنا را جدا بررسی کنید. حفظ این یادداشت‌ها از تکرار آزمون‌های بی‌نتیجه جلوگیری می‌کند.
جمع‌بندی: چه چیزی باید در نظر گرفت؟
بهینه‌سازی تصاویر ووکامرس را با بررسی فایل واقعی و محل نمایش آغاز کنید؛ سپس اندازه، فرمت و میزان فشرده‌سازی را با کیفیت قابل قبول محصول هماهنگ کنید. تصاویر پایین صفحه و عکس اصلیِ قابل مشاهده، سیاست بارگذاری یکسانی ندارند. وجود تصویر کوچک در رسانه نیز کافی نیست و باید دریافت همان نسخه در صفحه تأیید شود.
اصل عکس و تنظیمات قبلی را نگه دارید، تغییرها را جدا آزمایش کنید و نتیجه را در موبایل، دسکتاپ و گالری بسنجید. معیار موفقیت، کاهش هزینه دریافت همراه با نمایش درست محصول است. اگر مشکل باقی ماند، سراغ عامل بعدی بروید و بهینه‌سازی عکس را جایگزین بررسی کل فروشگاه نکنید.
سرویس‌های مرتبط با این مطلب
برای بررسی راهکار مناسب، مشخصات و شرایط این خدمات را ببینید.
پرسش‌ها و دیدگاه‌های شما
سؤال یا تجربه مرتبط با این مطلب دارید؟ با ما و خوانندگان مجله آفاق هاست در میان بگذارید.