استفاده از تصاویر در وردپرس (بهترین روش‌ها برای سرعت و سئو)

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

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

شاید فکر کنید تصاویر فقط برای زیبایی سایت هستند، اما واقعیت این است که نقش بسیار مهمی در موفقیت یک سایت دارند:

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

دوم اینکه تصاویر مناسب باعث افزایش نرخ کلیک یا همان CTR می‌شوند. تحقیقات نشان داده پست‌هایی که تصویر شاخص جذاب دارند تا ۳۰ درصد بیشتر کلیک می‌شوند.

سوم اینکه تصاویر به سئو سایت کمک می‌کنند. گوگل به سایت‌هایی که تصاویر بهینه و مرتبط دارند امتیاز بیشتری می‌دهد.

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

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

انتخاب فرمت درست یکی از مهمترین تصمیم‌ها برای بهینه‌سازی تصاویر است. هر فرمت مزایا و معایب خاص خود را دارد.

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

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

فرمت WebP یک فرمت مدرن و پیشرفته است که توسط گوگل توسعه یافته. این فرمت تقریباً توسط همه مرورگرهای مدرن پشتیبانی می‌شود. مزیت اصلی WebP این است که تصاویر را تا ۳۰ درصد کوچک‌تر از JPEG با همان کیفیت ذخیره می‌کند. همچنین از شفافیت پشتیبانی می‌کند. تنها نکته منفی آن این است که ممکن است در مرورگرهای بسیار قدیمی نمایش داده نشود.

فرمت AVIF جدیدترین و پیشرفته‌ترین فرمت تصویری است. این فرمت تصاویر را تا ۵۰ درصد کوچک‌تر از WebP ذخیره می‌کند. کیفیت فوق‌العاده‌ای دارد و از شفافیت پشتیبانی می‌کند. عیب آن این است که هنوز در برخی مرورگرهای قدیمی پشتیبانی نمی‌شود و پردازش آن نیازمند منابع بیشتر سرور است.

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

یکی از بزرگترین اشتباهات مدیران سایت، آپلود تصاویر با ابعاد بسیار بزرگ است. خیلی از کاربران عکس‌هایی با دوربین ۴۰ مگاپیکسلی می‌گیرند و همان فایل ۸۰۰۰ پیکسلی را مستقیماً در سایت آپلود می‌کنند. این کار فاجعه‌بار است!

اندازه استاندارد برای انواع تصاویر در وردپرس به این شرح است:

برای تصویر شاخص یا Featured Image که در بالای پست‌ها و صفحات نمایش داده می‌شود، ابعاد ۱۲۰۰ در ۶۳۰ پیکسل مناسب است. این نسبت ۱.۹ به ۱ تقریباً استاندارد صنعت است و در همه دستگاه‌ها به خوبی نمایش داده می‌شود.

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

برای بنرهای هدر و اسلایدرهای بالای صفحه، عرض ۱۹۲۰ پیکسل مناسب است. این تصاویر تمام عرض صفحه را می‌پوشانند و در مانیتورهای عریض هم کشیده نمی‌شوند. ارتفاع معمولاً بین ۴۰۰ تا ۶۰۰ پیکسل است.

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

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

برای تصاویر پس‌زمینه، وابسته به بخش مورد نظر است. معمولاً عرض ۱۹۲۰ پیکسل با ارتفاع متناسب با محتوا مناسب است.

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

بهترین کار این است که تصاویر را قبل از آپلود در سایت بهینه کنید. ابزارهای مختلفی برای این کار وجود دارد:

ابزار TinyPNG یکی از محبوب‌ترین ابزارهای آنلاین است. شما می‌توانید تا ۲۰ تصویر را به صورت همزمان آپلود کنید و حجم آنها را کاهش دهید. این ابزار فرمت‌های PNG، JPEG و WebP را پشتیبانی می‌کند. کیفیت تصاویر پس از کاهش حجم تقریباً بدون تغییر باقی می‌ماند اما حجم گاهی تا ۷۰ درصد کاهش می‌یابد.

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

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

ابزار RIOT برای ویندوز یک نرم‌افزار منبع باز و قدرتمند است. شما می‌توانید قبل و بعد از بهینه‌سازی را مقایسه کنید و میزان فشرده‌سازی را به صورت دستی تنظیم کنید.

ابزار Imagify یک ابزار آنلاین با رابط کاربری ساده است. نسخه رایگان آن ماهانه ۲۰ مگابایت بهینه‌سازی رایگان ارائه می‌دهد که برای سایت‌های کوچک کافی است.

توصیه من: از TinyPNG برای کارهای روزمره استفاده کنید. ساده، سریع و موثر است.

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

افزونه ShortPixel یکی از بهترین گزینه‌هاست. این افزونه می‌تواند تصاویر قدیمی را بهینه کند، فرمت WebP را فعال کند و حتی تصاویر را به صورت خودکار در زمان آپلود فشرده کند. نسخه رایگان آن ماهانه ۱۰۰ تصویر رایگان بهینه می‌کند. نسخه تجاری آن بسیار مقرون به صرفه است.

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

افزونه EWWW یک راهکار منحصر به فرد دارد. این افزونه می‌تواند بهینه‌سازی را روی سرور خود شما انجام دهد و نیازی به ارسال تصاویر به سرور خارجی نیست. برای سایت‌های حساس از نظر امنیت گزینه خوبی است. نسخه رایگان آن محدودیت دارد اما نسخه تجاری قیمت مناسبی دارد.

افزونه Imagify محصول تیم WP Rocket است و کیفیت بالایی دارد. رابط کاربری بسیار ساده و زیبایی دارد و بهینه‌سازی بسیار خوبی انجام می‌دهد. نسخه رایگان آن ۲۰ مگابایت در ماه بهینه‌سازی رایگان ارائه می‌دهد.

توصیه من: اگر تازه کار را شروع کرده‌اید، از ShortPixel یا Smush استفاده کنید. اگر بودجه دارید، Imagify گزینه عالی است.

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

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

فیلد عنوان یا Title تصویر معمولاً وقتی ماوس روی تصویر می‌رود نمایش داده می‌شود. این فیلد برای سئو اهمیت کمتری دارد اما تجربه کاربری را بهبود می‌بخشد. عنوان باید مفید و مرتبط باشد.

نام فایل تصویری بسیار مهم است. هرگز از نام‌های پیش‌فرض دوربین مثل IMG_۰۰۱۲ استفاده نکنید. نام فایل باید به انگلیسی و مرتبط با محتوای تصویر باشد. از خط تیره برای جدا کردن کلمات استفاده کنید. مثال خوب: wp-rocket-plugin-settings.jpg مثال بد: screenshot-۲۳.jpg

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

نکته مهم: همه تصاویر شما باید حتماً متن جایگزین داشته باشند. تصاویر بدون Alt Text از نظر گوگل ناقص هستند.

ریسپانسیو کردن تصاویر در وردپرس

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

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

اما چند نکته را باید رعایت کنید: در قالب خود از تابع the_post_thumbnail برای نمایش تصاویر شاخص استفاده کنید. از افزونه‌های صفحه‌ساز معتبر استفاده کنید. در تصاویر داخل نوشته، سایز medium یا large را انتخاب کنید نه full size.

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

استفاده از CDN برای تصاویر

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

سرویس Cloudflare رایگان است و به راحتی با نصب افزونه قابل فعال شدن است. تصاویر شما روی ۳۰۰ نقطه حضور در سراسر جهان کپی می‌شوند. سرعت بارگذاری تا ۵۰ درصد افزایش می‌یابد.

افزونه Jetpack شامل سرویس Site Accelerator است. تصاویر شما روی سرورهای WordPress.com ذخیره می‌شوند. این سرویس رایگان است و به صورت خودکار کار می‌کند.

سرویس ShortPixel CDN یک سرویس تخصصی برای تصاویر است. تصاویر شما به صورت خودکار به WebP تبدیل می‌شوند و از نزدیکترین سرور تحویل داده می‌شوند. این سرویس تجاری و با قیمت مناسب است.

توصیه من: از Cloudflare استفاده کنید. رایگان، قدرتمند و آسان.

اشتباهات رایج در استفاده از تصاویر

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

آپلود تصاویر با حجم بالا: تصویری با حجم ۵ مگابایت به معنای ۵ مگابایت دانلود برای هر کاربر است. اگر سایت شما ۱۰۰۰ بازدیدکننده در ماه داشته باشد، ماهانه ۵ گیگابایت پهنای باند مصرف می‌کند. تصاویر باید زیر ۵۰۰ کیلوبایت باشند.

استفاده نکردن از متن جایگزین: این اشتباه سئو و دسترسی‌پذیری سایت شما را به شدت تحت تأثیر قرار می‌دهد.

نام فایل بی‌ربط: نام فایل‌هایی مثل Screenshot-2024-۱۲-۱۵-at-۱.۱۰.۱۵-PM نه تنها بی‌ربط هستند بلکه به موتورهای جستجو اطلاعات مفیدی نمی‌دهند.

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

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

فشرده‌سازی بیش از حد: کاهش بیش از حد کیفیت تصاویر باعث زشت شدن آنها می‌شود. تعادل بین کیفیت و حجم را حفظ کنید.

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

خلاصه و جمع‌بندی

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

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

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

سوالات خود را در بخش نظرات مطرح کنید. خوشحال می‌شوم به شما کمک کنم.