نمایش صحیح تصاویر سایت در موبایل با Responsive Images

برای نمایش صحیح تصاویر سایت در موبایل معمولاً به افزونه جداگانه نیاز ندارید. وردپرس می‌تونه اندازه‌های مختلف هر عکس رو بسازه و با کمک ویژگی‌های srcset و sizes فایل مناسب‌تری رو به مرورگر پیشنهاد بده. ولی این قابلیت به‌تنهایی جلوی برش بد عکس، عرض ثابت، تنظیم اشتباه المنتور یا بیرون زدن تصویر از صفحه رو نمی‌گیره.

توی این راهنما اول تکلیف افزونه قدیمی RICG Responsive Images رو روشن می‌کنیم. بعد تنظیم تصاویر در وردپرس و المنتور، بررسی خروجی روی موبایل، اصلاح تصاویر قدیمی و بهینه‌سازی سرعت رو قدم‌به‌قدم جلو می‌بریم. پس حتی اگه اولین باره با این موضوع روبه‌رو می‌شید، می‌تونید مشکل رو بدون حدس زدن پیدا و برطرف کنید.

نکته مهم: افزونه RICG Responsive Images دیگه قابل استفاده نیست

نسخه قدیمی این مقاله نصب افزونه RICG Responsive Images رو پیشنهاد می‌کرد. این افزونه برای نسخه‌های قدیمی وردپرس ساخته شده بود، ولی قابلیت اصلی اون از وردپرس ۴.۴ وارد هسته وردپرس شده. صفحه افزونه هم می‌گه برای وردپرس ۴.۴ و نسخه‌های بعدی به اون نیازی ندارید.

نسخه قدیمی این مقاله چه روشی رو آموزش می‌داد

روش قبلی این بود که افزونه رو نصب کنید تا ویژگی‌های srcset و sizes به تصاویر اضافه بشن. همچنین تابع add_image_size() برای ساخت اندازه سفارشی معرفی شده بود. این تابع هنوز کاربرد داره، ولی فعال‌کننده تصاویر واکنش‌گرا نیست و بیشتر برای قالب‌نویسی و نیازهای اختصاصی به کار می‌ره.

تصویر قدیمی زیر فقط بخشی از نسخه قبلی آموزش رو نشون می‌ده و نباید از اون به‌عنوان راهنمای نصب افزونه استفاده کنید.

چرا نباید افزونه RICG Responsive Images رو نصب کنید

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

وردپرس چطور جای این افزونه رو گرفته

وقتی عکسی رو داخل کتابخانه رسانه بارگذاری می‌کنید، وردپرس معمولاً چند فایل با ابعاد متفاوت می‌سازه. بعد موقع نمایش تصویر، فهرست این فایل‌ها رو داخل کد HTML می‌ذاره تا مرورگر با توجه به عرض صفحه و تراکم پیکسلی نمایشگر، گزینه مناسب رو انتخاب کنه. پس نقطه شروع شما باید وردپرس به‌روز، قالب درست و تنظیم مناسب تصویر باشه.

نمایش صحیح تصاویر سایت در موبایل یعنی چی

تصویر درست توی موبایل از کناره‌های صفحه بیرون نمی‌زنه، کشیده یا فشرده دیده نمی‌شه و بخش مهم اون بی‌دلیل برش نمی‌خوره. فایل دانلودشده هم بهتره خیلی بزرگ‌تر از فضای نمایش تصویر نباشه. این موضوع هم روی سئو اثر غیرمستقیم داره و هم تجربه کار با سایتتون رو بهتر می‌کنه.

تفاوت تصویر واکنش‌گرا با کوچک کردن ظاهری عکس

اگه یک عکس ۲۴۰۰ پیکسلی رو با CSS در عرض ۳۲۰ پیکسل نشون بدید، ظاهر اون کوچک می‌شه ولی ممکنه مرورگر هنوز فایل بزرگ رو دانلود کنه. تصویر واکنش‌گرا علاوه بر هماهنگ شدن با عرض صفحه، چند فایل مناسب رو هم به مرورگر معرفی می‌کنه تا شانس دانلود نسخه سبک‌تر بیشتر بشه.

تفاوت واکنش‌گرا بودن تصویر با واکنش‌گرا بودن کل صفحه

srcset انتخاب فایل تصویر رو بهتر می‌کنه، ولی چیدمان صفحه رو درست نمی‌کنه. ستون‌های خیلی عریض، فاصله نامناسب، ارتفاع ثابت یا CSS اشتباه هنوز می‌تونن تصویر رو به‌هم بریزن. پس باید هم خروجی خود تصویر و هم طراحی کل صفحه رو بررسی کنید.

وردپرس چطور نسخه مناسب هر تصویر رو انتخاب می‌کنه

در اصل مرورگر انتخاب نهایی رو انجام می‌ده. وردپرس نسخه‌های موجود و اندازه احتمالی محل نمایش رو معرفی می‌کنه. مرورگر هم عرض صفحه، تراکم پیکسلی و اطلاعات تصویر رو می‌سنجه و یکی از فایل‌ها رو می‌گیره. به همین دلیل ممکنه دو گوشی برای یک تصویر فایل یکسانی دانلود نکنن.

چرا تصاویر سایت توی موبایل درست نمایش داده نمی‌شن

• عرض ثابت یا ابعاد نامناسب تصویر: مقدارهایی مثل width: 900px می‌تونن تصویر رو از صفحه باریک بیرون ببرن.
• تنظیم نبودن قالب یا صفحه‌ساز برای موبایل: ممکنه ستون، کانتینر یا ابزارک تصویر توی نمای موبایل عرض و فاصله درستی نداشته باشه.
• استفاده نادرست از عکس پس‌زمینه: ویژگی background-size: cover بخشی از عکس رو برش می‌ده و نقطه تمرکز تصویر ممکنه از قاب بیرون بره.
• نبودن اندازه‌های مختلف از یک تصویر: تصاویر قدیمی یا فایل‌هایی که خارج از کتابخانه رسانه اضافه شدن، شاید نسخه‌های لازم رو نداشته باشن.
• تداخل کدهای CSS یا تنظیمات بهینه‌سازی: کش، ادغام CSS یا قانون‌های سفارشی ممکنه نتیجه‌ای متفاوت با ویرایشگر نشون بدن.

طراحی ریسپانسیو تصاویر و صفحه‌ها با المنتور

المنتور به شما اجازه می‌ده ظاهر صفحه رو برای دسکتاپ، تبلت و موبایل بررسی کنید و بعضی تنظیمات رو برای هر دستگاه جدا تغییر بدید. یادتون باشه حالت موبایل توی ویرایشگر فقط یک پیش‌نمایشه؛ نتیجه نهایی رو روی صفحه واقعی و ترجیحاً یک گوشی هم ببینید.

المنتور چه تنظیماتی برای موبایل و تبلت داره

صفحه رو با المنتور باز کنید و گزینه مربوط به حالت واکنش‌گرا رو پیدا کنید. جای این گزینه ممکنه با توجه به نسخه المنتور کمی فرق داشته باشه. بعد بین دسکتاپ، تبلت و موبایل جابه‌جا بشید. کنار بعضی گزینه‌ها آیکون دستگاه دیده می‌شه؛ این آیکون یعنی می‌تونید مقدار همون گزینه رو برای اندازه‌های مختلف صفحه جدا تنظیم کنید.

تنظیم عرض، ارتفاع و اندازه تصویر در نسخه موبایل

ابزارک تصویر رو انتخاب کنید و اول عرض اون رو توی حالت موبایل بررسی کنید. برای بیشتر تصاویر داخل محتوا، عرض نسبی و ارتفاع خودکار انتخاب امن‌تریه. اگه ارتفاع ثابتی تعیین می‌کنید، گزینه مربوط به نحوه جا گرفتن تصویر مثل cover یا contain رو هم بررسی کنید؛ cover قاب رو پر می‌کنه ولی ممکنه اطراف عکس رو ببُره.

تنظیم جداگانه تصویر پس‌زمینه برای موبایل

کانتینر یا بخش دلخواهتون رو انتخاب کنید و به تنظیمات استایل و پس‌زمینه برید. اگه نسخه المنتور و تنظیم اون بخش اجازه انتخاب جداگانه برای دستگاه‌ها رو می‌ده، تصویری با کادر مناسب موبایل انتخاب کنید. موقع استفاده از یک فایل مشترک، جایگاه تصویر رو هم تغییر بدید تا سوژه اصلی توی قاب بمونه.

آشنایی بیشتر با طراحی صفحه در المنتور

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

یادگیری المنتور از صفر با آموزش رایگان میهن وردپرس

این آموزش برای چه افرادی مناسبه

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

چه چیزهایی باید یاد بگیرید

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

روش نمایش صحیح تصاویر سایت در موبایل بدون افزونه

انتخاب اندازه مناسب موقع گذاشتن تصویر در نوشته

بعد از اضافه کردن بلوک تصویر، از تنظیمات بلوک اندازه‌ای متناسب با ستون محتوا انتخاب کنید. اگه عرض محتوای سایتتون حدود ۸۰۰ پیکسله، معمولاً گذاشتن فایل چند هزار پیکسلی بدون دلیل فایده‌ای نداره. ولی نسخه خیلی کوچک هم روی نمایشگرهایی که پیکسل‌های فشرده‌تری دارن تار دیده می‌شه.

تنظیم عرض و نسبت تصویر در ویرایشگر وردپرس

روی تصویر کلیک کنید و عرض، تراز و نسبت تصویر رو از نوار کناری بررسی کنید. نسبت تصویر یعنی رابطه عرض و ارتفاع؛ مثلاً نسبت ۱۶ به ۹ یک قاب افقیه. اگه نسبت رو عوض می‌کنید، پیش‌نمایش برش رو ببینید تا صورت، محصول یا نوشته داخل عکس حذف نشه.

جلوگیری از بیرون زدن تصویر از صفحه با CSS

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

.entry-content img {  max-width: 100%;  height: auto;}

این کد اجازه نمی‌ده تصویر داخل بخش محتوا از فضای والد بزرگ‌تر بشه و نسبت طبیعی اون رو هم نگه می‌داره. قبل از افزودن کد، با ابزار Inspect مرورگر مطمئن بشید کلاس محتوای قالب شما واقعاً entry-content هست. همچنین بررسی کنید قانون اختصاصی قالب یا افزونه‌ای به تصویر اندازه ثابت نداده باشه. برای روش‌های امن افزودن کد هم می‌تونید آموزش افزودن CSS و جاوا اسکریپت سفارشی به وردپرس رو بخونید.

تنظیم تصاویر شاخص و تصاویر تمام‌عرض

نمایش تصویر شاخص بیشتر به قالب بستگی داره. اگه تصویر شاخص توی موبایل برش بدی داره، تنظیمات قالب و نسبت تصویر کارت نوشته رو بررسی کنید. برای تصویر تمام‌عرض هم فایل کافی بزرگ انتخاب کنید، ولی کادر امنی بسازید که سوژه اصلی نزدیک لبه‌ها نباشه.

srcset و sizes چه کاری برای تصاویر انجام می‌دن

srcset چطور نسخه‌های مختلف عکس رو به مرورگر معرفی می‌کنه

srcset یک ویژگی داخل تگ <img> هست. این ویژگی نشانی چند نسخه از یک عکس رو همراه با عرض هر فایل فهرست می‌کنه. مرورگر از این فهرست می‌فهمه چه انتخاب‌هایی برای دانلود داره.

sizes چطور اندازه موردنیاز صفحه رو مشخص می‌کنه

sizes به مرورگر می‌گه تصویر در شرایط مختلف تقریباً چه مقدار از عرض صفحه رو می‌گیره. مثلاً ممکنه عکس روی موبایل تقریباً تمام عرض صفحه و روی دسکتاپ فقط بخشی از ستون محتوا باشه. مرورگر این راهنما رو کنار srcset می‌ذاره تا انتخاب دقیق‌تری داشته باشه.

مرورگر چطور بهترین فایل رو برای موبایل انتخاب می‌کنه

مرورگر فقط عرض ظاهری رو نگاه نمی‌کنه. تراکم پیکسلی صفحه، یعنی فشردگی پیکسل‌های نمایشگر، و گزینه‌های موجود هم روی انتخاب اثر دارن. پس دیدن فایلی بزرگ‌تر از عرض CSS همیشه نشانه خرابی نیست؛ یک گوشی با نمایشگر پرتراکم ممکنه برای وضوح بهتر نسخه بزرگ‌تری بگیره.

چطور بفهمیم وردپرس تصاویر واکنش‌گرا رو درست ساخته

بررسی کد تصویر و پیدا کردن srcset و sizes

صفحه منتشرشده رو توی مرورگر باز کنید، روی عکس کلیک راست کنید و Inspect رو بزنید. داخل بخش Elements تگ <img> رو پیدا کنید. اگه ویژگی‌های srcset و sizes دیده می‌شن، وردپرس چند انتخاب رو به مرورگر معرفی کرده. نبودن این ویژگی‌ها برای یک تصویر خاص نیاز به بررسی قالب، شیوه درج عکس و فایل‌های ساخته‌شده داره.

آزمایش صفحه توی حالت موبایل مرورگر

ابزار توسعه مرورگر رو باز کنید و حالت شبیه‌سازی دستگاه رو روشن کنید. چند عرض مختلف رو امتحان کنید، نه فقط نام یک مدل گوشی. بیرون‌زدگی، برش، فضای خالی و جابه‌جایی ناگهانی محتوا رو بررسی کنید. صفحه رو بعد از انتخاب عرض تازه دوباره بارگذاری کنید تا درخواست‌های تصویر از نو ثبت بشن.

بررسی نتیجه روی یک گوشی واقعی

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

بررسی اندازه واقعی فایل دانلودشده

توی ابزار توسعه به بخش Network برید، نمایش درخواست‌های تصویری رو انتخاب کنید و صفحه رو دوباره بارگذاری کنید. نام ستون‌ها و محل نمایش ابعاد توی مرورگرهای مختلف فرق داره. روی درخواست هر تصویر کلیک کنید و نشانی فایل، حجم انتقال و اطلاعات ابعاد اون رو ببینید. با این بررسی می‌فهمید مرورگر واقعاً کدوم نسخه رو گرفته؛ نگاه کردن به کد HTML به‌تنهایی برای این نتیجه کافی نیست.

حل مشکل تصاویر قدیمی سایت

چرا بعضی از تصاویر قدیمی اندازه‌های لازم رو ندارن

وردپرس نسخه‌های کوچک‌تر تصویر رو موقع بارگذاری فایل می‌سازه. اگه بعداً قالب رو عوض کنید یا اندازه تازه‌ای تعریف بشه، فایل‌های قدیمی خودکار صاحب اون اندازه تازه نمی‌شن. همچنین اگه فایل اصلی خیلی کوچک باشه، وردپرس نمی‌تونه نسخه‌ای بزرگ‌تر و باکیفیت‌تر از اون بسازه.

ساخت دوباره اندازه‌های تصاویر بعد از تغییر قالب

برای تصاویر قدیمی باید اندازه‌های لازم دوباره از روی فایل اصلی ساخته بشن. چون ابزار مناسب به هاست، قالب و تعداد تصاویر سایتتون بستگی داره، قبل از نصب هر افزونه‌ای از پشتیبانی قالب یا هاست درباره روش سازگار با سایتتون بپرسید. اگه به WP-CLI، یعنی ابزار خط فرمان وردپرس، دسترسی دارید، این کار از اون مسیر هم انجام‌شدنیه؛ ولی برای کاربر تازه‌کار بهتره پشتیبان فنی اون رو انجام بده.

نکات مهم قبل از بازسازی تصاویر

• از فایل‌ها و پایگاه داده نسخه پشتیبان بگیرید.
• فضای خالی هاست رو بررسی کنید، چون اندازه‌های تازه فضای بیشتری می‌گیرن.
• اول کار رو روی چند تصویر یا محیط آزمایشی امتحان کنید.
• بعد از بازسازی، کش سایت و CDN رو پاک کنید.
• چند نوشته قدیمی، تصویر شاخص و صفحه محصول رو دوباره ببینید.

تفاوت تنظیم تصویر داخل محتوا و تصویر پس‌زمینه

چرا srcset برای تصویر پس‌زمینه خودکار به کار نمی‌ره

تصویر داخل محتوا معمولاً با تگ <img> ساخته می‌شه و می‌تونه srcset داشته باشه. تصویر پس‌زمینه از راه CSS روی یک بخش قرار می‌گیره، پس سازوکار خودکار تگ تصویر رو نداره. به همین دلیل نباید انتظار داشته باشید وردپرس همیشه برای پس‌زمینه هم همون انتخاب خودکار رو انجام بده.

روش تنظیم تصویر پس‌زمینه برای صفحه‌های کوچک

بسته به امکانات صفحه‌ساز، ممکنه بتونید برای موبایل فایل جداگانه، جایگاه متفاوت یا ارتفاع کمتر انتخاب کنید. با CSS هم می‌شه داخل Media Query، یعنی قانونی که فقط در عرض‌های مشخص اجرا می‌شه، تصویر پس‌زمینه دیگه‌ای گذاشت. حتماً نوشته روی تصویر و نقطه تمرکز عکس رو توی عرض‌های مختلف بررسی کنید.

چه زمانی بهتره به‌جای پس‌زمینه از بلوک تصویر استفاده کنید

اگه عکس بخشی از معنی محتواست، بلوک تصویر انتخاب بهتریه. این روش متن جایگزین، ابعاد مشخص و قابلیت‌های واکنش‌گرای وردپرس رو بهتر در اختیارتون می‌ذاره. پس‌زمینه بیشتر برای تصویرهای تزئینی مناسبه؛ یعنی حذف اون‌ها معنی اصلی محتوا رو عوض نمی‌کنه.

بهینه‌سازی تصاویر موبایل برای سرعت بهتر

انتخاب ابعاد درست قبل از بارگذاری

اول بیشترین عرض واقعی تصویر توی سایت رو پیدا کنید و فایل رو نزدیک به همون نیاز خروجی بگیرید. عکس دوربین با ابعاد خیلی بزرگ معمولاً برای یک ستون معمولی سایت لازم نیست. فایل اصلی مناسب، ساخت نسخه‌های کوچک‌تر و مدیریت فضای هاست رو هم راحت‌تر می‌کنه.

فشرده‌سازی عکس بدون افت محسوس کیفیت

فشرده‌سازی حجم فایل رو کم می‌کنه، ولی اگه شدت اون زیاد باشه لبه‌ها و نوشته داخل عکس خراب دیده می‌شن. قبل و بعد از فشرده‌سازی رو با اندازه نمایش واقعی مقایسه کنید. هدف رسیدن به کمترین عدد ممکن نیست؛ باید بین حجم و کیفیت تعادل بسازید.

انتخاب فرمت مناسب برای هر نوع تصویر

JPEG برای خیلی از عکس‌های معمولی انتخاب شناخته‌شده‌ایه. PNG برای شفافیت یا بعضی تصاویر گرافیکی کاربرد داره، ولی ممکنه سنگین بشه. WebP معمولاً حجم مناسبی می‌ده و AVIF هم می‌تونه فشرده‌سازی خوبی داشته باشه. خروجی واقعی، شفافیت و سازگاری روند سایتتون رو قبل از انتخاب نهایی بررسی کنید.

بارگذاری تنبل تصاویر و نکات استفاده از اون

بارگذاری تنبل یا Lazy Loading یعنی عکس‌های پایین صفحه کمی دیرتر دانلود بشن و وقتی کاربر به اون‌ها نزدیک شد بارگذاری شروع بشه. وردپرس برای خیلی از تصاویر این ویژگی رو مدیریت می‌کنه. تصویر اصلی بالای صفحه رو بی‌دلیل تنبل نکنید، چون ممکنه نمایش محتوای مهم رو عقب بندازه.

بعد از بهینه‌سازی، نتیجه رو با Google PageSpeed Insights آزمایش کنید. گزارش سرعت سرنخ خوبی می‌ده، ولی تصمیم نهایی رو با بررسی واقعی صفحه و کیفیت تصویر بگیرید. برای شناخت ارتباط این موضوع با رتبه سایت هم راهنمای تأثیر سرعت سایت در سئو کمکتون می‌کنه.

اشتباه‌های رایج موقع ریسپانسیو کردن تصاویر

• نصب افزونه RICG Responsive Images یا افزونه‌های قدیمی مشابه برای قابلیتی که وردپرس داخل خودش داره.
• بارگذاری عکس خیلی بزرگ و کوچک کردن ظاهری اون فقط با CSS.
• تغییر هم‌زمان عرض و ارتفاع بدون حفظ نسبت تصویر و کشیده شدن عکس.
• استفاده از cover و ندیدن بخش مهمی که توی موبایل برش می‌خوره.
• یکی گرفتن تنظیمات تصویر داخل محتوا با تصویر پس‌زمینه.
• قضاوت فقط از روی پیش‌نمایش و بررسی نکردن صفحه روی اندازه‌های مختلف.

چک‌لیست نهایی نمایش درست تصاویر در موبایل

1. صفحه رو توی چند عرض مختلف بررسی کنید.
2. بیرون نزدن تصاویر از صفحه رو کنترل کنید.
3. نسبت تصویر، محل برش و دیده شدن سوژه اصلی رو بررسی کنید.
4. وجود srcset و sizes رو توی تصاویر داخل محتوا بررسی کنید.
5. فایل دانلودشده توی حالت موبایل رو از بخش Network کنترل کنید.
6. سرعت و کیفیت تصویر رو کنار هم بسنجید.

سؤال‌های پرتکرار درباره تصاویر واکنش‌گرا در وردپرس

تیم تولید محتوا

ما در تیم تولید محتوای میهن وردپرس در تلاش هستیم تا بهترین مقالات آموزشی در زمینه وردپرس و کسب‌و‌کارهای اینترنتی را تهیه کنیم. صحت محتوای این صفحه توسط رضا راد بررسی خواهد شد.