نمایش تصویر با اندازهٔ مناسب در وردپرس و srcset

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

این خطا زمانی ایجاد می شود که شما از یک تصویر بزرگ در یک قسمت کوچک سایت خود استفاده کرده باشید، برای مثال فرض کنید در سایت شما یک لوگو بانک 50 در 50 وجود دارد، در حالی که سایز اصلی این عکس 2000 در 2000 می باشد و توسط Css و یا html این عکس به کاربران نمایش داده می شود، یکی از بدترین اشتباهاتی که یک وب مستر می تواند انجام بدهد، قرار دادن تصاویر بزرگ و کوچک کردن آن با استفاده از html و css می باشد، حال فرض کنید که کاربر برای دریافت چندین لوگو کوچکی که در سایت شما قرار گرفته باشد مجبور باشد چندین فایل حجیم را دانلود کتد. در واقع با تغییر سایز عکس در ادیتور های سیستم مدیریت محتوا، یا کد های قالب نمی تواند حجم عکس را کم کند، این مورد روی سرعت و حجم سایت تاثیر بسیار زیادی دارد.

برای رفع خطا Serve scaled images لازم است سایز اصلی تمام تصاویر موجود در سایت را به سایزی که از آن در قالب یا محتوا سایت خود استفاده کرده اید تغییر دهید و جایگزین کنید و یا در صورتی که توسط html و یا css آن را کوچک کرده اید، به سایز اصلی تغییر بدهید.

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

امیدواریم این مقاله برای شما مفید بوده باشد، منتظر نظرات ارزشمند شما هستیم …

عرض تصویر در موبایل و دسکتاپ را اندازه بگیرید. اندازهٔ موردنیاز نمایشگرهای پرتراکم را هم در نظر بگیرید تا تصویر تار نشود.

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

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

currentSrc و اندازهٔ فایل دریافت‌شده را بررسی کنید. تصویر اصلی بالای صفحه نباید صرفاً برای کوچک کردن حجم، کیفیت نامناسب پیدا کند.

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

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