چطور تصاویر وب‌سایت را سریع‌تر بارگذاری کنیم
پنج تغییری که حجم تصاویر را در هر وب‌سایتی کم می‌کند، به ترتیب اثرگذاری.
در بیشتر وب‌سایت‌ها، تصاویر بخش عمدهٔ چیزی هستند که بازدیدکننده دانلود می‌کند. فقط یک عکس بهینه‌نشده از گوشی ممکن است از کل بقیهٔ صفحه سنگین‌تر باشد. اصلاح تصاویر معمولاً بزرگ‌ترین و ارزان‌ترین راه افزایش سرعت است و صفحه‌های سریع‌تر رتبهٔ بهتری می‌گیرند، بازدیدکننده را بیشتر نگه می‌دارند و فروش بیشتری می‌آورند.
1. تصاویر را با همان اندازه‌ای آپلود کنید که نمایش داده می‌شوند
عکسی که مستقیم از گوشی می‌آید 4000 پیکسل عرض یا بیشتر دارد. ستون محتوای یک وب‌سایت به‌ندرت از 1200 پیکسل پهن‌تر است و کارت‌ها و تصاویر کوچک خیلی کمتر. هر پیکسل اضافه دانلود می‌شود و بعد مرورگر دورش می‌اندازد. پیش از آپلود اندازه را تغییر دهید: برای بنرهای تمام‌عرض حدود 2000 پیکسل عرض (تا روی صفحه‌های پرتراکم واضح بمانند)، برای تصاویر محتوا 1200 تا 1600 و برای کارت‌ها 600 تا 800. ابزار تغییر اندازه یک پوشهٔ کامل را یک‌جا پردازش می‌کند.
2. فشرده کنید
وقتی ابعاد درست باشد، فشرده‌سازی بقیهٔ کار را انجام می‌دهد. عکسی که با کیفیت 80 ذخیره شده، در صفحهٔ وب دقیقاً شبیه عکس با کیفیت 100 است و اغلب یک‌سوم حجم آن را دارد. ابزار فشرده‌سازی تصویر فایل‌ها را گروهی پردازش می‌کند و صرفه‌جویی هر فایل را نشان می‌دهد.
3. از WebP استفاده کنید
همهٔ مرورگرهای فعلی از WebP پشتیبانی می‌کنند و این فرمت در کیفیت ظاهری برابر، معمولاً 25 تا 35% کم‌حجم‌تر از JPG است. از شفافیت هم پشتیبانی می‌کند و برای همین جایگزین بسیاری از فایل‌های PNG هم می‌شود. با تبدیل JPG به WebP یا تبدیل PNG به WebP فایل‌ها را تبدیل کنید. AVIF باز هم کم‌حجم‌تر است، اما رمزگذاری‌اش کندتر است و سامانه‌های آپلود کمتر از آن پشتیبانی می‌کنند، پس WebP انتخاب پیش‌فرض و عملی است.
4. فرمت درست را برای محتوا انتخاب کنید
| محتوا | بهترین فرمت |
|---|---|
| عکس | WebP، یا JPG جایی که WebP پذیرفته نمی‌شود |
| لوگو و آیکون | اگر SVG دارید همان، وگرنه PNG یا WebP |
| اسکرین‌شات دارای متن | PNG یا WebP بدون اتلاف |
| انیمیشن‌های ساده | یک ویدیوی کوتاه به‌جای GIF |
5. به مرورگر کمک کنید تصاویر را هوشمندانه بارگذاری کند
- بارگذاری تنبل. تصاویری که پایین‌تر از صفحهٔ اول هستند فقط وقتی باید بارگذاری شوند که بازدیدکننده به نزدیکی آن‌ها اسکرول کند. بیشتر پلتفرم‌ها این کار را خودکار انجام می‌دهند. در HTML ساده، به برچسب‌های img که در ابتدا دیده نمی‌شوند loading="lazy" اضافه کنید.
- ابعاد. برای هر تصویر عرض و ارتفاع تعیین کنید تا صفحه هنگام رسیدن تصاویر بالا و پایین نپرد. جابه‌جایی صفحه‌آرایی یکی از Core Web Vitals Google است.
- اول تصویر اصلی. تصویر بزرگ بالای صفحه، که معمولاً همان Largest Contentful Paint به حساب می‌آید، هرگز نباید با تأخیر بارگذاری شود. باید هر چه زودتر بارگذاری شود.
چقدر تفاوت ایجاد می‌کند
یک صفحهٔ معمولی با ده عکس که مستقیم از گوشی آمده‌اند ممکن است 30 MB حجم داشته باشد. اگر اندازهٔ همین عکس‌ها به عرض‌های معقول تغییر کند و فشرده شوند، همان صفحه معمولاً حدود 2 MB می‌شود. با تبدیل به WebP به حدود 1.4 MB می‌رسد. در اینترنت همراه، این همان تفاوت میان صفحه‌ای است که در یک ثانیه ظاهر می‌شود و صفحه‌ای که بسیاری از بازدیدکنندگان رهایش می‌کنند.
بررسی نتیجه
PageSpeed Insights Google و پنل Lighthouse در ابزارهای توسعه‌دهندهٔ Chrome هر دو تصاویر بیش از حد بزرگ، تصاویری که باید WebP باشند و عنصر Largest Contentful Paint را فهرست می‌کنند. پیش و پس از تغییرات آن‌ها را اجرا کنید و اول روی صفحه‌هایی تمرکز کنید که بیشترین بازدید را دارند.