به طراح وب خوش آمدید.
عناصر بصری مانند تصاویر می توانند محتوای وب سایت شما را جذاب تر کنند. با این حال، اگر اندازه آنها به درستی تنظیم نشده باشد، می توانند آسیب بیشتری نسبت به فایده داشته باشند. یادگیری نحوه استفاده از عرض و ارتفاع واضح برای عناصر تصویر برای حفظ عملکرد سایت شما همراه با زیبایی آن ضروری است.
برای شروع، ابزارهای آنلاین مانند PageSpeed Insights می توانند به شما در شناسایی تصاویر با ابعاد از دست رفته کمک کنند. سپس می توانید این ویژگی ها را به صورت دستی اضافه کنید یا از یک افزونه برای ساده کردن فرآیند استفاده کنید.
چرا باید عرض و ارتفاع صریح را به عناصر تصویر اضافه کنید؟
هر تصویری که به سایت خود اضافه می کنید باید دارای عرض و ارتفاع خاصی باشد. اگر این ویژگی ها وجود نداشته باشند، مرورگر باید فضای مورد نیاز برای نمایش هر تصویر را در حین بارگیری صفحه مربوطه، “حدس بزند”.
در نتیجه، عناصر مختلف می توانند در سراسر صفحه حرکت کنند تا زمانی که مرورگر تغییر اندازه و رندر تصاویر را به پایان برساند. این تغییرات چیدمان می تواند سایت شما را حرفه ای تر جلوه دهد و همچنین بر تجربه کاربر تأثیر منفی بگذارد.
به عنوان مثال، اگر عناصر موجود در صفحه شما حرکت کنند، کاربران ممکن است به طور تصادفی روی عناصر اشتباه کلیک کنند. همچنین باعث می شود بازدیدکنندگان نتوانند به سایت شما پیمایش کنند و به سرعت آنچه را که به دنبال آن هستند پیدا کنند.
علاوه بر این، افست چیدمان تجمعی (CLS) یکی از معیارهای کلیدی Google Core Web Vitals است. حرکت محتوا را هنگام بارگذاری صفحه شما اندازه گیری می کند. امتیاز CLS بالا نشان می دهد که کاربران به طور مکرر طرح بندی را هنگام بازدید از سایت شما تغییر می دهند، که می تواند بر رتبه بندی صفحه شما تأثیر منفی بگذارد.
برای حل این مشکل، باید عرض و ارتفاع عناصر تصویر را به صراحت مشخص کنید. این به مرورگر کمک می کند تا میزان دقیق فضایی را که باید برای فایل های رسانه ای شما اختصاص دهد تعیین کند.
همراه با کاهش تعداد جابجایی های چیدمان، این تمرین ساده می تواند به حداقل رساندن «کار روی رشته اصلی» کمک کند. این اصطلاح به وظایفی اشاره دارد که یک مرورگر هنگام بارگذاری صفحه باید انجام دهد. اگر مرورگر نیاز به محاسبه ابعاد تصاویر شما داشته باشد، این کار باعث افزایش حجم کاری آن و کاهش زمان بارگذاری می شود.
بنابراین، با تعیین ابعاد تصاویر خود، هرگونه حدس و گمان (و وظایف اضافی) را برای مرورگر حذف خواهید کرد. این به آن کمک میکند تا محتوای شما را سریعتر و کارآمدتر بارگیری کند و در نتیجه تجربه کاربری روانتری داشته باشد.
نحوه استفاده از عرض و ارتفاع تصویر واضح در وردپرس
حال بیایید ببینیم که چگونه از عرض و ارتفاع صریح برای عناصر تصویر در وردپرس استفاده کنیم. در دو مرحله بعدی به شما نشان خواهیم داد که چگونه ابعاد از دست رفته را به تصاویر خود اضافه کنید.
مرحله ۱: تصاویری با ابعاد از دست رفته را پیدا کنید.
ابتدا باید بفهمید که کدام تصاویر در سایت شما اندازه ندارند. به طور معمول، به هر تصویری که از طریق کتابخانه رسانه وردپرس یا ویرایشگر بلوک آپلود می کنید، به طور خودکار ویژگی های عرض و ارتفاع اختصاص داده می شود:
با این حال، اگر تصاویر را با استفاده از کد یا صفحهساز اضافه کردهاید، ممکن است ابعادی نداشته باشند. همچنین ممکن است هنگام مهاجرت سایت وردپرس خود از پلتفرم دیگری (مانند Wix) با این مشکل مواجه شوید.
خوشبختانه شناسایی این تصاویر بسیار آسان است. اولین قدم اجرای یک تست عملکرد با استفاده از آمار سرعت صفحه:
آدرس وب سایت خود را وارد کرده و کلیک کنید تجزیه و تحلیل. گزارشی در مورد معیارهای اصلی وب سایت خود دریافت خواهید کرد که شامل تخمینی از تغییرات چیدمان تجمعی است:
در حالت ایده آل، شما باید در هر منطقه امتیاز سبز را هدف بگیرید. با این حال، حتی اگر نمره CLS خوبی کسب کنید، ممکن است همچنان نیاز به استفاده از عرض و ارتفاع صریح برای عناصر تصویر در مکانهای مختلف داشته باشید.
برای دیدن اینکه آیا این مورد است، به پایین به حسابرسی بروید و انتخاب کنید CLS تب این بخش به شما نشان می دهد که آیا صفحه شما تصاویری با ابعاد از دست رفته دارد:
اگر روی عناصر تصویر دارای عرض و ارتفاع صریح نیستندشما حتی خواهید دید که دقیقاً کدام تصاویر نیاز به تعمیر دارند:
برای مشاهده جزئیات بیشتر هر تصویر می توانید روی URL های مربوطه کلیک کنید.
مرحله ۲٫ ابعاد تصویر را به صورت دستی یا با یک افزونه اضافه کنید.
در مرحله بعد، دو روش برای استفاده صریح از عرض و ارتفاع عناصر تصویر را در نظر بگیرید. اگر سایت خود (یا قسمت هایی از آن) را با کد ایجاد کرده اید، می توانید آن را به صورت دستی انجام دهید.
ابتدا به صفحه یا بخشی از سایت خود که حاوی تصویر با مقادیر از دست رفته است بروید. سپس تصویر را پیدا کنید و ویژگی های عرض و ارتفاع آن را مشخص کنید.
به عنوان مثال، کد HMTL برای فایل تصویری شما چیزی شبیه به این خواهد بود:
<img src=" width="640" height="360" alt="Chocolate Cake.">
اگر چندین تصویر با ابعاد از دست رفته دارید یا فقط می خواهید روند را تسریع کنید و از خطا جلوگیری کنید، می توانید از یک افزونه بهینه سازی مانند استفاده کنید. WP Rocket صرفه جویی در زمان این ابزار می تواند تمام کارها را برای شما انجام دهد.
پس از نصب و فعال سازی افزونه در سایت خود، به تنظیمات > WP Rocket و انتخاب کنید رسانه های جمعی برگه:
سپس صفحه را به پایین اسکرول کرده و کادر را علامت بزنید ابعاد تصویر از دست رفته را اضافه کنید:
در نهایت بر روی آن کلیک کنید ذخیره تغییرات. WP Rocket کد HTML سایت شما را برای یافتن تصاویر گم شده جستجو می کند. width
و height
ویژگی های. سپس با استفاده از تابع PHP ابعاد تصویر را استخراج می کند. getimagesize
و با استفاده از آن مقادیر، صفات را اضافه کنید.
بهترین روش های دیگر برای افزودن تصاویر به وردپرس
شایان ذکر است که راه های زیادی برای بهینه سازی تصاویر وردپرس وجود دارد. به عنوان مثال، شما همچنین می توانید برای بهبود بیشتر عملکرد سایت خود، اندازه تصاویر را تغییر دهید.
البته، تغییر اندازه یا فشردهسازی هر تصویری که در وردپرس آپلود میکنید، کار زیادی میطلبد. خوشبختانه پلاگین های زیادی وجود دارد که این کار را برای شما انجام می دهند.
مثلا، Optimol می تواند تصاویر شما را به محض آپلود مقیاس بندی کند. همچنین بسته به مرورگر و دستگاه هر بازدیدکننده، اندازه های صحیح تصویر را برای نمایش انتخاب می کند:
علاوه بر این، این سرویس کاملاً مبتنی بر ابر است. این بدان معنی است که بار روی سرور شما را افزایش نمی دهد و به شما در صرفه جویی در فضای ذخیره سازی کمک می کند.
نتیجه گیری 🧐
تصاویر بدون ویژگیهای عرض و ارتفاع میتوانند منجر به تغییرات بزرگ در طرحبندی هنگام بارگیری سایت شما شوند. این بدان معنی است که عناصر در سراسر صفحه حرکت می کنند تا زمانی که مرورگر ابعاد صحیح را برای همه چیز تعیین کند. این می تواند منجر به دانلود کند و تجربه کاربری ضعیف شود.
برای جمع بندی، در اینجا نحوه افزودن آسان ویژگی های از دست رفته به تصاویر خود آورده شده است:
- 👉 یک تست بزنید آمار سرعت صفحه برای شناسایی تصاویر با مقادیر از دست رفته
- 👉 ابعاد عرض و ارتفاع را به صورت دستی یا با افزونه مانند اضافه کنید WP Rocket.
آیا در مورد نحوه استفاده از عرض و ارتفاع صریح برای عناصر تصویر سؤالی دارید؟ در قسمت نظرات پایین ما را آگاه کنید!