۱۸ روش بهینه‌سازی تصاویر وردپرس – آپدیت 2021

به فکر بهینه‌سازی تصاویر وردپرس هستید؟ می‌خواهید تصاویر سایت خود را بهینه‌سازی کنید؟ بهینه‌سازی تصاویر در سایت یکی از عوامل مهمی است که باعث افزایش سرعت سایت شما می‌شود.

ابزارهای GTmetrix و Google PageSpeed پیشنهادهایی در زمینه بهینه‌سازی تصاویر ارائه می‌دهند اما کامل نیست. من در این مقاله به شما کمک می‌کنم تا در سریع‌ترین زمان تصاویر سایت خود را بهینه‌سازی کنید.

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

۱. تصاویری که بهینه نیست را پیدا کنید

با استفاده از گزارش GTmetrix و Google PageSpeed می‌توانید تصاویری که در بهینه نیستند را در سایت خود پیدا کنید.

• Properly size images: اندازه(ابعاد) تصاویر بزرگ را اصلاح کنید.
• Defer offscreen images: بارگزاری تنبل تصاویر و عکس‌های بکگراند.
• Serve images in next-gen formats: تبدیل پسوندهای JPEG/PNG به WebP
• Efficiently code images: فشرده سازی تصاویر
• Combine images using CSS sprites: تصاویر کوچک را در یک فایل قرار دهید. (با کمک CSS)

۲. استفاده از گزارش قدیمی GTmetrix

نسخه قدیمی‌تر GTmetrix گزارش بهتری از تصاویر بهینه‌سازی ارائه می‌کرد. در نسخه قدیمی تصاویری که مشکل ابعاد داشتند را لیست می‌کرد و اصلاح شده آن‌ها را به ما می‌داد.

برای استفاده از گزارش قدیمی GTmetrix ابتدا باید یک حساب کاربری ایجاد کنید.

سپس به قسمت account > analysis options > default مراجعه کنید و گزینه Enable Legacy Reports را فعال کنید.

• Specify image dimensions: اضافه کردن Widht/Height به عکس‌ها در HTML یا CSS
• Minimize redirects: اصلاح آدرس تصاویر. رکورد www یا Http(s)
• Use a content delivery network: استفاده از شبکه توزیع محتوا یا CDN
• Leverage browser caching: کش کردن تصاویر
• Make favicon small and cacheable: استفاده از فیوآیکن در سایز ۱۶*۱۶ پیکسل و فعال بودن کش روی آن.

۳. Properly Size Images

وقتی ابزارهای GTmetrix یا Google PageSpeed این پیغام را می‌دهند به معنای تغییر سایز تصاویر به ابعاد کوچکتر است.

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

رفع مشکل Properly Size Images:

• از نسخه قدیمی گزارش GTmetrix استفاده کنید.
• از تب PageSpeed گزینه serve scaled images را انتخاب کنید.
• تصاویری که ابعاد بزرگی دارند را پیدا کنید (GTmetrix نسخه اصلاح شده را ارائه کرده در همین قسمت).
• تصاویر قدیمی را با تصاویر جدید جایگزین کنید.

۴. Defer offscreen images

برای به تاخیر انداختن بارگزاری تصاویر از لود تنبل(Lazy load) استفاده کنید.

در وردپرس نسخه ۵٫۵ به بالا لود تنبل تصاویر به صورت داخلی فعال شده است و نیازی به افزونه دیگری ندارید. همچنین اگر از افزونه لایت اسپید کش استفاده می‌کنید، با کمک این افزونه می‌توانید لود تنبل را فعال کنید.

ولی در قسمت‌هایی که با کمک CSS از تصاویر پس زمینه استفاده می‌کنید (خصوصا در المنتور) با کمک افزونه Elementor Lazy Load Background Images به سادگی می‌توانید لود تنبل را برای تصاویر پس زمینه فعال کنید.

۵. تبدیل فرمت تصاویر به WebP

فرمت تمام تصاویر JPEG و PNG در سایت خود را به WebP تبدیل کنید.

اگر از افزونه لایت اسپید کش استفاده می‌کنید، با کمک این افزونه به سادگی می‌توانید تبدیل تصاویر به فرمت WebP را فعال کنید. اگر از این افزونه استفاده نمی‌کنید با کمک افزونه WebP plugin یا WebP Converter For Media می‌توانید تصاویر را به WebP تبدیل کنید.

۶. Efficiently Encode Images

این پیام به معنای فشرده سازی تصاویر است.

برای فشرده سازی تصاویر می‌توانید از نرم افزارهای فوتوشاپ یا Gimp استفاده کنید.گوگل لایت هاس تصاویر را با توجه به فشرده‌سازی ۸۵ درصدی نسبت به سایز اصلی بررسی می‌کند.پس اگر به دنبال امتیاز گوگل لایت‌هاس هستید تصاویر سایت خود را حدود ۸۵ درصد فشرده کنید.

۷. Specify Image Dimensions

این پیام به معنای اضافه کردن Width و Height به تصاویر در HTML یا CSS است.

نگران این قسمت نباشید. اکثر صفحه سازها و قالب‌های وردپرس به صورت خودکار ابعاد تصاویر را به HTML یا CSS اضافه می‌کنند. ولی اگر شما به صورت هارد کد در قسمتی از سایت تصاویری دارید باید عرض و ارتفاع را در کد HTML یا CSS اضافه کنید.

۸. Serve Images From A CDN

هنگامی که شما از CDN استفاده کنید به صورت پیش‌فرض URLهای شما تغییری نمی‌کند. در واقع شما نیاز به CDN Rewrite دارید.

همچنین می‌توانید از افزونه Flying Images برای حل این مشکل استفاده کنید.

۹. Avoid Image URL Redirects

این پیام به معنای اصلاح آدرس تصاویر است.

اگر شما از HTTPS استفاده می‌کنید یا آدرس سایت خود را تغییر داده‌اید (مثلا آدرس دهی تصاویر با رکورد WWW است ولی آدرس دهی سایت بدون رکورد WWW هست)، باید آدرس تصاویر خود را بازبینی کنید و همه آنها را اصلاح کنید. به همین سادگی.

۱۰. Combine Images Using CSS Sprites

فرض کنید مقدار زیادی آیکون PNG دارید (مثلا ۳۰ آیکون). و هر بار بارگزاری صفحه ۳۰ درخواست وجود دارد. شما می‌توانید با کمک CSS سی تصویر را به یک تصویر تبدیل کنید و در قسمت‌های مختلف سایت خود استفاده کنید.

توجه داشته باشید که با وجود آیکون پک‌ها یا فرمت SVG بهتر است از تصاویر کوچک زیاد در سایت خود استفاده نکنید.

۱۱. بهینه‌سازی تصاویر برای موبایل

ایجاد یک راهکار برای تصاویر بهینه تر (کوچکتر و کم حجم‌تر) برای موبایل.

برای انجام این کار می‌توانید از افزونه‌های adaptive images plugins یا ShortPixel Adaptive Images استفاده کنید.

۱۲. Image hotlinking را غیرفعال کنید

Image hotlinking یعنی زمانی که افراد دیگر، از لینک تصاویر شما استفاده در سایت خود استفاده می‌کنند. این مورد بسیار بد است و باعث مصرف پهنای باند و منابع سایت شما می‌شود.

برای غیر فعال کردن این مورد قطعه کد زیر را به فایل .htaccess در هاست خود اضافه کنید.

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)example.com/.*$ [NC]
RewriteRule \.(gif|jpg|jpeg|bmp|zip|rar|mp3|flv|swf|xml|php|png|css|pdf)$ - [F]

۱۳. حذف EXIF تصاویر

EXIF تصاویر به معنای دیافراگم ، سرعت شاتر ، ISO ، فاصله کانونی ، مدل دوربین ، تاریخ عکسبرداری و سایر داده ها در تصویر است. این داده‌ها بی فایده است و نیازی به آن ندارید.

اکثر افزونه‌های بهینه‌سازی تصاویر تنظیماتی مربوط به حذف EXIF تصاویر دارند. مثلا می‌توانید از افزونه ShortPixel برای این کار استفاده کنید.

۱۴. به فکر کاربران با سرعت اینترنت کم باشید

برای آنکه بتوانید امکانی فراهم کنید تا افرادی که سرعت اینترنت کمی دارند تصاویری با حجم کمتر را مشاهده کنند، از افزونه Optimole plugin استفاده کنید.

۱۵. کش کردن تصاویر

در آموزش افزایش سرعت وردپرس به مسئله کشینگ در سایت‌های وردپرسی پرداخته‌ام. من خودم از افزونه LiteSpeed Cache استفاده میکنم. اکثر افزونه‌های کشینگ امکان کش کردن تصاویر سایت را دارند. حتما کشینگ تصاویر را فعال کنید.

۱۶. کشینگ Gravatars

اگر سایتی دارید که در صفحات آن تعداد دیدگاه‌های زیادی دارید حتما آواتار کاربران را کش کنید.

من خودم از افزونه WP User Avatar استفاده می‌کنم. همچنین اگر از لایت اسپید کش استفاده می‌کنید تنظیماتی مربوط به این قسمت را دارد. در این لیست مجموعه‌ای از افزونه‌های کشینگ آواتار را می‌توانید بررسی کنید.

۱۷. تصاویر را در سایت خودتان آپلود کنید

همیشه تصاویر را در سایت خود بارگزاری کنید. هرگز تصاویر را از سایت‌های دیگر کپی نکنید. این کار باعث درخواست اضافی می‌شود.

۱۸. ابزارهای بهینه‌سازی تصاویر

در نهایت، من چند افزونه بهینه‌سازی تصاویر وردپرس را در زیر لیست کردم. توجه کنید از چند افزونه به صورت همزمان استفاده نکنید !

• ShortPixel: فشرده سازی، تغییر اندازه، حذف EXIF
• ShortPixel Adaptive Images: ارائه تصاویر کوچکتر برای دستگاه‌های موبایل
• WebP Converter For Media: تبدیل فرمت تصاویر به WebP
• Elementor Lazy Load Background Images: لود تنبل برای پس زمینه‌های المنتور
• GTmetrix Legacy Reports: نسخه قدیمی گزارش GTmetrix
• Better Search Replace: جستجو و تغییر دسته جمعی برای آدرس‌دهی تصاویر
• Flying Images: بهینه‌سازی تصاویر در شبکه توزیع محتوا
• WP User Avatar: بهینه‌سازی تصویر نظر دهندگان در دیدگاه‌ها
• LiteSpeed Cache: کشینگ تصاویر (پیشنهادی و مهم)

سوالات متداول