وقتی صحبت از سئو تکنیکال می شود، اکثر افراد به سراغ کدهای پیچیده می روند، اما حقیقت این است که گاهی اوقات، بزرگ ترین مانع رشد سایت شما، همین تصاویر به ظاهر ساده هستند. تصاویر سنگین یا با ابعاد اشتباه، مانند وزنه هایی هستند که به پای موشک سئو شما بسته شده اند و اجازه نمی دهند سایت شما در نتایج گوگل اوج بگیرد.
بیشتر بخوانید: مهم ترین فاکتورهای سئو تکنیکال
چرا تفاوت سایز آپلود و سایز نمایش یک فاجعه است؟
بیایید با یک مثال ساده شروع کنیم. تصور کنید شما یک عکس با ابعاد ۴۰۰۰ در ۲۰۰۰ پیکسل دارید که حجم آن حدود ۲ مگابایت است. اما در طراحی سایت شما، این عکس قرار است در یک کادر کوچک در کنار متن نمایش داده شود که ابعادش فقط ۴۰۰ در ۲۰۰ پیکسل است.
اتفاقی که می افتد این است: مرورگر کاربر (کروم، فایرفاکس یا گوشی موبایل) مجبور است تمام آن ۲ مگابایت دیتا را دانلود کند و سپس با استفاده از قدرت پردازش گوشی یا سیستم کاربر، آن را کوچک کند تا در آن کادر ۴۰۰ پیکسلی جا شود. این یعنی:
- هدر رفتن حجم اینترنت کاربر.
- کند شدن زمان لود صفحه (Page Load Time).
- فشار به پردازنده دستگاه کاربر.
- نمره منفی در شاخص های Core Web Vitals گوگل، به خصوص شاخص LCP.
در سئو راکت، ما به دنبال شفافیت و نتیجه هستیم. پس بیایید یاد بگیریم چطور این مشکل را یک بار برای همیشه حل کنیم.
گام اول: شناسایی ابعاد واقعی (Natural Size) در مقابل ابعاد نمایشی (Rendered Size)
اولین قدم این است که بفهمیم در حال حاضر چه اتفاقی در سایت ما می افتد. ما دو مفهوم داریم:
- Intrinsic Size (سایز اصلی): ابعاد واقعی عکسی که شما در هاست خود آپلود کرده اید.
- Rendered Size (سایز نمایشی): ابعادی که مرورگر بر اساس کدهای CSS سایت شما، عکس را در آن اندازه نشان می دهد.
اگر سایز اصلی خیلی بزرگ تر از سایز نمایشی باشد، شما با مشکل رو به رو هستید.
چطور این اعداد را پیدا کنیم؟
ساده ترین راه استفاده از ابزار Inspect Element مرورگر است.
- وارد صفحه مورد نظر در سایت خود شوید.
- کلیدهای ترکیبی Ctrl + Shift + C را در ویندوز (یا Cmd + Shift + C در مک) فشار دهید.
- نشانگر ماوس را روی تصویر مورد نظر ببرید.
- یک پنجره کوچک باز می شود که دو عدد را به شما نشان می دهد. مثلا می نویسد: 500 x 300 px (rendered to 250 x 150 px).
در این مثال، عکس شما دو برابر بزرگ تر از چیزی است که نیاز دارید!
گام دوم: استراتژی تغییر سایز تصاویر
حالا که فهمیدید کدام عکس ها مشکل دارند، نوبت به اصلاح آن ها می رسد. در سئو راکت، ما به برنامه ریزی معتقدیم. شما نباید بی گدار به آب بزنید.
۱. اولویت بندی کنید
اگر سایت شما هزاران عکس دارد، لازم نیست از همین امروز همه را اصلاح کنید. اول به سراغ عکس هایی بروید که در تمام صفحات تکرار می شوند، مثل:
- لوگو سایت.
- آیکون های فوتر.
- تصاویر شاخص در صفحات اصلی و پربازدید.
- بنرهای بالای صفحات (Hero Images).
۲. استفاده از ابزارهای ادیت
برای تغییر سایز، ابزارهای زیادی وجود دارد. اگر می خواهید حرفه ای عمل کنید، فتوشاپ گزینه خوبی است. اما اگر به دنبال سرعت هستید، ابزارهای آنلاین مثل Squoosh (متعلق به گوگل) یا Bulk Resize Photos عالی هستند. شما باید ابعاد عکس را دقیقا به همان اندازه ای برسانید که در مرحله قبل (Rendered Size) مشاهده کردید.
گام سوم: تاثیر بر سئو و تجربه کاربری
چرا ما در سئو راکت روی این موضوع تاکید داریم؟ چون گوگل در سال های اخیر به شدت روی تجربه کاربری یا همان User Experience (UX) حساس شده است. وقتی کاربری با موبایل وارد سایت شما می شود و مجبور است برای دیدن یک لوگوی کوچک، دیتای یک عکس با کیفیت چاپ را دانلود کند، احتمالا قبل از باز شدن سایت، صفحه را می بندد.
این یعنی افزایش Bounce Rate (نرخ پرش) و کاهش زمان ماندگاری در سایت. هر دو این موارد سیگنال های منفی به گوگل می فرستند که سایت شما برای کاربر بهینه نیست. با اصلاح ابعاد تصاویر، سرعت لود اولیه (First Contentful Paint) به شدت بهبود می یابد و موشک شما با سرعت بیشتری به صفحه اول گوگل می رسد.
نکات تکمیلی برای حرفه ای ها
فقط به تغییر ابعاد بسنده نکنید. این نکات را هم در نظر بگیرید:
استفاده از فرمت های نسل جدید
بعد از اینکه ابعاد عکس را درست کردید، حتما آن را به فرمت WebP تبدیل کنید. این فرمت حجم عکس را بدون افت کیفیت تا ۳۰ درصد دیگر کاهش می دهد.
ویژگی Lazy Loading
مطمئن شوید که تصاویر سایت شما دارای ویژگی loading=”lazy” هستند. این کار باعث می شود تصاویر فقط زمانی دانلود شوند که کاربر به آن ها می رسد. ترکیب این ویژگی با ابعاد درست تصاویر، معجزه می کند.
رعایت تناسب در نمایش موبایل
دقت کنید که تصاویر در نسخه موبایل سایت هم به درستی نمایش داده شوند. گاهی یک عکس در دسکتاپ سایز مناسبی دارد اما در موبایل بسیار بزرگ یا خیلی کوچک دیده می شود. استفاده از کدهای ریسپانسیو (Responsive) برای تصاویر الزامی است.
چک لیست نهایی برای بهینه سازی ابعاد تصاویر
ما در سئو راکت عاشق چک لیست هستیم چون کارها را ساده و قابل اجرا می کنند. این چک لیست را برای تصاویر خود اجرا کنید:
- ابزار Inspect را باز کنید (Ctrl + Shift + C).
- ابعاد Rendered را با Intrinsic مقایسه کنید.
- اگر تفاوت بیش از ۲۰ درصد بود، عکس را دانلود کنید.
- عکس را به ابعاد دقیق نمایش تغییر سایز دهید.
- عکس را با فرمت WebP ذخیره کنید.
- عکس جدید را جایگزین عکس قبلی در سایت کنید.
- مجددا با ابزار Inspect چک کنید که هر دو عدد (Rendered و Intrinsic) به هم نزدیک باشند.
نتیجه گیری
سئو یک دنیای تاریک و پیچیده نیست؛ بلکه مجموعه ای از تصمیم های هوشمندانه و داده محور است. بهینه سازی ابعاد تصاویر شاید در ظاهر کوچک به نظر برسد، اما وقتی این کار را برای تمام اجزای سایت انجام می دهید، مجموع این تغییرات کوچک منجر به یک جهش بزرگ در سرعت و رتبه سایت شما می شود.
ما در سئو راکت معتقدیم که هر مدیر کسب و کار و هر سئو کاری باید بتواند این موارد فنی را به سادگی درک و اجرا کند. پس همین حالا دست به کار شوید و اولین تصویر سایت خود را بهینه کنید. سرعت سایت شما، سوخت اصلی موشک سئو شماست.
همین حالا عضو خانواده سئو راکت شوید و با استفاده از آموزش های تخصصی ما، رتبه های برتر گوگل را فتح کنید.
