بگذارید با یک عدد شروع کنم که اهمیت موضوع را بهتر نشان میدهد: طبق آمار، حدود ۳۶ درصد سایتها هنوز تصاویر با حجم بیش از حد را در صفحات خود استفاده میکنند و همین موضوع باعث کاهش سرعت سایت میشود. یعنی بخش قابلتوجهی از وب، هنوز یکی از سادهترین فرصتهای بهبود سئوی داخلی را نادیده میگیرد.
تصاویر یک شمشیر دولبه هستند: از یک طرف تجربه کاربر را بهتر میکنند و به درک محتوا کمک میکنند، اما از طرف دیگر اگر بهینه نباشند، میتوانند به یکی از اصلیترین عوامل کندی سایت تبدیل شوند.
در این راهنما یاد میگیرید چطور تصاویر را بهینه کنید؛ به شکلی که هم کیفیت بصری خود را حفظ کنند، هم سرعت سایت را کاهش ندهند و هم برای موتورهای جستجو قابلفهمتر باشند.
چرا بهینهسازی تصاویر مهم است؟
بهینهسازی تصاویر روی سه چیز اثر مستقیم دارد:
- سرعت سایت و Core Web Vitals: تصاویر معمولا سنگینترین بخش یک صفحه هستند. تصویر بهینهنشده، مستقیما بر معیار LCP (سرعت بارگذاری) آسیب میزند.
- سئوی تصاویر و ترافیک: بخشی از جستجوهای کاربران از طریق Google Images انجام میشود. تصویری که درست بهینه شده باشد، شانس بیشتری برای دیدهشدن و دریافت ترافیک ارگانیک دارد
- دسترسیپذیری: متن جایگزین (Alt) به موتورهای جستجو و همچنین کاربرانی که امکان مشاهده تصویر را ندارند کمک میکند تا مفهوم تصویر را بهتر درک کنند.
فرمت درست: AVIF، WebP یا JPEG؟
- WebP: فرمت استاندارد و پشتیبانیشده در بیشتر مرورگرهای مدرن. این فرمت معمولا حدود ۲۵ تا ۳۵ درصد حجم کمتری نسبت به JPEG دارد، بدون اینکه افت کیفیت محسوسی ایجاد کند
- AVIF: یکی از جدیدترین و بهینهترین فرمتهای تصویری. در بسیاری از شرایط میتواند تا حدود ۵۰ درصد حجم کمتری نسبت به JPEG داشته باشد، هرچند پشتیبانی آن در برخی مرورگرهای قدیمی محدودتر است.
- JPEG و PNG:فرمتهای قدیمیتر که هنوز در بعضی شرایط کاربرد دارند؛ برای مثال PNG زمانی که به شفافیت تصویر نیاز دارید، انتخاب مناسبی است.
استک توصیهشدهی امروز: در حالت ایدهآل، AVIF را بهعنوان گزینهی اول، WebP را بهعنوان جایگزین و JPEG/PNG را بهعنوان فرمت پشتیبان استفاده کنید. این فرایند معمولا با تگ <picture> انجام میشود تا مرورگر بتواند مناسبترین فرمت را انتخاب کند.
<picture>
<source srcset=”image.avif” type=”image/avif”>
<source srcset=”image.webp” type=”image/webp”>
<img src=”image.jpg” alt=”توضیح تصویر” width=”1200″ height=”800″>
</picture>
فشردهسازی تصاویر: مهمترین قدم برای کاهش حجم
بعد از انتخاب فرمت مناسب، فشردهسازی (Compression) مهمترین مرحله برای کاهش حجم تصویر است. یک نکتهی عملی : فشردهسازی با کیفیت حدود ۸۰ تا ۹۰ درصد، در بسیاری از موارد میتواند حجم فایل را تا ۷۰ یا ۸۰ درصد کاهش دهد، بدون اینکه افت کیفیت محسوسی برای کاربر ایجاد کند.
- هدف: برای بیشتر تصاویر، سعی کنید حجم هر تصویر زیر ۱۰۰ کیلوبایت بماند.
- ابزارها: ابزارهای رایگانی مثل Squoosh و TinyPNG این کار را بهسادگی انجام میدهند.
- قانون مهم: یک عکس ۴ مگابایتی مستقیم از دوربین موبایل را هرگز مستقیم آپلود نکنید.
اما نکتهی مهم: کورکورانه همهچیز را تا کوچکترین حجم ممکن فشرده نکنید؛ تعادل بین حجم و کیفیت را حفظ کنید.
اشتباه بزرگی که به Core Web Vitals آسیب میزند
اینجا یکی از مهمترین نکات فنی مقاله است؛ جایی که خیلی از سایتها ناخواسته با یک تنظیم اشتباه، به عملکرد سئوی خود آسیب میزنند.
هرگز تصویر اصلی بالای صفحه تصویر LCP را lazy-load نکنید!
بارگذاری تنبل (Lazy Loading) یعنی تصاویر فقط زمانی بارگذاری شوند که کاربر به بخش مربوط به آنها برسد. این روش برای تصاویر پایین صفحه بسیار کاربردی است و میتواند به کاهش زمان بارگذاری کمک کند. اما یک نکته مهم دارد:
اگر تصویر بزرگ و اصلی بالای صفحه (مثل تصویر هیرو) را هم lazy-load کنید، بارگذاری آن به تاخیر میافتد و مستقیما روی معیار LCP تاثیر منفی میگذارد؛ یعنی دقیقا همان معیاری که گوگل برای سنجش سرعت بارگذاری بخش اصلی صفحه بررسی میکند.
راه درست:
- تصاویر پایین صفحه را با loading=”lazy” بارگذاری تنبل کنید.
- تصویر اصلی بالای صفحه را هرگز lazy نکنید؛ بهجایش از fetchpriority=”high” استفاده کنید تا زودتر بارگذاری شود.
متن جایگزین (Alt): برای انسان بنویسید، نه برای ربات
متن جایگزین (Alt Text) توضیحی است که وقتی تصویر بارگذاری نمیشود یا کاربر نمیتواند ببیند ، بهجای تصویر ارائه میشود. این بخش هم برای دسترسیپذیری اهمیت دارد و هم به گوگل کمک میکند مفهوم و زمینهی تصویر را بهتر درک کند.
قواعد Alt خوب:
- کاربرد و context را توصیف کنید، نه کلمهی کلیدی: Alt باید بگوید تصویر چه چیزی را نشان میدهد و چه نقشی دارد. مثلا «کفش کوهنوردی قهوهای روی مسیر خاکی» توصیفی و مناسب است.
- از انباشت کلمهی کلیدی پرهیز کنید: قرار دادن کلمات کلیدی پشت سر هم در Alt، نهتنها ارزش اضافهای ایجاد نمیکند، بلکه میتواند بهعنوان رفتار اسپم شناخته شود..
- تصاویر تزئینی، Alt خالی بگیرند: برای تصاویری که فقط جنبهی ظاهری دارند و اطلاعاتی به محتوا اضافه نمیکنند، از alt=”” استفاده کنید تا ابزارهای صفحهخوان آنها را نادیده بگیرند.
نام فایل: یک فرصت سادهی ازدسترفته
یک نکتهی ساده که خیلی از سایتها نادیده میگیرند: نام فایل تصویر هم میتواند یک سیگنال برای درک بهتر موضوع تصویر توسط گوگل باشد.
- بد: IMG_0238.jpg — هیچ سیگنالی نمیدهد.
- خوب: kafsh-koohnavardi-ghahvei.jpg — با کلمات واقعی و خط تیره.
قبل از آپلود، فایلها را با نام توصیفی و خط تیره (نه آندرلاین) نامگذاری کنید.
تصاویر و هوش مصنوعی چندوجهی
یک نکتهی جدید که اهمیت متادیتای تصویر را بیشتر کرده، ظهور مدلهای هوش مصنوعی چندوجهی (Multimodal) است؛ مدلهایی که میتوانند همزمان متن و تصویر را تحلیل کنند. این سیستمها برای درک بهتر تصاویر، به سیگنالهایی مثل متن جایگزین، عنوان تصویر، نام فایل و دادههای ساختاریافته توجه میکنند.
این اطلاعات به موتورهای جستجوی جدید کمک میکنند مفهوم تصویر و ارتباط آن با محتوای صفحه را بهتر درک کنند.
بنابراین، بهینهسازی تصاویر فقط برای جستجوی سنتی گوگل نیست؛ بلکه میتواند به دیدهشدن بهتر محتوا در پلتفرمهای مبتنی بر هوش مصنوعی هم کمک کند.
سخن آخر
بهینهسازی تصاویر یکی از سادهترین و در عین حال پربازدهترین اقدامات سئو است؛ البته به شرطی که به شکل درست انجام شود.
مهمترین چیزهایی که باید با خودتان ببرید:
- از فرمتهای مدرن AVIF → WebP → JPEG با تگ <picture> استفاده کنید و تلاش کنید حجم تصاویر زیر ۱۰۰KB باقی بماند.
- تصاویر پایین صفحه را lazy کنید، اما هرگز تصویر LCP بالای صفحه را lazy نکنید؛ چون میتواند روی سرعت بارگذاری و تجربه کاربر تاثیر منفی بگذارد.
- همیشه برای تصاویر width و height مشخص کنید تا از پرش چیدمان (CLS) جلوگیری شود. را برای درک بهتر
- Alt تصویر توسط کاربر و موتور جستجو بنویسید و نامفایل را توصیفی و مرتبط انتخاب کنید.
اگر میخواهید بدانید تصاویر سایتتان باعث کندی صفحات شدهاند یا از نظر سئو بهدرستی بهینه شدهاند، این یکی از مواردی است که در یک بررسی فنی و سئوی داخلی بررسی میکنیم.
سوالات متداول درباره بهینه سازی تصاویر برای سئو
بهترین فرمت تصویر برای سئو کدام است؟
استک توصیهشدهی امروز AVIF → WebP → JPEG/PNG با تگ <picture> است. WebP استاندارد فعلی و سازگار با همه مرورگرهاست و AVIF تا ۵۰٪ سبکتر است اما پشتیبانیاش در بعضی مرورگرهای قدیمی کامل نیست.
آیا باید همهی تصاویر را lazy-load کنم؟
خیر. تصاویر پایین صفحه را lazy کنید، اما هرگز تصویر اصلی بالای صفحه (تصویر LCP) را lazy نکنید، چون به Core Web Vitals آسیب میزند. برای آن از fetchpriority=”high” استفاده کنید.
متن جایگزین (Alt) را چطور بنویسم؟
کاربرد و محتوای تصویر را توصیف کنید، نه اینکه کلمهی کلیدی انبار کنید. برای تصاویر صرفاً تزئینی از alt خالی (alt=””) استفاده کنید.
چرا width و height تصویر مهم است؟
مشخصکردن ابعاد تصویر در HTML از پرش ناگهانی چیدمان (CLS) هنگام بارگذاری جلوگیری میکند، که یکی از معیارهای Core Web Vitals است.
حجم ایدهآل تصویر چقدر است؟
برای بیشتر کاربردها، سعی کنید حجم هر تصویر زیر ۱۰۰ کیلوبایت بماند. فشردهسازی با کیفیت ۸۰ تا ۹۰ درصد معمولاً حجم را زیاد کم میکند بدون افت محسوس کیفیت.
