در بیشتر وبسایتها، تصاویر سنگینترین چیزِ تکِ صفحه هستند، اغلب بزرگتر از مجموعِ HTML و CSS و JavaScript. اگر صفحهای کُند به نظر میرسد، تصاویر نخستین جایی هستند که باید نگاه کنید، و رفعکردنشان معمولاً سریع است.
سه تکنیک تقریباً همهٔ کار را انجام میدهند: تصویر را به اندازهای که واقعاً نمایش داده میشود تغییر بدهید، فشردهاش کنید و آن را در یک فرمت مدرن ارائه دهید. وقتی با هم به کار روند، معمولاً وزنِ تصویر را ۷۰٪ یا بیشتر کم میکنند.
به اندازهای که واقعاً نمایش میدهید تغییر بدهید
این رایجترین و پُرهدررفتترین اشتباه است. عکسی که مستقیم از دوربین میآید ممکن است ۶۰۰۰ پیکسل عرض داشته باشد، اما مقالهٔ شما آن را در ستونی به عرضِ ۸۰۰ پیکسل نمایش میدهد. مرورگر هر ششهزار پیکسل را دانلود میکند و بعد بیشترشان را دور میریزد وقتی تصویر را کوچک میکند تا جا شود.
ارائهٔ یک تصویر ۶۰۰۰ پیکسلی در جایگاهی ۸۰۰ پیکسلی میتواند به معنای دانلودِ پنج تا ده برابر دادهٔ بیشتر از نیاز باشد. راهحل ساده است: فایل را تقریباً به عرضی که اشغال خواهد کرد تغییر اندازه دهید، بهعلاوهٔ کمی فضای اضافی برای صفحهنمایشهای پُرتراکم.
یک قاعدهٔ عملی:
- تصویر قهرمانِ تمامعرض: ۱۶۰۰–۲۰۰۰ پیکسل عرض کافی است.
- تصویر داخلِ مقاله: ۱۰۰۰–۱۴۰۰ پیکسل.
- بندانگشتی: ۳۰۰–۵۰۰ پیکسل.
از تغییردهندهٔ اندازهٔ تصویر استفاده کنید تا هر تصویر را پیش از آنکه اصلاً به صفحهتان برسد کوچک کنید. نسبت ابعاد را قفل نگه میدارد تا چیزی کِش نیاید.
فشرده کنید تا هدررفت حذف شود
وقتی ابعاد درست شد، فشردهسازی جزئیاتی را که چشم نمیبیند حذف میکند. برای عکسها، کیفیتِ حدود ۷۵–۸۵٪ نقطهٔ طلایی است: حجم فایل بهشدت افت میکند در حالی که تصویر همانطور به نظر میرسد. برای گرافیکهای تخت و اسکرینشاتهایی که با PNG ذخیره شدهاند، کاهشِ تعدادِ رنگ (کوانتیزه کردن به ۲۵۶ رنگ) میتواند فایل را به کسری از اندازهٔ اصلیاش کوچک کند.
فشردهسازِ تصویر هر دو را انجام میدهد. JPEG و WebP را بر اساس کیفیت دوباره کدگذاری میکند، PNGها را کوانتیزه میکند، و تضمین میدهد که هرگز فایلی بزرگتر از آنچه با آن شروع کردهاید تولید نکند. اگر یک گالریِ کامل دارید، آنها را بهصورت دستهای اجرا کنید و یک ZIP دانلود کنید.
به یک فرمت مدرن سوئیچ کنید
انتخابِ فرمت بهتنهایی میتواند یک فایل را نصف کند. در ادامه میبینید گزینههای رایج برای عکسها چطور مقایسه میشوند.
| فرمت | اندازهٔ معمول در مقایسه با JPEG | بهترین برای |
|---|---|---|
| JPEG | مبنا | جایگزینِ همگانی؛ عکسها |
| WebP | ~۲۵–۳۵٪ کوچکتر | عکسها و گرافیکها؛ پشتیبانی گستردهٔ مرورگر |
| AVIF | ~۵۰٪ کوچکتر | عکسهایی که کوچکترین اندازه مهم است |
| PNG | برای عکسها بسیار بزرگتر | لوگو، آیکون، گرافیک تخت، شفافیت |
WebP در سال ۲۰۲۶ پیشفرضِ امن است — هر مرورگر امروزی آن را میخواند و با فاصله از JPEG جلو میزند. AVIF از آن هم کوچکتر میرود اما کدگذاریاش بیشتر طول میکشد و پشتیبانیاش کمی محدودتر است. تبدیلکنندهٔ تصویر به شما اجازه میدهد AVIF را هدف بگیرید و بیسروصدا به WebP برگردد وقتی AVIF گزینهٔ درستی نیست، پس بدون حدسزدن بهترین نتیجهٔ در دسترس را میگیرید.
یک هشدار: برای عکسها از PNG استفاده نکنید. PNG برای لوگو، آیکون و هر چیزی که به شفافیت نیاز دارد میدرخشد، اما برای یک عکس میتواند چند برابرِ یک WebP با همان کیفیت باشد.
کنار هم بگذارید
یک خطِ لولهٔ قابلاعتماد برای هر تصویری که برای وب در نظر گرفته شده:
- تغییر اندازه به عرضِ نمایش (بهعلاوهٔ فضای اضافی برای صفحهنمایشهای رتینا).
- تبدیل به WebP، یا AVIF اگر کوچکترین فایلِ ممکن را میخواهید.
- فشردهسازی با کیفیتِ ۷۵–۸۵٪ برای تراشیدنِ آخرین بقایای هدررفت.
این کار را بکنید و یک عکسِ دوربینِ ۵ مگابایتی میتواند به یک WebP ۱۲۰ کیلوبایتی تبدیل شود که در ستونِ مقاله یکسان به نظر میرسد. در یک صفحه ضربش کنید و تفاوت در زمان بارگذاری چشمگیر است.
همهچیز با استفاده از Canvas و WebAssembly در مرورگر شما اجرا میشود، پس چیزی آپلود نمیشود و ابزارها پس از نخستین بازدید آفلاین به کارشان ادامه میدهند. یعنی میتوانید پوشهای از تصاویر را برای سایتتان آماده کنید بدون آنکه آنها را به هیچ سروری بسپارید.
فراتر از فایلها
دو عادتِ دیگر هم کمک میکنند و هیچ هزینهای ندارند:
- تصاویرِ زیرِ خطِ تا را با بارگذاری تنبل بارگذاری کنید با
loading="lazy"تا مرورگر فقط وقتی خواننده به نزدیکیشان اسکرول میکند آنها را واکشی کند. - صفتهای width و height را تنظیم کنید تا چیدمان هنگام بارگذاریِ تصاویر نپرد، که به امتیازِ Core Web Vitals شما هم کمک میکند.
میخواهید دقیقاً بدانید کدام تصاویر یک صفحه را پایین میکشند؟ راهنمای سئوی تصویرِ ما ممیزی را پوشش میدهد، و یک بررسیِ سرعتِ صفحه سنگینترین داراییها را فهرست میکند تا بدانید اول باید کجا را نشانه بگیرید.