بهترین فرمت تصویر برای سایت به محتوای عکس و محل نمایش آن بستگی دارد. خروجی مناسب یک عکس سرور لزوماً برای اسکرین‌شات تنظیمات هاست مناسب نیست. فرمت، اندازهٔ پیکسلی و میزان فشرده‌سازی را با هم انتخاب کنید؛ تغییر پسوند به‌تنهایی تصویر را بهینه نمی‌کند.
مقایسهٔ فرمت تصویر برای سایت
| فرمت | کاربرد معمول | نکتهٔ انتخاب |
|---|---|---|
| JPEG | عکس‌های دارای رنگ و جزئیات فراوان | فشرده‌سازی با اتلاف؛ بدون شفافیت آلفا |
| PNG | اسکرین‌شات، نمودار و تصویر شفاف | فشرده‌سازی بدون اتلاف؛ حجم عکس‌های پیچیده ممکن است بالا باشد |
| WebP | عکس و تصویر گرافیکی | حالت با اتلاف و بدون اتلاف، همراه پشتیبانی از شفافیت |
| AVIF | تصاویر وب با بررسی کیفیت و سازگاری | بازده فشرده‌سازی مناسب در بسیاری از نمونه‌ها؛ نیازمند پشتیبانی ابزار پردازش |
| SVG | لوگو و آیکون برداری | مناسب طرح برداری؛ فایل باید از منبع معتبر و پالایش‌شده باشد |
راهنمای فرمت‌های MDN تفاوت قابلیت‌ها را توضیح می‌دهد. PNG صرفاً محدود به ۲۵۶ رنگ نیست. JPEG برای نوشته‌های ریز و لبه‌های تیز ممکن است اثر فشرده‌سازی آشکار ایجاد کند.
WebP و AVIF همیشه کوچک‌تر هستند؟
WebP هم حالت Lossy و هم Lossless دارد؛ بنابراین هر فایل WebP بدون افت اطلاعات نیست. حجم نهایی به محتوا، تنظیمات خروجی و کیفیت انتخابی وابسته است. برای همان تصویر، خروجی‌ها را کنار هم مقایسه کنید؛ نام فرمت به‌تنهایی بهترین نتیجه را تضمین نمی‌کند.
در عکس‌های واقعی، یک تنظیم با اتلاف متعادل ممکن است حجم را کم کند و ظاهر قابل قبولی داشته باشد. در آموزش کنترل‌پنل، خوانایی متن و اعداد اولویت دارد. تصویر کم‌حجمی که کاربر نتواند گزینه‌های آن را بخواند، خروجی مناسبی نیست.
تصاویر متحرک و لوگو
GIF برای انیمیشن‌های ساده شناخته شده است، اما همیشه کوچک‌تر از ویدئو نیست. برای حرکت طولانی یا رنگ‌های زیاد، ویدئو یا فرمت متحرک مناسب را بررسی کنید. PNG نیز از طریق APNG امکان انیمیشن دارد؛ همهٔ ابزارها و مسیرهای پردازش قابلیت‌های یکسانی ندارند.
لوگوی برداری می‌تواند در اندازه‌های مختلف واضح بماند. بااین‌حال، SVG سندی با قابلیت‌های فراتر از عکس ساده است؛ بارگذاری آزاد فایل ناشناس را فقط برای حل مسئلهٔ فرمت فعال نکنید. سیاست رسانهٔ سایت و پالایش معتبر فایل را رعایت کنید.
پشتیبانی وردپرس و هاست
وردپرس از نسخهٔ ۶٫۵ پشتیبانی AVIF را اضافه کرده است، مشروط به پشتیبانی کتابخانهٔ پردازش تصویر سرور. در ابزارها، سلامت سایت، اطلاعات و بخش مدیریت رسانه، قابلیت‌های محیط را بررسی کنید. نمایش فایل اصلی کافی نیست؛ ساخت اندازه‌های بندانگشتی هم باید درست انجام شود.
چک‌لیست پیش از انتشار
- ابعاد را با جایگاه واقعی تصویر هماهنگ کنید.
- خوانایی متن، شفافیت و رنگ را در موبایل کنترل کنید.
- حجم چند خروجی هم‌اندازه را مقایسه کنید.
- متن جایگزین را بر اساس محتوای واقعی تصویر بنویسید.
- پس از بارگذاری، تصویر و اندازه‌های تولیدشده را بررسی کنید.
فرمت مناسب به عملکرد و تجربهٔ کاربر کمک می‌کند، اما به‌تنهایی تضمین‌کنندهٔ رتبهٔ جستجو نیست.
مطالعهٔ مرتبط
بازبینی فنی: ۱۳ آبان ۱۴۰۵. تاریخ انتشار اولیه و نشانی قبلی حفظ شده‌اند.
