آموزش گام‌به‌گام بهینه‌سازی تصاویر سئو؛ از فرمت تا متن جایگزین

تصویر اولین چیزی است که کاربر در صفحهٔ محصول یا مقاله می‌بیند و غالباً آخرین چیزی است که کسی به آن نگاه فنی می‌کند. عکاسی می‌شود، خروجی گرفته می‌شود، مستقیم در کتابخانهٔ رسانه آپلود می‌شود — و صفحه چند مگابایت سنگین‌تر از حد لازم می‌ماند. کاربرِ اینترنت ایران با پهنای باند متغیر، هزینهٔ همین سنگینی را با انتظار طولانی‌تر می‌پردازد و بخشی از بازدیدها پیش از دیدن تصویر تمام می‌شود.

سهم وردپرس در این ماجرا هم بزرگ است: W3Techs حدود ۴۳ درصد وب‌سایت‌های جهان را وردپرسی می‌داند (تاریخ گردآوری: آبان ۱۴۰۵) و در این سهم، کتابخانهٔ رسانه معمولاً بزرگ‌ترین پوشهٔ هر هاست است. بهینه‌سازی تصاویر، هم تجربهٔ کاربر و هم خزش را بهتر می‌کند؛ سئوی صفحه‌ای که تصاویرش شلخته است، روی شانه‌های خودش نمی‌ایستد.

بهینه‌سازی تصاویر سئو یعنی چه؟

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

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

چهار ستون فنی: فرمت، ابعاد، فشرده‌سازی و بارگذاری تنبل

ستون اول، فرمت است: عکس رنگی پیوسته معمولاً در JPG یا WebP سبک‌تر است؛ گرافیک با متن و شفافیت به PNG می‌آید؛ آیکون و لوگو به‌عنوان وکتور با SVG. ستون دوم، ابعاد: تصویری که در قالب ۸۰۰ پیکسل نمایش داده می‌شود ولی ۴۰۰۰ پیکسل آپلود شده، چهار برابر پیکسل بی‌کار حمل می‌کند. خروجی را در ابعادی بگیرید که واقعاً نمایش داده می‌شود، نه ابعاد دوربین.

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

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

آموزش گام‌به‌گام: از فایل خام تا آپلود

قدم اول، برش در مبدأ است: قبل از هر کاری تصویر را در ابعاد نهایی نمایش ذخیره کنید؛ هیچ فشرده‌سازمی حجم پیکسل‌های اضافه را جبران نمی‌کند. قدم دوم، انتخاب فرمت با جدول بخش بعد: عکس محصول و عکس مقاله‌ای معمولاً WebP یا JPG، گرافیک و اینفوگرافیک با متن PNG یا WebP، آیکون و لوگو SVG. قدم سوم، فشرده‌سازی با ابزار ثابت تیم — یک ابزار انتخاب کنید و سطحش را یک‌بار تنظیم کنید تا خروجی همهٔ تصاویر یکدست بماند.

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

لایهٔ معنایی؛ متن جایگزین و نام فایل

متن جایگزین، جای تصویر را برای موتور جستجو و برای کاربری که تصویر برایش لود نشده پر می‌کند. قاعدهٔ نوشتنش ساده است: تصویر را در یک جملهٔ کوتاه و صادقانه توصیف کنید — «کفش دویدن مردانه مدل X روی زمین دویدن» — نه فهرست کلمه کلیدی و نه جای خالی. اگر تصویر تزئینی است، متن جایگزین خالی تصمیم درستی است؛ توصیفِ تزئین، اطلاعات کاذب تولید می‌کند.

نام فایل هم همان توصیف کوتاه است، پیش از آپلود: «kafsh-doidan-mardane-x.webp» بهتر از «IMG_2041.webp» است. متن اطراف تصویر را هم جدی بگیرید: زیرنویس، پاراگراف قبل و بعد و فصلِ‌ای که تصویر در آن است، زمینهٔ معنایی تصویر را می‌سازند. تصویری که حرفی از متن صفحه نمی‌زند، در بهترین حالت تزئین است؛ تصویری که متن آن را تکرار و روشن می‌کند، جزء محتوا می‌شود.

جدول تصمیم فرمت‌ها برای هر نوع تصویر

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

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

دو حاشیهٔ مهم روی جدول. اول، قالب جدیدتر همیشه بهتر نیست اگر پشتیبانی مرورگر هدف شما ناقص بماند؛ نسخهٔ جایگزین را هم کنار بگذارید تا مرورگر قدیمی بی‌تصویر نماند. دوم، فرمت را برای هر تصویر یک‌بار انتخاب کنید و در روال تیم ثابت نگه دارید؛ تغییر قالبِ تک‌تک تصاویر در میانهٔ پروژه، کتابخانه را ناهمگن و پایش را سخت می‌کند.

و یک نکته برای کتابخانه‌های قدیمی: لازم نیست یک‌شبه تمام آرشیو را بازبهینه کنید. صفحه‌های پرترافیک و پرنمایش را اول ببینید — آن‌ها را در سرچ‌کنسول و ابزار سرعت پیدا کنید — و فهرست تصاویر سنگین‌شان را با همین روال اصلاح کنید. به تجربهٔ ما اصلاح همان چند صفحهٔ پربازدید، عملاً بیشترِ اثر قابل‌لمس را می‌آورد؛ آرشیوی که بازدید ندارد، با احترام می‌تواند منتظر بماند.

شش خطای رایج تصاویر سایت

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

خطای پنجم، PDF منو یا کاتالوگ به‌جای تصویر و متن واقعی؛ فایل سنگینی است که نه متنش خوانده می‌شود نه روی موبایل راحت باز می‌شود. خطای ششم، تصویر حاوی متن مهم — قیمت، تاریخ، آفر — که در اسکرین‌های موبایل ناخوانا می‌شود و موتور هم متنش را مثل متن واقعی نمی‌بیند؛ این‌ها را متن HTML بنویسید. اگر تصویر برند و کاتالوگ زیادی دارید، الگوی محتوای محصول را در هاب محتوای محصول و کاتالوگ دنبال کنید.

جمع‌بندی؛ بهینه‌سازی را به روال آپلود تبدیل کنید

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

رصد ما، رشد شما.