تصاویر باکیفیت به درک بهتر محتوا، جلب توجه مخاطب و جذاب‌تر شدن صفحات سایت کمک می‌کنند، اما اگر حجم و ابعاد آن‌ها متناسب با محل نمایش نباشد، می‌توانند سرعت بارگذاری را کاهش دهند. این مشکل در سایت‌های وردپرسی رایج است، چون بسیاری از تصاویر بدون تغییر اندازه یا فشرده‌سازی مستقیم از دوربین، گوشی یا سایت‌های دیگر در کتابخانه رسانه بارگذاری می‌شوند.
برای بهینه‌سازی تصاویر سایت لازم نیست حتما دانش تخصصی طراحی یا برنامه‌نویسی داشته باشی. با چند مرحله ساده می‌توانی حجم تصاویر را کاهش بدهی، فرمت مناسبی انتخاب کنی و تنظیمات وردپرس را برای بارگذاری بهتر تصاویر بررسی کنی. در این راهنما، روش بهینه‌سازی تصاویر جدید و قدیمی، ابزارهای کاربردی و نکات مهم سئو را قدم‌به‌قدم توضیح می‌دهیم.
اگر می‌خواهی بدون نصب افزونه اضافی شروع کنی، می‌توانی ابتدا تصاویر را با یک ابزار آنلاین فشرده کنی و سپس نسخه بهینه‌شده را در وردپرس قرار بدهی. اگر کتابخانه رسانه سایتت از قبل پر از تصاویر حجیم است، روش اصلاح تصاویر موجود کمی متفاوت خواهد بود.
بهینه‌سازی تصاویر سایت چیست و چرا اهمیت دارد؟
بهینه‌سازی تصاویر مجموعه‌ای از اقدامات برای کاهش حجم فایل، انتخاب ابعاد و فرمت مناسب و نمایش صحیح تصویر در دستگاه‌های مختلف است، بدون اینکه کیفیت بصری آن بیش از حد افت کند. هدف فقط کوچک‌کردن فایل نیست، بلکه باید تصویر با کمترین حجم ممکن، کیفیت قابل قبول و در زمان مناسب به کاربر نمایش داده شود.
تصاویر حجیم می‌توانند حجم انتقال داده صفحه را افزایش دهند و بارگذاری آن را به تاخیر بیندازند. این مسئله به‌ویژه در اینترنت موبایل یا صفحاتی که تعداد زیادی تصویر دارند محسوس است. از طرف دیگر، تصویر اصلی بخش ابتدایی صفحه ممکن است در معیار LCP یا «بزرگ‌ترین ترسیم محتوایی» نقش داشته باشد. اگر این تصویر دیر بارگذاری شود، تجربه کاربر و عملکرد صفحه تحت تاثیر قرار می‌گیرد.
- سرعت بارگذاری بهتر: فایل کوچک‌تر معمولا به انتقال داده کمتری نیاز دارد.
- تجربه بهتر در موبایل: کاربران با اینترنت محدود، تصاویر را سریع‌تر دریافت می‌کنند.
- مصرف کمتر پهنای باند: حجم انتقال داده در بازدیدهای متعدد کاهش می‌یابد.
- بهبود دسترس‌پذیری: متن جایگزین مناسب به درک تصاویر توسط فناوری‌های کمکی کمک می‌کند.
- فرصت بهتر برای دیده‌شدن در جستجوی تصاویر: تصاویر باکیفیت، قابل دسترسی و مرتبط با محتوای صفحه، شانس بیشتری برای درک و نمایش درست در موتورهای جستجو دارند.
با این حال، بهینه‌سازی تصویر به‌تنهایی رتبه سایت را به رتبه یک نمی‌رساند. کیفیت محتوا، ارتباط صفحه با جستجوی کاربر، ساختار فنی سایت و عوامل متعدد دیگری هم در رتبه‌بندی نقش دارند.
مرحله اول: فرمت مناسب تصویر را انتخاب کن
پیش از فشرده‌سازی، باید مشخص کنی کدام فرمت برای تصویر مناسب‌تر است. انتخاب فرمت به نوع تصویر، نیاز به پس‌زمینه شفاف، میزان جزئیات و سازگاری ابزارهای سایت بستگی دارد.
| فرمت | کاربرد مناسب | نکته مهم |
|---|---|---|
| JPEG یا JPG | عکس‌های واقعی، تصاویر محیط و عکس محصولات | با فشرده‌سازی مناسب می‌توان حجم را کاهش داد، اما فشرده‌سازی زیاد ممکن است کیفیت را پایین بیاورد. |
| PNG | تصاویر دارای شفافیت، بعضی نمودارها و تصاویر رابط کاربری | برای عکس‌های معمولی ممکن است حجم زیادی داشته باشد. |
| WebP | بسیاری از عکس‌ها، تصاویر محتوایی و فایل‌های دارای شفافیت | معمولا گزینه مناسبی برای انتشار تصاویر بهینه‌شده در وب است. |
| AVIF | عکس‌هایی که به فشرده‌سازی پیشرفته نیاز دارند | کیفیت و حجم خروجی به تصویر و تنظیمات وابسته است. پشتیبانی سرور و روش نمایش را بررسی کن. |
| SVG | لوگوها و آیکون‌های برداری ساده | برای عکس‌های واقعی مناسب نیست. فایل SVG باید از منبع قابل اعتماد باشد و امن مدیریت شود. |
| GIF | انیمیشن‌های ساده قدیمی | برای انیمیشن‌های تصویری، در صورت سازگاری، WebP یا ویدئو می‌تواند گزینه بهتری باشد. |
برای بیشتر عکس‌های مقاله و تصاویر محصولات، WebP نقطه شروع مناسبی است. با این حال، لازم نیست همه تصاویر را بدون بررسی به یک فرمت تبدیل کنی. اگر تصویر PNG دارای نوشته‌های ظریف یا شفافیت است، خروجی را از نظر وضوح بررسی کن. برای تصاویر مهم، نسخه‌های مختلف را مقایسه کن و فرمت نهایی را براساس کیفیت و حجم واقعی انتخاب کن.
مرحله دوم: پیش از آپلود، ابعاد تصویر را اصلاح کن
یکی از اشتباهات رایج این است که تصویر چند هزار پیکسلی مستقیما در یک بخش کوچک از صفحه استفاده می‌شود. برای مثال، اگر تصویر در محتوای مقاله با عرض حدود ۸۰۰ پیکسل نمایش داده می‌شود، آپلود یک تصویر ۴۰۰۰ پیکسلی ممکن است حجم غیرضروری ایجاد کند.
اندازه مناسب به عرض واقعی ستون محتوا، طراحی قالب و نمایشگرهای با تراکم پیکسلی بالا بستگی دارد. بنابراین، اعداد زیر نقطه شروع هستند، نه قانون ثابت برای همه سایت‌ها.
| نوع تصویر | ابعاد پیشنهادی برای شروع | توضیح |
|---|---|---|
| تصویر داخل مقاله | حدود ۸۰۰ تا ۱۲۰۰ پیکسل عرض | عرض نهایی را با ستون محتوای قالب هماهنگ کن. |
| تصویر شاخص مقاله | حدود ۱۲۰۰ × ۶۳۰ پیکسل | برای بسیاری از قالب‌ها و اشتراک‌گذاری اجتماعی نقطه شروع مناسبی است، اما نسبت تصویر قالب را بررسی کن. |
| تصویر بنر عریض | متناسب با عرض سکشن، گاهی تا حدود ۱۹۲۰ پیکسل | اگر تصویر در نمایشگرهای بزرگ استفاده می‌شود، ابعاد و کیفیت را آزمایش کن. |
| تصویر بندانگشتی | متناسب با اندازه کارت یا ابزارک | تصویر بزرگ را صرفا برای نمایش کوچک بارگذاری نکن، مگر اینکه قالب نسخه مناسب تولید کند. |
برای تعیین اندازه دقیق، صفحه را در دسکتاپ و موبایل بررسی کن. اگر تصویر در قالب به‌صورت واکنش‌گرا نمایش داده می‌شود، وردپرس می‌تواند با استفاده از نسخه‌های تولیدشده و ویژگی‌هایی مانند srcset و sizes فایل مناسب‌تری را برای دستگاه کاربر انتخاب کند. این قابلیت زمانی بهتر عمل می‌کند که قالب و کد تصویر مانع استفاده از نسخه‌های واکنش‌گرا نشوند.
مرحله سوم: فشرده‌سازی تصاویر با چند کلیک
پس از اصلاح ابعاد، نوبت فشرده‌سازی است. ابزارهای آنلاین به تو اجازه می‌دهند بدون نصب نرم‌افزار سنگین، حجم فایل را کاهش بدهی. نتیجه نهایی به تصویر اولیه و تنظیمات فشرده‌سازی بستگی دارد، بنابراین یک عدد ثابت برای حجم همه تصاویر در نظر نگیر.
روش کار با ابزار TinyPNG Now
بهینه‌سازی تصاویر وردپرس در TinyPNG Now برای کسانی مناسب است که می‌خواهند تصاویر جدید را بدون نصب افزونه پردازش کنند.
- تصویر اصلی را انتخاب کن و اگر لازم است، ابعاد آن را کاهش بده.
- ابزار TinyPNG Now را باز کن.
- تصویر را بارگذاری کن و در صورت وجود گزینه انتخاب فرمت، WebP یا فرمت مناسب دیگری را انتخاب کن.
- اگر ابزار اجازه تنظیم کیفیت می‌دهد، یک تنظیم متعادل انتخاب کن. کیفیت حدود ۷۰ تا ۸۰ درصد می‌تواند نقطه شروع آزمایش برای بسیاری از عکس‌ها باشد، اما نتیجه را با چشم بررسی کن.
- فایل خروجی را دریافت کن و آن را با نسخه اصلی مقایسه کن.
- اگر کیفیت قابل قبول است، نام فایل را توصیفی انتخاب کن و آن را در کتابخانه رسانه وردپرس بارگذاری کن.
- متن جایگزین تصویر را متناسب با محتوای واقعی آن بنویس.
توجه کن که گزینه‌های موجود، محدودیت‌های استفاده و نتیجه فشرده‌سازی ممکن است با به‌روزرسانی ابزار تغییر کنند. پیش از بارگذاری گروهی، چند تصویر را آزمایش کن. همچنین اگر تصاویر محرمانه یا دارای اطلاعات شخصی هستند، قبل از ارسال به ابزار آنلاین، سیاست حریم خصوصی آن را بررسی کن.
چگونه کیفیت تصویر را بررسی کنیم؟
به عدد حجم فایل اکتفا نکن. نسخه فشرده‌شده را در اندازه واقعی نمایش بررسی کن و به این موارد توجه داشته باش:
- آیا نوشته‌های داخل تصویر هنوز خوانا هستند؟
- آیا لبه‌ها، خطوط و جزئیات مهم واضح باقی مانده‌اند؟
- آیا در بخش‌های تیره یا دارای گرادیان، لکه و نوارهای ناخواسته دیده می‌شود؟
- آیا شفافیت پس‌زمینه حفظ شده است؟
- آیا حجم فایل به‌اندازه کافی کاهش یافته است؟
اگر کاهش حجم باعث افت محسوس کیفیت شده، میزان فشرده‌سازی را کمتر کن یا فرمت دیگری را امتحان کن. هدف، کوچک‌ترین فایل ممکن نیست، بلکه کمترین حجم با کیفیت قابل قبول است.
ابزارهای کاربردی برای بهینه‌سازی تصاویر
برای انتخاب ابزار مناسب، مشخص کن که می‌خواهی فقط یک تصویر را قبل از آپلود آماده کنی یا قصد داری صدها تصویر قدیمی کتابخانه رسانه را اصلاح کنی. این دو کار به راهکار یکسانی نیاز ندارند.
۱. Squoosh؛ مقایسه فرمت و کیفیت خروجی
Squoosh ابزاری تحت وب برای تغییر اندازه، تبدیل فرمت و مقایسه کیفیت و حجم تصویر است. مزیت آن این است که می‌توانی خروجی را قبل از استفاده بررسی کنی و تنظیمات را براساس تصویر تغییر بدهی.
۲. افزونه Smush؛ بهینه‌سازی در محیط وردپرس
Smush افزونه‌ای برای فشرده‌سازی تصاویر و مدیریت برخی تنظیمات مرتبط با آن‌هاست. این گزینه برای مدیرانی کاربرد دارد که می‌خواهند بخشی از فرایند بهینه‌سازی را داخل پیشخوان وردپرس انجام دهند.
پیش از انتخاب نسخه رایگان یا پولی، امکانات و محدودیت‌های فعلی افزونه را در صفحه رسمی آن بررسی کن. قابلیت‌هایی مانند تبدیل فرمت، بهینه‌سازی گروهی و تحویل WebP ممکن است به نسخه، تنظیمات یا سرویس جانبی وابسته باشند.
۳. ShortPixel؛ مناسب برای کتابخانه رسانه موجود
ShortPixel Image Optimizer ابزار دیگری برای فشرده‌سازی تصاویر، تولید نسخه‌های WebP یا AVIF و بهینه‌سازی گروهی است. اگر سایتت صدها یا هزاران تصویر قدیمی دارد، بررسی قابلیت بهینه‌سازی گروهی آن می‌تواند مفید باشد. قبل از انتخاب، تعداد تصاویر قابل پردازش، هزینه احتمالی و روش تحویل فایل‌های تبدیل‌شده را بررسی کن.
۴. EWWW Image Optimizer؛ گزینه‌ای دیگر برای وردپرس
EWWW Image Optimizer نیز برای بهینه‌سازی تصاویر در وردپرس استفاده می‌شود. امکانات، نیازهای سرور و قابلیت‌های مرتبط با فرمت‌های جدید را در مستندات رسمی بررسی کن، به‌ویژه اگر می‌خواهی تصاویر در سمت سرور پردازش شوند.
نکته مهم این است که چند افزونه را صرفا برای انجام یک کار مشابه هم‌زمان فعال نکنی. ترکیب افزونه‌های فشرده‌سازی، تبدیل فرمت، کش و بارگذاری تنبل ممکن است باعث پردازش تکراری، تصاویر تکراری یا ناسازگاری شود. ابتدا یک راهکار را انتخاب کن و خروجی واقعی سایت را بررسی کن.
بهینه‌سازی تصاویر قدیمی وردپرس بدون خراب‌شدن سایت
فشرده‌سازی پیش از آپلود برای تصاویر جدید مناسب است، اما مشکل تصاویر موجود را به‌تنهایی حل نمی‌کند. اگر کتابخانه رسانه سایت از قبل پر از فایل‌های حجیم است، می‌توانی از قابلیت بهینه‌سازی گروهی یک افزونه استفاده کنی یا تصاویر را به‌صورت انتخابی اصلاح کنی.
برای جلوگیری از ایجاد مشکل، این مراحل را دنبال کن:
- از فایل‌ها و پایگاه داده سایت نسخه پشتیبان تهیه کن.
- ابتدا چند تصویر کم‌ریسک را انتخاب کن و نتیجه بهینه‌سازی را بررسی کن.
- مطمئن شو افزونه، نسخه اصلی یا نسخه بهینه‌شده را به شکلی نگه می‌دارد که امکان بازگشت وجود داشته باشد.
- صفحات مهم، تصویر شاخص، گالری‌ها، تصاویر محصولات و نسخه موبایل را بررسی کن.
- در صورت تبدیل به WebP یا AVIF، بررسی کن که تصاویر در مرورگرهای مورد استفاده مخاطبان سایت درست نمایش داده می‌شوند.
- پس از تایید نتیجه، پردازش گروهی را در چند مرحله انجام بده و مصرف منابع سرور را زیر نظر بگیر.
هشدار: تصاویر را از کتابخانه رسانه حذف و دوباره بارگذاری نکن، مگر اینکه دقیقا بدانی کدام نوشته‌ها، صفحات، CSS یا بخش‌های قالب به آن‌ها وابسته‌اند. تغییر نام یا آدرس فایل هم می‌تواند لینک‌های موجود را بشکند. در بسیاری از موارد، بهینه‌سازی فایل موجود با حفظ آدرس آن کم‌ریسک‌تر است.
تنظیمات بارگذاری تصاویر که روی سرعت اثر می‌گذارند
بارگذاری تنبل یا Lazy Loading
بارگذاری تنبل یعنی تصاویر خارج از محدوده ابتدایی صفحه، زمانی دریافت شوند که کاربر به آن‌ها نزدیک می‌شود. این روش می‌تواند از دانلود زودهنگام تصاویر پایین صفحه جلوگیری کند. وردپرس به‌صورت پیش‌فرض از بارگذاری تنبل پشتیبانی می‌کند، بنابراین برای بسیاری از سایت‌ها نصب افزونه جداگانه فقط برای همین کار لازم نیست.
اما تصویر اصلی که در همان ابتدای بازدید دیده می‌شود، به‌خصوص اگر عنصر اصلی LCP باشد، نباید به‌اشتباه با loading="lazy" به تاخیر بیفتد. تصویر شاخص، بنر یا تصویر اصلی صفحه را با PageSpeed Insights بررسی کن و مطمئن شو تنظیمات افزونه کش یا بهینه‌سازی، بارگذاری آن را عقب نمی‌اندازند.
ابعاد تصویر را مشخص کن
مشخص بودن عرض و ارتفاع تصویر در کد صفحه به مرورگر کمک می‌کند فضای لازم را از قبل در نظر بگیرد و از جابه‌جایی ناخواسته محتوا جلوگیری شود. وردپرس معمولا ابعاد فایل‌های موجود در کتابخانه رسانه را در خروجی تصویر قرار می‌دهد. اگر تصاویر را با کد سفارشی یا از طریق قالب نمایش می‌دهی، این موضوع را بررسی کن.
تصویر اصلی صفحه را در اولویت قرار بده
همه تصاویر اهمیت یکسانی ندارند. اگر تصویر بزرگ ابتدای صفحه دیر نمایش داده می‌شود، فقط فشرده‌سازی تصاویر پایین صفحه مشکل را حل نمی‌کند. اندازه فایل، زمان پاسخ سرور، نحوه کش، اولویت درخواست تصویر و تنظیمات بارگذاری را بررسی کن. در صورت نیاز، با ابزارهای توسعه مرورگر یا گزارش PageSpeed Insights مشخص کن که تاخیر از کدام بخش ناشی می‌شود.
بهینه‌سازی تصاویر برای سئو
برای اینکه موتورهای جستجو موضوع تصاویر را بهتر درک کنند، باید تصویر مرتبط، نام فایل توصیفی و متن جایگزین مناسب داشته باشد. این اقدامات جایگزین محتوای باکیفیت نیستند، اما به درک تصویر و دسترس‌پذیری صفحه کمک می‌کنند.
نام فایل را توصیفی انتخاب کن
به‌جای نام‌هایی مانند IMG_1024.jpg، از نامی کوتاه و توصیفی استفاده کن که موضوع تصویر را بیان کند. برای مثال، اگر تصویر مربوط به فشرده‌سازی تصاویر وردپرس است، نامی مانند wordpress-image-optimization.webp انتخاب روشن‌تری است. لازم نیست نام فایل را با تکرار کلمات کلیدی طولانی کنی.
متن جایگزین یا Alt Text را درست بنویس
متن جایگزین باید محتوای واقعی یا کاربرد تصویر را توصیف کند. اگر تصویر صرفا تزئینی است، در بعضی موارد متن جایگزین خالی انتخاب مناسب‌تری است. برای تصویر آموزشی، توضیح کوتاهی بنویس که به کاربر کمک کند موضوع تصویر را بفهمد. افزودن اجباری کلمه کلیدی به همه متن‌های جایگزین یا تکرار عبارت‌های مشابه، روش مناسبی نیست.
تصویر را در متن مرتبط قرار بده
تصویر را در نزدیکی بخشی قرار بده که درباره همان موضوع توضیح می‌دهد. اگر تصویر یک مرحله از آموزش را نشان می‌دهد، آن را کنار توضیح همان مرحله قرار بده و در صورت نیاز، زیرنویسی روشن اضافه کن. این کار هم برای مخاطب مفید است و هم زمینه بیشتری برای درک تصویر فراهم می‌کند.
از تصاویر باکیفیت و قابل دسترسی استفاده کن
تصویر باید برای کاربران و موتورهای جستجو قابل دسترسی باشد. از مسدود کردن ناخواسته فایل‌های تصویری در تنظیمات سایت یا قوانین دسترسی جلوگیری کن و مطمئن شو تصاویر مهم در صفحه قابل مشاهده‌اند. اگر از تصاویر دارای مجوز استفاده می‌کنی، شرایط استفاده و الزامات انتساب منبع را رعایت کن.
چطور نتیجه بهینه‌سازی تصاویر را اندازه‌گیری کنیم؟
پس از بهینه‌سازی، فقط به تغییر امتیاز یک تست سرعت اکتفا نکن. چند معیار را قبل و بعد از تغییر بررسی کن تا مشخص شود چه چیزی بهتر شده و آیا مشکل اصلی صفحه برطرف شده است.
- Google PageSpeed Insights: بررسی شاخص‌های عملکرد، از جمله LCP و مشکلات مرتبط با تصاویر.
- GTmetrix: بررسی درخواست‌های صفحه، حجم فایل‌ها و زمان بارگذاری منابع.
- ابزار توسعه مرورگر: مشاهده آدرس، ابعاد و حجم تصاویری که واقعا به مرورگر ارسال می‌شوند.
- بررسی دستی: کنترل وضوح تصاویر، نمایش در موبایل، تصویر شاخص و گالری‌ها پس از اعمال تغییرات.
برای مقایسه منصفانه، تا حد امکان از یک صفحه، دستگاه، شرایط شبکه و تنظیمات تست مشابه استفاده کن. اگر کش سایت یا CDN داری، وضعیت کش را هم در نظر بگیر. بهبود حجم تصاویر لزوما به همان نسبت باعث افزایش امتیاز PageSpeed نمی‌شود، چون عملکرد صفحه به عوامل دیگری مانند CSS، جاوااسکریپت، فونت‌ها و پاسخ سرور هم وابسته است.
چک‌لیست نهایی بهینه‌سازی تصاویر وردپرس
پیش از انتشار هر نوشته یا صفحه جدید، این فهرست را مرور کن:
- ابعاد تصویر متناسب با محل نمایش انتخاب شده است.
- فرمت فایل با نوع تصویر و نیاز به شفافیت سازگار است.
- فشرده‌سازی انجام شده و کیفیت خروجی بررسی شده است.
- نام فایل کوتاه و توصیفی است.
- متن جایگزین، محتوای واقعی تصویر را توضیح می‌دهد.
- تصاویر در موبایل و دسکتاپ درست نمایش داده می‌شوند.
- تصویر اصلی صفحه به‌اشتباه تنبل بارگذاری نمی‌شود.
- ابعاد تصویر در خروجی صفحه مشخص است.
- پس از انتشار، عملکرد صفحه با ابزارهای اندازه‌گیری بررسی می‌شود.
جمع‌بندی
بهینه‌سازی تصاویر سایت با چند اقدام ساده شروع می‌شود: انتخاب ابعاد درست، فشرده‌سازی متعادل، استفاده از فرمت مناسب و تنظیم صحیح بارگذاری. برای تصاویر جدید، ابزارهای آنلاین می‌توانند نیاز به افزونه را برطرف کنند. برای تصاویر قدیمی، بهینه‌سازی گروهی ممکن است سریع‌تر باشد، اما باید با نسخه پشتیبان و بررسی مرحله‌ای انجام شود.
بعد از اعمال تغییرات، کیفیت تصاویر را بررسی کن و با PageSpeed Insights یا GTmetrix عملکرد صفحه را بسنج. اگر همچنان سرعت پایین است، تصویر اصلی صفحه، منابع مسدودکننده رندر، فونت‌ها و پاسخ سرور را هم بررسی کن. رویکرد درست این است که مشکل واقعی را اندازه‌گیری کنی و سپس راهکار مناسب را اجرا کنی.
اگر بهینه‌سازی تصاویر بخشی از یک مشکل بزرگ‌تر در سرعت سایت است، می‌توانی جزئیات عملکرد سایتت را بررسی کنی و برای رفع گلوگاه‌های باقی‌مانده از خدمات افزایش سرعت وردپرس سایت افزون کمک بگیری.
