تصاویر واکنش گرا در وردپرس

آنچه باید در مورد تصاویر واکنش گرا در وردپرس بدانید

امروزه وردپرس بهترین سیستم مدیریت محتوا (CMS) با امکانات و قابلیت های فراوان است. CMS شما را قادر می سازد تا وب سایت خود را بدون تجربه کدنویسی طراحی کنید. شما می توانید تم ها را نصب کنید و بر اساس نیاز خود افزونه های اضافی نصب کنید و هر تغییراتی که می خواهید بر روی وب سایت خود اعمال کنید.

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

اگر می دانید که عکس واکنش گرا در وردپرس چگونه کار می کند و چگونه تصاویر را برای وب سایت وردپرسی خود بهینه کنید، برای مقابله با این نوع مسائل به شما کمک زیادی می کند.

بعد از آپلود تصویر در ادمین وردپرس چه اتفاقی می افتد

پس از افزودن یک تصویر به کتابخانه وردپرس، CMS به طور خودکار چندین بعد را برای آن تصویر خاص ایجاد می کند. ما همچنین می توانیم 5 اندازه پیش فرض را ببینیم :

تصویر کوچک: دارای حداکثر ارتفاع 150 پیکسل و حداکثر عرض 150 پیکسل

متوسط: دارای حداکثر ارتفاع 300 پیکسل و حداکثر عرض 300 پیکسل است

متوسط بزرگ: حداکثر ارتفاع 768 پیکسل و حداکثر عرض 768 پیکسل

بزرگ: این اندازه دارای حداکثر ارتفاع 1024 پیکسل و حداکثر عرض 1024 پیکسل است.

اندازه کامل: تصویر اصلی آپلود شده است

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

تصاویر واکنش گرا چیست؟

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

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

شما می توانید به صورت دستی اندازه تصاویر را در همه فرمت ها تغییر دهید یا می توانید از هر ابزاری مانند شبکه تحویل محتوا (CDN) برای تغییر اندازه پویا تصاویر استفاده کنید. اگر تصاویر زیادی برای چندین وب سایت دارید، استفاده از ابزارها بهترین گزینه برای شما خواهد بود.

چرا باید از تصاویر واکنش گرا استفاده کنید؟

استفاده از تصاویر ریسپانسیو برای هر وب سایتی برای تجربه بهتر کاربران بسیار ضروری است. دلایل زیادی پشت آن وجود دارد از جمله:

• تجربه ی کاربر

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

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

• افزایش ترافیک موبایل

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

• زمان بارگذاری سریعتر

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

• استفاده کارآمد از پهنای باند

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

تصاویر واکنش گرا در وردپرس چگونه کار می کنند؟

پیش از این در این مقاله، به وردپرس اشاره کردیم که به طور خودکار پنج اندازه مختلف ایجاد می کند. شما می توانید تمام اندازه ها را تغییر دهید یا می توانید اندازه خود را به صورت دستی اضافه کنید. برای کنترل اندازه تصویر در وردپرس باید از ویژگی های تگ تصویر srcset و sizes استفاده کنید.

این ویژگی‌ها به مرورگر اجازه می‌دهد اندازه‌های موجود را پیدا و انتخاب کند و چه زمانی آن اندازه را انتخاب کند.

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

نتیجه :

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