وبلاگ نت‌آرامآموزش، تجربه و راهکارهای زیرساخت

بهینه‌سازی تصاویر وردپرس با حفظ کیفیت و شفافیت

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

انتشار:
آخرین ویرایش:
توسط مصطفی جانقربان
۴ دقیقه زمان مطالعه
۲ دیدگاه
محتوای تخصصی، ساده و کاربردی
هماهنگ با هویت حرفه‌ای نت‌آرام
بازگشت به لیست مقالات
تصویر شاخص مقاله بهینه‌سازی تصاویر وردپرس با حفظ کیفیت و شفافیت در وبلاگ نت‌آرام
محتوای آموزشی وبلاگ نت‌آرام
در این مقاله قصد داریم تا آموزش چگونگی رفع خطا Optimize images در نتایج وب سایت Gtmetrix را برای شما کاربران عزیز ارسال کنیم، اگر شما در حال بررسی تست سرعت سایت خود هستید، احتمالا با رنگ قرمز یا زرد خطا Optimize images را دریافت کرده اید، در ادامه به شما توضیح خواهیم داد که علت این خطا چیست و چه تغییراتی باید در وب سایت خود اعمال کنید ؟
رفع خطا Optimize images سایت gtmetrix در وردپرس
رفع خطا Optimize images سایت gtmetrix در وردپرس

علت ایجاد خطا Optimize images در Gtmetrix :

همانطور که اطلاع دارید در بیشتر صفحات وب سایت ها از تصاویر استفاده می شود، تصاویر بخشی جدایی ناپذیر از هر وب سایت مدرن می باشد، شاید بیشترین زمانی که برای بارگذاری وب سایت شما مورد نیاز است مربوط به تصاویر شما باشد، بنابراین مهم است که تصاویر شما کم حجم، بهینه و فشرده شوند، بسیاری از نرم افزار های تولید و ویرایش عکس هنگام خروجی گرفتن یا ذخیره کردن عکس آن را برای پرینت بهینه می کنند و سعی در ذخیره عکس با بالاترین کیفیت دارند، این تصاویر حجم زیادی اشغال می کنند و زمان بارگذاری وب سایت شما، مرورگر کاربر مجبور است تمام تصاویر با کیفیت شما را دانلود کند.
این در حالی است که حتی ممکن است چشم کاربر نتواند تراکم پیکسلی تصویر مورد نظر را تشخیص بدهد، بنابراین این خطا زمانی ایجاد می شود که برخی از تصاویر صفحه مورد نظر برای وب بهینه نشده باشند. روش های بسیار زیادی وجود دارد تا بدون افت کیفیت حجم تصاویر را کاهش داد، بنابراین برای رفع خطا Optimize images تنها لازم است، حجم تصاویر خود را کاهش بدهیم، برای وردپرس نیز افزونه های زیادی طراحی شده است که در ادامه بنده در مورد آنها به شما توضیح خواهم داد.

چگونه تصاویر سایت خود را بهینه کنیم ؟

چند روش برای بهینه سازی تصاویر وجود دارد که هر کدام تاثیر خاص خود را در حجم تصویر شما دارند.
در مرحله اول شما یک قالب یا فرمت مناسب برای تصاویر خود انتخاب کنید، در اغلب موارد فرمت PNG مناسب خواهد بود، اگر قرار است یک تصویر عکاسی آپلود کنید فرمت JPEG یک انتخاب بهتر است. فرمت های TIFF و BMP معمولا سنگین هستند و برای وب سایت مناسب نمی باشند.
در مرحله دوم بهتر است از ابتدا سایز تصویر را کوچک کنید تا حجم تصویر کمتر شود.
پس از انتخاب قالب و تغییر سایز عکس شما می توانید حجم عکس را توسط ابزار های فشرده سازی بدون افت کیفیت تا 98% کاهش دهید، وب سایت های زیادی می توانند این خدمات را به صورت رایگان در اختیار شما قرار دهند، برای مثال وب سایت Tinypng می تواند عملیات کاهش حجم تصاویر png و jpg شما را بدون افت کیفیت انجام دهد.
همچنین شما می توانید از افزونه وردپرس TINYPNG و یا EWWW Image Optimizer برای کاهش خودکار تصاویر وردپرسی خود استفاده نمایید.
امیدواریم مقاله رفع خطا Optimize images برای شما مفید بوده باشد، منتظر نظرات شما هستیم …

توضیح بیشتر برای انجام مراحل

انتخاب ابعاد

عرض واقعی نمایش و تراکم نمایشگر را مبنا قرار دهید. برای موبایل نسخهٔ کوچک و برای نمایش بزرگ نسخهٔ کافی در srcset قرار دهید.

فشرده‌سازی

WebP یا AVIF را با نسخهٔ قبلی مقایسه کنید؛ لوگو و خطوط ظریف ممکن است به کیفیت بالاتر نیاز داشته باشند. alpha، رنگ پس‌زمینه و حجم را کنترل کنید.

نحوهٔ بارگذاری

برای تصویر اصلی بالای صفحه lazy-loading اجباری نگذارید. تصاویر پایین صفحه می‌توانند lazy باشند؛ width و height جلوی پرش چیدمان را می‌گیرند.
در موبایل و دسکتاپ بررسی کنید کدام نسخه دانلود می‌شود. تار شدن، حاشیهٔ رنگی یا بزرگ‌تر شدن حجم خروجی دلیل رد نسخهٔ جدید است.

منابع و ادامهٔ مطالعه

دیدگاه‌ها (۲)

دیدگاه‌های تاییدشده و پاسخ‌های تیم نت‌آرام

محمد

۱۳۹۷/۶/۲۰ ۷:۲۶:۱۶
پاسخ

عالی بود

مصطفی جانقربان

نویسنده مقاله
۱۴۰۱/۱۱/۱۸ ۱۲:۲۳:۴۸
پاسخ

خواهش می کنم محمد عزیز موفق و سلامت باشی برادر