بهینه‌سازی تصاویر وب‌سایت — ترمزی که دست‌کم گرفته می‌شود
تصاویر معمولاً بیشترین سهم را در زمان بارگذاری دارند. چه فرمتی لازم دارید، چه اندازه‌ای واقعاً کافی است و رایج‌ترین اشتباه کدام است.
وقتی یک وب‌سایت کند بارگذاری می‌شود، در بیشتر موارد مشکل از سرور یا کد نیست. از تصاویر است. و تقریباً همیشه از یک اشتباه مشخص.
اشتباهی که همه‌جا تکرار می‌شود
یک عکس با عرض ۴۰۰۰ پیکسل از دوربین یا از عکاس می‌آید و دقیقاً به همان شکل بارگذاری می‌شود. بعد در بخشی نمایش داده می‌شود که ۶۰۰ پیکسل عرض دارد. مرورگر با این حال تمام ۴۰۰۰ پیکسل را دانلود می‌کند و کوچکش می‌کند. بازدیدکننده منتظر پیکسل‌هایی می‌ماند که هیچ‌وقت نمی‌بیند.
یک تصویر با کوچک دیده‌شدن در چیدمان، سریع‌تر نمی‌شود.
چه چیزی واقعاً کمک می‌کند
- ذخیره در اندازه‌ی موردنیاز. اگر تصویری حداکثر ۸۰۰ پیکسل عرض نمایش دارد، حدود ۱۶۰۰ پیکسل برای وضوح روی نمایشگرهای باکیفیت هم کافی است. بیشتر از آن هدر رفتن است.
- استفاده از فرمت مدرن. WebP در کیفیت یکسان، فایل‌های به‌مراتب کوچک‌تری از JPEG می‌دهد. تفاوت اغلب بیش از نصف است.
- فشرده‌سازی قبل از بارگذاری. تقریباً کسی تفاوت کیفیت ۱۰۰ و ۸۰ را نمی‌بیند، ولی حجم فایل به‌شکل چشمگیری کم می‌شود.
- Lazy Loading برای هر چیزی پایین‌تر از دید اولیه. تصاویری که فقط با اسکرول دیده می‌شوند، لازم نیست در اولین بارگذاری دانلود شوند.
- مشخص‌کردن عرض و ارتفاع در کد. وگرنه چیدمان صفحه هنگام رسیدن تصاویر می‌پرد، و دقیقاً همین را گوگل منفی ارزیابی می‌کند.
اثر جانبی برای جست‌وجو
هر تصویر به متن جایگزین نیاز دارد که توضیح دهد چه چیزی دیده می‌شود. این اول از همه مسئله‌ی دسترس‌پذیری است، ولی هم‌زمان به جست‌وجوی تصویر هم کمک می‌کند — کانالی که بیشتر کسب‌وکارهای کوچک کاملاً بلااستفاده رهایش می‌کنند.
اگر می‌خواهید بدانید چه مقدار از زمان بارگذاری سایتتان صرف تصاویر می‌شود، خوشحال می‌شویم بدون تعهد اندازه‌گیری کنیم.
آماده‌اید درباره‌ی پروژه‌تون صحبت کنیم؟
بدون هیچ تعهدی برامون بنویسید — در کمتر از ۲۴ ساعت پاسخ می‌دیم.