اندازه تصاویر وردپرس باید با محل استفاده هماهنگ باشد. لوگوی هدر، تصویر کارت بلاگ و تصویر عریض داخل مقاله نیاز یکسانی ندارند. عددهایی مانند ۱۹۲۰ پیکسل یا ۲۰۰ در ۱۰۰، قانون عمومی وردپرس نیستند؛ ابتدا کادر واقعی و کاربرد تصویر را مشخص کنید.
تفاوت ابعاد و حجم در اندازه تصاویر وردپرس
ابعاد، تعداد پیکسل‌های عرض و ارتفاع است؛ حجم، تعداد بایت فایل. دو تصویر با ابعاد یکسان می‌توانند حجم بسیار متفاوتی داشته باشند. کم‌کردن کیفیت ممکن است حجم را کاهش دهد اما متن ریز را ناخوانا کند. همچنین کوچک‌کردن ظاهری تصویر با CSS الزاماً فایل دانلودشده را کوچک نمی‌کند.
نسبت تصویر را نیز حفظ کنید. کشیدن عکس مربع به کادر مستطیلی باعث اعوجاج می‌شود؛ برای کادر ثابت، برش هدفمند بهتر از تغییر نامتناسب عرض و ارتفاع است. بخش مهم تصویر نباید در موبایل از قاب خارج شود.
چطور عرض مناسب را انتخاب کنیم؟
عرض کادر تصویر را در چند اندازهٔ صفحه ببینید. برای نمونه، کادر ۶۰۰ پیکسلی ممکن است برای نمایشگر با تراکم دوبرابر به منبع حدود ۱۲۰۰ پیکسل نیاز داشته باشد؛ این یک مثال است، نه اندازهٔ اجباری همهٔ تصاویر. کیفیت منبع، بودجهٔ حجم و روش انتخاب مرورگر نیز دخیل‌اند.
برای اسکرین‌شات، خوانایی نوشته‌ها را در اندازهٔ واقعی بررسی کنید. برای کارت بلاگ، نسبت مشترک و نقطهٔ برش مناسب انتخاب کنید. برای بنر عریض، نسخهٔ موبایل یا برش مناسب می‌تواند از دانلود یک تصویر بسیار بزرگ و نامتناسب بهتر باشد.
تنظیم اندازه‌های رسانه
در تنظیمات ← رسانه می‌توانید اندازهٔ بندانگشتی، متوسط و بزرگ را تنظیم کنید. قالب‌ها و افزونه‌ها نیز اندازه‌های دیگری ثبت می‌کنند؛ بنابراین این صفحه لزوماً همهٔ فایل‌های تولیدشده را نشان نمی‌دهد.
تغییر این مقادیر به معنی تغییر فوری همهٔ تصاویر قبلی نیست. برای رسانه‌های موجود، بازسازی اندازه‌ها ممکن است لازم شود. اصل تصاویر را حفظ کنید و پیش از حذف اندازه‌های قدیمی، ارجاع‌های داخل نوشته‌ها، قالب و منابع بیرونی را بررسی کنید.
تصاویر پاسخ‌گو و انتخاب در ویرایشگر
وردپرس در خروجی مناسب از srcset و sizes استفاده می‌کند تا مرورگر با توجه به فضای نمایش و تراکم صفحه، فایل مناسب را انتخاب کند. وجود چند فایل روی سرور به‌تنهایی کافی نیست؛ قالب یا بلوک باید اطلاعات درست را در HTML تولید کند.
هنگام درج تصویر، اندازهٔ متناسب را انتخاب و نتیجهٔ موبایل را ببینید. طبق راهنمای تصاویر پاسخ‌گو، اندازهٔ نمایش و منبع تصویر ارتباط دارند. اگر فایل چندمگابایتی برای کادر کوچک دانلود می‌شود، خروجی واقعی را بررسی کنید؛ صرف تغییر عدد عرض در ویرایشگر ممکن است مشکل را حل نکند.
سرعت، برش و سئوی تصویر
برای جلوگیری از جابه‌جایی محتوا، ابعاد یا نسبت تصویر در چیدمان مشخص باشد. تصویر اصلی LCP را طبق راهنمای عملکرد با Lazy Load به تأخیر نیندازید؛ این روش بیشتر برای تصاویر پایین صفحه مفید است. متن جایگزین باید محتوای لازم تصویر را توضیح دهد، نه فهرست تکراری کلمات کلیدی.
WebP می‌تواند مناسب باشد، اما کیفیت و تحویل آن را آزمایش کنید. اگر به اندازهٔ اختصاصی نیاز دارید، توسعه‌دهنده می‌تواند از add_image_size در کد مناسب قالب فرزند یا افزونه استفاده کند؛ ویرایش تصادفی فایل‌های هسته یا index.php لازم نیست.
بررسی پیش از اجرای انبوه
یک کارت، یک مقاله و یک صفحهٔ دارای بنر را نمونه بگیرید. حجم دانلود، وضوح، برش و ثبات چیدمان را در موبایل و دسکتاپ بررسی کنید. اندازه‌های مورد نیاز را ثبت کنید و فقط موارد واقعاً بلااستفاده را کنار بگذارید؛ حذف همهٔ اندازه‌های خودکار می‌تواند کیفیت یا عملکرد قالب را خراب کند.
مطالعهٔ مرتبط
بازبینی فنی: ۱۳ آبان ۱۴۰۵. تاریخ انتشار اولیه و نشانی قبلی حفظ شده‌اند.
