تصاویر ریسپانسیو در وردپرس؛ تاثیر عکس واکنش گرا در سئو

طراحی و کدنویسی به صورت Responsive یا واکنشگرا یکی از ملزومات طراحی سایت است. در این مطلب روش استفاده از تصاویر ریسپانسیو را یاد می گیریم.

امروزه بیشتر وب سایت ها، به دلیل استفاده بیشتر از تلفن های هوشمند، یک نسخه موبایل دارند. در بیشتر کلاس ها و دوره های طراحی وب سایت نیز به عبارت «First Mobile» در طراحی اشاره می شود. به زبان ساده یعنی ابتدا سایت برای موبایل ها طراحی و سپس برای دسکتاپ و صفحه نمایش های بزرگ تر تبدیل شود. به همین دلیل تکنیکی تحت عنوان «ریسپانسیو» یا همان واکنشگرا ایجاد شد. در این روش استایل وب سایت بر اساس ابعاد صفحه نمایش تغییر می کند. به اصطلاح به ابعاد و دستگاه کاربر واکنش نشان می دهد. یکی از بخش های مهم در طراحی واکنش گرا، تصاویر ریسپانسیو است.

تصاویر نیز باید بر اساس ابعاد و نوع دستگاه تغییر سایز دهند. یکی از مهم ترین دلایل آن، کاهش حجم لود سایت و افزایش سرعت بارگذاری صفحه است. به عنوان مثال در دسکتاپ نیاز به یک تصویر با عرض ۱۰۸۰ پیکسل داریم. اما طبیعتا نیازی به این ابعاد در یک موبایل با صفحه نمایش ۶ اینچی نخواهیم داشت. در این مطلب درباره روش استفاده از تصاویر ریسپانسیو در وردپرس صحبت می کنیم.

تصاویر رسپانسیو در وردپرس

به صورت کلی تصاویر به دو شکل در وردپرس استفاده می شوند. روش اول توسط خود وردپرس، در مطالب و …، توسط ویرایشگر وردپرس ایجاد و در سایت نمایش داده می شوند. گروه دوم تصاویر استفاده شده در قالب و کد نویسی ها است. اولین بار در وردپرس ۴.۴ از این قابلیت در وردپرس استفاده شد. از این نسخه به بعد پس از بارگذاری تصویر، ۵ نسخه کامل، بزرگ، متوسط بزرگ، متوسط و بند انگشتی به صورت خودکار ایجاد می شود. این تصاویر توسط خود وردپرس به صورت تصاویر ریسپانسیو درج می شود. برای این کار نیز وردپرس از srcset ها در تگ تصویر استفاده می کند. برای مثال کد زیر یکی از نمونه ها است:

<img width="1200" height="675"
    srcset="imagename.webp 1200w,
        imagename-300x169.webp 300w,
        imagename-600x338.webp 600w,
        imagename-768x432.webp 768w"
    sizes="(max-width: 1200px) 100vw, 1200px"
    src="imagename.webp">

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

تصاویر responsive با کدنویسی

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

تصاویر چاپ شده توسط توابع وردپرس

همانطور که میدانید، در وردپرس برای چاپ تصویر در حلقه ها از تابع the_post_thumbnail استفاده می کنیم. این تابع امکان دریافت سایز بر اساس ابعاد تعیین شده رسانه ها را دارد. برای مثال در کد زیر از سایز متوسط استفاده می کنیم:

the_post_thumbnail('medium');

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

تصاویر چاپ شده دستی با HTML

در این حالت میتوانیم از تگ جدیدتر و حرفه ای <picture> استفاده کنیم. در این تگ امکان معرفی تصاویر مختلف برای ابعاد مختلف وجود دارد. برای مثال امکان استفاده از یک تصویر مربع و با تمرکز بر روی سوژه به جای یک تصویر تمام صفحه و عریض در دسکتاپ وجود دارد. استفاده از این تگ نیز شباهت زیادی با srcset دارد. برای مثال:

<picture>
    <source media="(max-width: 799px)" srcset="imagename-portrait.webp">
    <source media="(min-width: 800px)" srcset="imagename-800w.webp">
    <img src="imagename-800w.webp" alt="">
</picture>

در این کد به سادگی و با استفاده از مدیا کوئری ها، ابعاد مختلف را درج کرده ایم. در پایان نیز با درج یک تگ img ساده، مرورگر های قدیمی را هدف قرار می دهیم. البته بر اساس اطلاعات ابزار caniuse، تگ picture در بیشتر مرورگر های مدرن قابل استفاده است.

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