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

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

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

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

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

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

اهمیت رسپانسیو کردن تصاویر در سایت

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

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

معرفی افزونه RICG Responsive Images

قبلاً در مورد طراحی سایت ریسپانسیو یا واکنش گرا توضیحاتی دادیم و گفتیم که چقدر حائز اهمیت است. در این آموزش به شما یاد می‌دهیم که چگونه با استفاده از یک افزونه وردپرس به نام RICG Responsive Images تصاویر سایت خود را رسپانسیو کنید. این افزونه در مخزن وردپرس به ثبت رسیده است و شما برای استفاده از آن نیاز به پرداخت هزینه ندارید.

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

سپس شما برای افزودن تصاویر در اندازه‌های مختلف می‌توانید از تابع add_image_size مانند زیر استفاده کنید. با این تابع می‌توان یک سایز تصویر جدید تعریف کرد. در آخر این کد را در فایل functions.php قالب خود ذخیره نمایید.

<?php add_image_size( $name, $width, $height, $crop ); ?>

این تابع چهار پارامتر دارد که نام، عرض، ارتفاع و کات کردن تصاویر را مشخص می‌کند. مقدار پارامتر $crop به‌صورت پیش‌فرض False است. از این به بعد پس از آپلود تصاویر، تصویر شما با اندازه جدیدی که تعریف کردید هم ذخیره می‌شود.

نحوه کار با افزونه RICG Responsive Images

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

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

امیدواریم که توانسته باشید با این پلاگین تصاویر سایت خود را به‌سادگی رسپانسیو کنید. موفق باشید. 🙂

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

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