بهینه سازی تصاویر برای سایت وردپرس9 دقیقه

مقدمه

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

در این مقاله، خواهیم دید که چرا تصاویر با حجم زیاد، در رتبه سایت و سئو آن تأثیر منفی می‌گذارد. سپس به بررسی چگونگی فشرده‌سازی مؤثر پرونده‌های چندرسانه‌ای، همراه با برخی از نکات اساسی بهینه‌سازی تصاویر که می‌تواند سئو سایت را بهبود ببخشد، خواهیم پرداخت.

چرا باید عکس‌های سایت وردپرس را بهینه کنیم؟

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

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

در حالی که عوامل زیادی در کند شدن زمان لود سایت وجود دارد؛ تصاویر و فایل‌های چند رسانه‌ای 63 درصد از پهنای باند وب سایت را به خود اختصاص می‌دهند. در نتیجه، بهینه‌سازی تصاویری که در سایت خود بارگذاری می‌کنیم، مهم است. همچنین لازم به ذکر است که سرعت سایت، یکی از مهم‌ترین عوامل رتبه‌بندی گوگل است.

سهم هر محتوا در صفحه

بهینه سازی تصویر، در مورد بهبود دو چیز است:

  • تعداد بایت‌های مورد استفاده برای رمزگذاری هر پیکسل تصویر
  • تعداد کل پیکسل‌های مورد استفاده

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

تصاویر خود را قبل از آپلود در وردپرس بهینه کنید

بهترین سناریوی ممکن برای تصاویر سایت این است که قبل از بارگذاری در سایت، آن‌ها را بهینه کنید. این کار باعث می‌شود که از هر تصویر دقیقاً یک نسخه در سایتتان داشته باشید همان یک نسخه نیز به بهترین شکل ممکن بهینه شده باشد.

فرمت تصاویر

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

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

چه موقع از JPEG استفاده کنیم

فایل‌های JPEG برای چاپ و محتوای وب انتخاب خوبی هستند. از این نوع فایل‌های تصویری با اصطلاحی تحت عنوان فرمت پراتلاف (lossy) یاد می‌شود. هنگامی که یک تصویر بزرگتر به JPEG تبدیل می‌شود، برخی از اطلاعات موجود در پرونده آن از بین می‌رود. به همین دلیل تبدیل یک تصویر به فرمت JPEG اندازه آن را تا حد زیادی کاهش خواهد داد.

این اطلاعات برای نمایش تصویر لازم نیست؛ هرچند برای تصاویر بزرگ باعث افت کیفیت می‌شود، اما این افت کیفیت چندان محسوس نخواهد بود.

چه موقع از PNG استفاده کنیم

فایل‌های PNG نیز دقیقاً مانند JPEG برای محتوای وب مفید هستند؛ اما به روشی متفاوت. از آنجا که تصویر PNG می‌تواند از پس‌زمینه‌ی شفاف (transparent) برخوردار باشد، برای طراحی گرافیک وبسایت و مناسب‌تر هستند.

تصاویر PNG از فرمت فایل بدون اتلاف (lossless) استفاده می‌کنند. این بدان معنی است که هنگام فشرده‌سازی پرونده، تمام اطلاعات مربوط به تصویر حفظ می‌شود. در نتیجه، تصاویر PNG تمایل دارند که از کیفیت بالاتری برخوردار باشند، در نتیجه حجم بیشتری خواهند داشت. این نوع فرمت گزینه خوبی برای گرافیک و نمادها و برای تصاویر با کیفیت بالا هستند.

اندازه تصویر

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

بسیاری از سایت‌ها از تصاویر بزرگ و تغییر اندازه داده نشده استفاده می‌کنند و برای تغییر اندازه هر یک، به مرورگر خود تکیه می‌کنند. این امر باعث استفاده از پهنای باند بیشتر و در نتیجه کند شدن سایت خواهد شد. اگر اندازه طبیعی تصویری 820 ×820 پیکسل باشد و توسط مرورگر به صورت 400 × 400 پیکسل نمایش داده شود، 32400 پیکسل غیر ضروری خواهد بود!

وضوح و سرعت بارگیری صفحه با دستگاهی که تصویر روی آن نمایش داده می‌شود (تلفن همراه ، دسکتاپ و غیره) ارتباط زیادی دارد. با این حال، هنگامی که یک صفحه برای کاربر لود می‌شود، ابتدا مرورگر پرونده را با وضوح کامل آن ارائه می‌دهد؛ سپس آن را در مقیاس پایین قرار می‌دهد تا به خوبی روی صفحه نمایش قرار بگیرد. اگر کاربر از تلفن همراهی استفاده کند که قادر به نمایش تصویری بزرگ‌تر از 400 پیکسل نباشد، احتمالاً محتوای شما را از دست خواهد داد.

با توجه به این نکته، موارد زیر را به خاطر داشته باشید:
  • اندازه تصاویر خود را زیر چند صد کیلو‌بایت نگه دارید، برای این کار آن‌ها را به صورت تصاویر JPEG یا PNG مناسب سایت ذخیره کنید.
  • استاندارد وب برای تصاویر 72 نقطه در هر اینچ (dpi) است، که می‌توان با ذخیره تصاویر در فرمتی که پیش‌تر گفته شد به آن دست یافت.

می‌توانید از نرم‌افزار Photoshop یا Lightroom یا ویرایشگر مشابه استفاده کنید تا اندازه تصویر را به عرض حدود 1500 پیکسل یا کمتر کاهش دهید.

تغییر سایز در فتوشاپ

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

فشرده سازی تصویر

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

فشرده سازی با اتلاف و بی اتلاف

همانطور که قبلاً نیز اشاره کردیم، JPEG و PNG از دو روش مختلف برای فشرده سازی تصویر استفاده می‌کنند. فشرده سازی بدون اتلاف، تمام داده‌های پرونده اصلی را حفظ می‌کند، بدون آنکه کیفیت را قربانی کاهش حجم کند. از طرف دیگر، فشرده سازی با اتلاف برخی از داده‌های موجود در تصویر را حذف می‌کند. این امر می‌تواند منجر به افت بیشتر در کیفیت شود، اما پیشرفت چشم‌گیرتری در سرعت بارگیری صفحه ایجاد کند.

فشرده سازی با اتلاف و بی اتلاف

افزونه‌های فشرده سازی تصویر

تصاویر با بارگذاری سریع، به معنی یک سایت سریع‌تر و در نتیجه سئو بهتر هستند. در این قسمت به معرفی بهترین افزونه‌های بهینه سازی تصویر در وردپرس می‌پردازیم.

Smush Image Compression and Optimization

افزونه فشرده سازی تصویر Smush برای تغییر اندازه، بهینه سازی و فشرده سازی کلیه تصاویر استفاده می‌شود. اگر سایت شما شامل تصاویر زیادی است، از این افزونه استفاده کنید.

ShortPixel Image Optimizer

افزونه ShortPixel همه تصاویر PDF های آپلود شده در کتابخانه رسانه سایت را فشرده می‌کند. این افزونه برای بیشتر انواع فایل، هر دو نوع فشرده سازی با اتلاف و بدون اتلاف را در اختیارتان قرار می‌دهد. اگر عکاس هستید، ممکن است فشرده سازی Glossy JPEG را انتخاب کنید، که از یک الگوریتم بهینه‌سازی با اتلاف استفاده می‌کند.

Compress JPEG & PNG images

آیا به دنبال بهینه سازی JPEG و PNG هستید؟ افزونه فشرده سازی JPEG & PNG از خدمات فشرده سازی تصویر TinyJPG و TinyPNG برای کمک به شما در فشرده سازی تصویر استفاده می‌کند. به طور متوسط، تصاویرJPEG بین 40 تا60 درصد فشرده می‌شوند و تصاویر PNG بین 50 تا 80 درصد و بدون افت کیفیت، فشرده می‌شوند.

بهینه ساز تصویر EWWW

EWWW Image Optimizer یک افزونه دو وظیفه‌ای است. این افزونه هم تصاویر موجود در سایت را بهینه می‌کند و هم موارد جدیدی که آپلود می‌کنید را بررسی می‌کند. علاوه بر این، کنترل زیادی را در مورد چگونگی و میزان فشرده سازی تصاویر فراهم می‌کند.

تصویر شاخص

تصویر شاخص می‌تواند بنا به تصمیم مدیر سایت، در پست‌ها نمایش داده شود یا اینکه تنها در دسته بندی پست‌ها و به صورت تصویر کوچک، برای کاربر قابل نمایش باشد.

تصاویر شاخص معمولاً تصاویر پهن‌تری نسبت به سایر عکس‌ها هستند و عرضی بین 500 تا 900 پیکسل دارند.

نکته: برای به اشتراک گذاشتن یک پست در برخی از شبکه‌های اجتماعی مانند تلگرام، از همین تصاویر شاخص برای به اشتراک گذاری پست استفاده می‌شود. اما برای شبکه‌هایی مانند توویتر یا فیسبوک، می‌توانید با استفاده از افزونه یوآست، تصویر موردنظر را برای اشتراک گذاری تنظیم کنید.

تصویر شاخص پست در فیسبوک

تصاویر خود را پس از بارگذاری در وردپرس بهینه کنید

ما توصیه می‌کنیم تصاویر خود را قبل از بارگذاری آن‌ها در سایت بهینه کنید. با این حال، اگر این امکان وجود ندارد، یا می‌خواهید تصاویر موجود در سایت خود را بهینه کنید، باز هم می‌توانید این کار را انجام دهید. چند روش وجود دارد که می‌تواند به شما در بهینه سازی محتوای خود پس از بارگذاری کمک کند.

تصاویر با لود شدن آهسته (lazy load)

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

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

کش کردن تصاویر

راه دیگر برای افزایش سرعت در سایت، استفاده از ذخیره‌سازی پنهان است. این روش معمولاً داده‌های صفحه سایت را روی سرور ثالث (third-party) نزدیک به مکان کاربر یا در مرورگر او ذخیره می‌کند.

داده‌های EXIF ​​را حذف کنید

داده‌های EXIF ​​به عنوان بخشی از یک فایل تصویری ذخیره می‌شوند و حاوی اطلاعاتی در مورد مکان و چگونگی عکس گرفتن هستند. این اطلاعات به طور خودکار توسط دوربین‌ها به تصاویر اضافه می‌شود، و به طور کلی برای استفاده در سایت لازم نیستند.

از تغییر مسیر URL تصویر جلوگیری کنید

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

جمع‌بندی

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

 

لطفاً به این مطلب رأی بدهید.
5/5 (5)
از این مقاله خوشت اومد؟ به اشتراگ بگذار:

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *