۱چرا تصاویر بزرگترین عامل کند شدن بیشتر صفحات هستند؟
روی بیشتر صفحات وب، تصاویر بهتنهایی سهم بزرگتری از حجم کل صفحه دارند تا متن، CSS و جاوااسکریپت روی هم؛ همین یعنی کوچکترین بیدقتی در فرمت یا اندازهٔ یک تصویر، مستقیم روی زمان بارگذاری کل صفحه اثر میگذارد.
خبر خوب این است که تصویر، برخلاف بسیاری از مشکلات فنی دیگر، معمولاً بدون نیاز به تغییر کد یا طراحی قابلرفع است؛ فقط باید فرمت، حجم و اندازهٔ درست انتخاب شود.
۲فرمت تصویر را درست انتخاب کنید: JPEG، PNG، WebP یا AVIF؟
هر فرمت برای یک نوع محتوا ساخته شده؛ JPEG برای عکسهای واقعی با رنگهای پیوسته مناسب است، PNG برای تصاویری با پسزمینهٔ شفاف یا رنگهای تخت مثل لوگو و آیکون، و فرمتهای جدیدتر مثل WebP و AVIF با کیفیت تقریباً یکسان، حجمی بهمراتب کمتر از هر دو نمونهٔ قدیمیتر تولید میکنند.
رایجترین اشتباه، استفاده از PNG برای عکسهای واقعی است؛ چون PNG بدونافت کار میکند، همان عکس با فرمت PNG میتواند چند برابر نسخهٔ JPEG یا WebP معادلش حجم داشته باشد، بدون اینکه کیفیت قابلمشاهدهای اضافه کند.
۳فشردهسازی افتدار در برابر بدونافت
فشردهسازی افتدار بخشی از دادههای تصویر را که چشم انسان بهسختی متوجهشان میشود حذف میکند تا حجم فایل بهشدت کم شود؛ فشردهسازی بدونافت هیچ دادهای را حذف نمیکند، پس کاهش حجمش هم بسیار محدودتر است.
برای بیشتر عکسهای وب، فشردهسازی افتدار با کیفیت متوسط تا بالا، تفاوت قابلمشاهدهای در ظاهر تصویر ایجاد نمیکند اما میتواند حجم فایل را بهطور چشمگیری کاهش دهد؛ فقط برای تصاویری که جزئیات ریز و حیاتی دارند، مثل نمودار یا اسکرینشات متنی، بدونافت انتخاب بهتری است.
۴اندازهٔ واقعی فایل را با اندازهٔ نمایشدادهشده یکی کنید
آپلود یک عکس با ابعاد اصلی دوربین یا موبایل، در حالی که در طراحی صفحه فقط قابی کوچک برایش در نظر گرفته شده، یعنی مرورگر مجبور است فایلی چند برابر بزرگتر از نیاز واقعی را دانلود کند و بعد در قابی کوچک کوچکش کند.
قاعدهٔ ساده این است که ابعاد فایل تصویر باید نزدیک به بزرگترین اندازهای باشد که واقعاً روی صفحه نمایش داده میشود، نه ابعاد اصلی عکس گرفتهشده؛ تغییر اندازهٔ تصویر قبل از آپلود، یکی از سادهترین و پراثرترین اقدامهاست.
۵srcset و تصاویر واکنشگرا: یک فایل برای همهٔ صفحهنمایشها کافی نیست
همان تصویری که روی مانیتور بزرگ دسکتاپ در عرض کامل نمایش داده میشود، روی گوشی موبایل در عرضی چند برابر کوچکتر دیده میشود؛ فرستادن یک فایل واحد و بزرگ به هر دو دستگاه یعنی کاربر موبایل چیزی بهمراتب سنگینتر از نیازش دانلود میکند.
ویژگی srcset به مرورگر اجازه میدهد از میان چند نسخهٔ مختلف یک تصویر، مناسبترین اندازه را برای عرض واقعی صفحهنمایش کاربر انتخاب کند؛ همین یک تنظیم میتواند حجم دانلود تصویر روی موبایل را بهطور محسوسی کاهش دهد.
۶لود تنبل درست: کدام تصویر باید فوری لود شود؟
لود تنبل یعنی تصاویری که هنوز در دید کاربر نیستند، تا زمان اسکرولشدن به آن بخش، دانلود نمیشوند؛ این کار حجم اولیهٔ لازم برای نمایش صفحه را کم میکند.
اما این قانون یک استثنای مهم دارد: تصویر اصلی بالای صفحه، همانی که معمولاً اولین چیزی است که کاربر میبیند، هرگز نباید لود تنبل شود؛ لود تنبل روی همین تصویر باعث میشود نمایش آن بهجای سریعتر شدن، دیرتر اتفاق بیفتد.
۷ابزارهای رایگان فشردهسازی که همین امروز میتوانید استفاده کنید
برای فشردهسازی دستی و سریع بدون نیاز به دانش فنی، چند ابزار آنلاین رایگان میتوانند تصویر را در همان فرمت اصلی یا فرمتهای مدرنتر خروجی بگیرند، بدون افت کیفیت قابلمشاهده.
برای سایتهای وردپرسی، افزونههای فشردهسازی خودکار وجود دارند که هر تصویر تازهآپلودشده را بدون دخالت دستی بهینه میکنند؛ این روش برای سایتهایی که مرتب محتوای تصویری جدید منتشر میکنند، پایدارتر از فشردهسازی دستی هر عکس است.
۸چطور بفهمید کدام تصاویر سایت شما واقعاً مشکل دارند
با دهها یا صدها تصویر روی یک سایت، پیداکردن دستی تکتک فایلهای سنگین یا فرمتهای نادرست عملاً غیرممکن است؛ باید فهرستی از حجم واقعی هر تصویر روی صفحات مهم سایت دید، نه فقط حدس زد کدامیک بزرگ است.
بهترین راه، یک بررسی خودکار است که حجم و فرمت هر تصویر صفحه را میبیند و مشخص میکند کدامها از حد معقول سنگینتر هستند.
بهترین راه دیدن دقیق اینکه کدام تصاویر سایت شما سنگینترند، یک تحلیل سئو است که حجم، فرمت و ابعاد هر تصویر صفحات سایت شما را یکجا فهرست میکند.
فشردهسازی تصویر یکی از معدود کارهای سئوی فنی است که هم ارزان است هم اثرش فوری دیده میشود؛ بر خلاف خیلی از تغییرات محتوایی که ماهها طول میکشد، همین امروز که یک تصویر را فشرده و اندازهاش را درست کنید، عدد سرعت صفحه بلافاصله پایین میآید. نقطهٔ شروع درست، دیدن این است که کدام تصاویر سایت شما واقعاً مشکلسازند، نه فشردهکردن کورکورانهٔ همهچیز.