تصاویر همچنان سنگین‌ترین بخش در اکثر صفحات هستند - معمولاً ۴۰ تا ۶۰ درصد از کل وزن صفحه - و شایع‌ترین علت عدم موفقیت در امتیاز Largest Contentful Paint هستند. خبر خوب این است که بهینه‌سازی تصویر در سال ۲۰۲۶ عمدتاً یک مشکل حل‌شده است. خبر بد این است که راه‌حل‌ها در انتخاب قالب، ویژگی‌های HTML و خطوط ساخت پراکنده هستند و اکثر سایت‌ها شاید نیمی از آنها را پیاده‌سازی کنند.

این یک تور عملی از مجموعه کامل است که بر اساس تأثیر مرتب شده است.

۱. از قالب‌های مدرن استفاده کنید - اما چشم‌انداز ۲۰۲۶ را نیز بشناسید

سلسله مراتب فرمت‌های امروزی:

AVIF انتخاب پیش‌فرض برای محتوای عکاسی است. معمولاً 30 تا 50 درصد کوچک‌تر از JPEG با کیفیت معادل است و از پشتیبانی کامل در کروم، فایرفاکس، سافاری و اج برخوردار است. نقطه ضعف آن سرعت کدگذاری است - که برای ساخت خطوط لوله پردازش هزاران تصویر مهم است، اما برای ارائه بی‌ربط است.

WebP یک جایگزین جهانی امن است: کوچک‌تر از JPEG، سریع‌تر از AVIF برای کدگذاری، و سال‌هاست که در همه جا پشتیبانی می‌شود.

JPEG XL همچنان فرمتی با بهترین داستان فنی و بدترین داستان پذیرش است. مراقب آن باشید؛ فعلاً روی آن کار نکنید.

اکنون PNG باید برای تصاویری که واقعاً نیاز به بازتولید بدون افت کیفیت یا آلفا با کیفیت بدون افت کیفیت دارند، رزرو شود. برای آیکون‌ها و هنرهای خطی، SVG را ترجیح دهید.

عنصر <picture> به شما امکان می‌دهد بدون جاوا اسکریپت، بهترین فرمت پشتیبانی‌شده را ارائه دهید:

 <picture>\\ <source srcset="hero.avif" type="image/avif">\\ <source srcset="hero.webp" type="image/webp">\\ <img src="hero.jpg" alt="Product hero" width="1200" height="630">\\ </picture>\\ اگر CDN یا سرویس تصویر خود را کنترل می‌کنید، مذاکره محتوا از طریق <picture>\\ <source srcset="hero.avif" type="image/avif">\\ <source srcset="hero.webp" type="image/webp">\\ <img src="hero.jpg" alt="Product hero" width="1200" height="630">\\ </picture>\\

هدر Accept با نشانه‌گذاری تمیزتر به همین هدف می‌رسد.

۲. همیشه ابعاد را اعلام کنید

ساده‌ترین راه حل در این لیست، و راهی که اکثر مشکلات مربوط به تصویر را از بین می‌برد، تغییر چیدمان تجمعی است: به هر تصویر ویژگی‌های width و height (یا aspect-ratio در CSS) بدهید. مرورگر قبل از رسیدن تصویر، فضای مورد نظر را رزرو می‌کند و پرش صفحه متوقف می‌شود.

۳. تصویر LCP را درست بگیرید

عنصر LCP شما معمولاً یک تصویر برجسته است و سه ویژگی سرعت نمایش آن را تعیین می‌کنند:

 fetchpriority="high" <img src="hero.avif" \\="" fetchpriority="high" decoding="async" width="1600" height="900" alt="...">\\

به مرورگر می‌گوید که این تصویر از سایر تصاویری که همزمان کشف کرده، مهم‌تر است. در صفحات دنیای واقعی، همین مورد به تنهایی معمولاً صدها میلی‌ثانیه از LCP کم می‌کند.

هرگز تصویر LCP را به صورت lazy بارگذاری نکنید. loading="lazy" در hero یکی از رایج‌ترین آسیب‌های عملکردی است که خود مرورگر به آن وارد می‌کند - این به مرورگر می‌گوید که دقیقاً تصویری را که امتیاز شما به آن بستگی دارد، از اولویت خارج کند.

اگر hero از طریق CSS background-image تنظیم شده باشد، <link rel="preload" as="image"> را در نظر بگیرید - تصاویر پس‌زمینه تا زمانی که CSS تجزیه نشود، کشف نمی‌شوند.

۴. بارگذاری تنبل همه چیز در زیر خط تا

برای هر تصویری که نزدیک به نمای اولیه نباشد ، loading="lazy" باعث صرفه‌جویی در پهنای باند می‌شود. الگو ساده است: eager (پیش‌فرض) در بالای صفحه، lazy در پایین صفحه. نکته حسابرسی: اگر قالب شما loading="lazy" به صورت سراسری اعمال کند، تصویر LCP خود را lazy-load کرده‌اید - به بالا مراجعه کنید.

۵. اندازه‌های واکنش‌گرا ارائه دهید

ارسال یک تصویر با عرض ۲۴۰۰ پیکسل به یک ستون تلفن با عرض ۳۶۰ پیکسل، داده‌های کاربر و بودجه LCP شما را هدر می‌دهد. srcset و sizes همچنان پاسخ استاندارد هستند:

 تولید انواع مختلف به مرحله ساخت یا CDN تصویر شما مربوط می‌شود، نه به خروجی‌های دستی. <img src="card-800.avif" \\="" srcset="card-400.avif 400w, card-800.avif 800w, card-1600.avif 1600w" sizes="(max-width: 600px) 100vw, 33vw" width="800" height="600" alt="...">\\

۶. به یک هدف فشرده کنید، نه به یک حس و حال خاص

بیشتر تیم‌ها بر اساس احساس فشرده‌سازی می‌کنند: نوار لغزنده کیفیت را تا زمانی که «خوب به نظر برسد» بکشید. دو رویکرد دقیق‌تر نیز ارزش اتخاذ دارند:

اهداف کیفیت: برای AVIF/WebP عکاسی، تنظیمات کیفیت ادراکی در حدود میانه این محدوده معمولاً برای کاربران شفاف است. یک بار با یک پیش‌فرض معقول (مثلاً کیفیت AVIF حدود ۵۰) کدگذاری کنید، بررسی موردی انجام دهید و استانداردسازی کنید - دستکاری هر تصویر مقیاس‌بندی نمی‌شود.

بودجه‌های حجمی: گاهی اوقات محدودیت یک عدد قطعی است، نه ادراک - محدودیت آپلود CMS، یک درگاه ایمیل، یک الزام فهرست‌بندی در بازار یا یک بودجه عملکردی که مثلاً ۲۰۰ کیلوبایت را به قهرمان اختصاص می‌دهد. در این موارد، شما ابزاری می‌خواهید که از سقف به عقب کار کند: فشرده‌سازی یک تصویر تا سقف قطعی مانند ۲ مگابایت (یا ۲۰۰ کیلوبایت یا ۱۰۰ کیلوبایت) با تنظیم مکرر کیفیت تا زمانی که فایل جا شود، به جای حدس زدن مقادیر اسلایدر. ابزارهای متعددی این کار را انجام می‌دهند؛ ابزارهای مبتنی بر مرورگر این مزیت را دارند که نسخه اصلی هرگز از دستگاه خارج نمی‌شود، که این موضوع زمانی اهمیت دارد که تصاویر دارایی‌های مشتری باشند یا حاوی داده‌های شخصی باشند.

بودجه‌های عملکردی فقط زمانی کار می‌کنند که قابل اجرا باشند - «آن را تا جایی که قابل قبول به نظر می‌رسد کوچک کنید» قابل اجرا نیست؛ «قهرمان با حجم کمتر از ۲۰۰ کیلوبایت ارسال شود» قابل اجرا است.

۷. تحویل را فراموش نکنید

به شدت کش کنید. نام فایل‌های تغییرناپذیر و هش‌شده با Cache-Control: public, max-age=31536000, immutable نمایش‌های تکراری را آزاد می‌کند.

نزدیکی CDN هنوز هم بیش از آنچه مردم انتظار دارند برای صفحات پرمخاطب رسانه‌ای که به مخاطبان جهانی خدمت‌رسانی می‌کنند، اهمیت دارد.

برای تصاویر بزرگ زیر صفحه، رشته اصلی را با decoding="async" رمزگشایی کنید.

یک چک لیست منطقی برای سال ۲۰۲۶

AVIF با قابلیت جایگزینی WebP برای عکس‌ها؛ SVG برای هنر خطی

width / height در هر <img> \

fetchpriority="high" روی تصویر LCP؛ هرگز آن را با روش lazy-load بارگذاری نکنید.

loading="lazy" در زیر خط تا

srcset / sizes با تولید متغیر در زمان ساخت

کدگذاری بر اساس اهداف کیفی استاندارد؛ اعمال بودجه‌های حجمی در مواردی که محدودیت‌های سختی وجود دارد

ذخیره سازی تغییرناپذیر + CDN

هیچ‌کدام از این مراحل در سال ۲۰۲۶ چیز جدیدی نیست - که دقیقاً نکته همین است. سایت‌هایی که در Core Web Vitals در تصاویر شکست می‌خورند، تکنیک‌های عجیب و غریب را از دست نمی‌دهند؛ آنها دو یا سه مورد از یک لیست شناخته شده را از دست می‌دهند. چک لیست را با بزرگترین الگوی خود مقایسه کنید و بهبود LCP معمولاً در چرخه بعدی داده‌های میدانی قابل مشاهده است. </تصویر>

تست مسدودسازی تبلیغات