تصاویرِ بزرگ دلیلِ شمارهٔ یکِ کُند بارگذاریشدنِ صفحاتاند. راهحل تقریباً همیشه دو گام است: تصویر را به ابعادِ درست دربیاورید، سپس آنچه میماند را فشرده کنید. هر دو را انجام دهید و یک عکسِ ۴ مگابایتی به یک عکسِ ۱۵۰ کیلوبایتی بدل میشود که روی صفحه یکسان به نظر میرسد.
بیایید اعدادِ واقعی رویش بگذاریم.
اندازههای هدف که باید نشانه بگیرید
لازم نیست حدس بزنید. در ادامه بودجههای وزنِ عملی که صفحات را سریع نگه میدارند را میبینید:
- قهرمان / بنرِ تمامعرض: زیرِ ۲۰۰ کیلوبایت، ایدهآل ~۱۰۰–۱۵۰ کیلوبایت.
- عکسِ داخلِ مقاله: هرکدام ۸۰–۱۵۰ کیلوبایت.
- بندانگشتی / آواتار: ۱۰–۳۰ کیلوبایت.
- لوگو یا آیکون (PNG/SVG): زیرِ ۳۰ کیلوبایت؛ اغلب بسیار کمتر.
و ابعاد:
- قهرمانِ تمامعرض: ۱۶۰۰–۲۰۰۰ پیکسل عرض برای بیشترِ چیدمانها کافی است (فقط اگر رتینا را هدف گرفتهاید و بایتها را میتوانید بپردازید دو برابرش کنید).
- عکسِ درونستونی: با عرضِ محتوایتان منطبق شوید — اغلب ۸۰۰–۱۲۰۰ پیکسل.
- بندانگشتی: اندازهای که واقعاً نمایش میدهد، مثلاً ۳۰۰–۴۰۰ پیکسل.
اگر هر تصویرِ تکی روی یک صفحه بالای ~۳۰۰ کیلوبایت باشد، معمولاً یک اشتباهِ ارزشِرفعداشتن است.
گام ۱: به عرضِ نمایشِ واقعی تغییر اندازه دهید
این گامی است که مردم ردش میکنند، و بزرگترین اهرم است. عکسی که مستقیم از یک گوشی میآید اغلب بیش از ۴۰۰۰ پیکسل عرض دارد. اگر در یک ستونِ ۸۰۰ پیکسلی نمایش داده شود، ۲۵ برابرِ پیکسلی که صفحه نشان میدهد میفرستید — و شمارِ پیکسل بیش از هر چیزی اندازهٔ فایل را پیش میراند.
از تغییردهندهٔ اندازهٔ تصویر استفاده کنید تا تصویر را به عرضی که واقعاً ظاهر میشود بیاورید. با پیکسل یا درصد تغییر اندازه دهید، نسبتِ ابعاد را قفل نگه دارید، و بگذارید کوچککنندهٔ باکیفیت لبهها را تمیز نگه دارد.
درستاندازهکردن بهتنهایی اغلب اندازهٔ فایل را ۸۰–۹۰٪ کم میکند پیش از اینکه یک بایت فشرده کرده باشید.
گام ۲: آنچه میماند را فشرده کنید
حالا دادههای درونِ آن ابعادِ درست را کوچک کنید.
- عکسها (JPG/WebP): اسلایدرِ کیفیت را روی ۷۵–۸۵ بگذارید. این برای بیشترِ تصاویر بهلحاظِ بصری بیاُفت است در حالی که اندازه را بهشدت میبُرد.
- PNGها (اسکرینشاتها، گرافیکها): فشردهسازِ تصویر آنها را به یک پالتِ ۲۵۶ رنگی کاهش میدهد، معمولاً ۶۰–۸۰٪ صرفهجویی بدونِ تغییرِ آشکار و با نگهداشتنِ شفافیت.
فشردهساز همچنین خروجی را در اندازهٔ اصلی سقف میزند — هرگز چیزی بزرگتر پس نمیدهد — و یک سقفِ عرضِ اختیاری دارد، پس واقعاً میتوانید هر دو گام را در یک گذر انجام دهید: سقف را روی عرضِ هدفتان بگذارید و یکجا فشرده کنید. یک پوشهٔ کامل را دستهای کنید و بهصورتِ یک ZIP دانلودش کنید.
در همین حال فرمتِ درست را انتخاب کنید
اگر تصاویرتان به مرورگرهای مدرن ارائه خواهند شد، تبدیلِ عکسها به WebP معمولاً با همان کیفیت ۲۵–۳۵٪ دیگر از JPEG جلو میزند. گرافیکهای تخت بهصورتِ PNG (یا WebP) میمانند. عکسها را بهصورتِ PNG ذخیره نکنید — این اشتباهِ کلاسیکِ بادکردن است، بهراحتی یک جریمهٔ ۵–۱۰ برابری.
یک جریانِ کاریِ واقعگرایانه
برای یک پستِ وبلاگ با پنج عکس:
- هرکدام را به عرضِ ستونتان تغییر اندازه دهید (مثلاً ۱۲۰۰ پیکسل).
- با کیفیتِ ۸۰ فشرده کنید، یا به WebP تبدیل کنید.
- تأیید کنید هرکدام زیرِ ~۱۵۰ کیلوبایت فرود میآید.
- یک بُرشِ ۱۰۰٪ از یک تصویر را بررسی کنید تا مطمئن شوید کیفیت حفظ شده.
پنج عکسی که در مجموع ۲۰ مگابایت شروع کردند حدودِ ۶۰۰ کیلوبایت فرود میآیند — صفحهای که در یک چشمبههمزدن بهجای یک گیر بارگذاری میشود.
خصوصی و آفلاین
هر چیزِ بالا کاملاً در مرورگرتان با استفاده از Canvas و WebAssembly اجرا میشود. هیچ تصویری به سروری آپلود نمیشود، و پس از نخستین بازدید ابزارها کش میشوند و آفلاین کار میکنند. میتوانید تصاویرِ بهاندازهٔ یک پستِ کامل را بدونِ اتصال و بدونِ اینکه چیزی دستگاهتان را ترک کند بهینه کنید.