آموزش بهینه سازی تصاویر سایت

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

بهینه سازی تصاویر سایت چیست؟

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

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

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

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

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

در ادامه نگاهی به مزایای اصلی بهینه سازی تصاویر وبسایت میندازیم:

• اگر سرعت لود صفحات شما خیلی طولانی شود ممکن است کاربر خسته شده و به سراغ سایت دیگری برود. این کار منجر به تجربه کاربری ضعیف می‌شود.
• فایل‌های بزرگ می‌توانند سایت شما را کند کرده و باعث شود که موتورهای جستجو رتبه پایین‌تری به وبسایت شما بدهند.
• حجم کم تصاویر باعث می‌شود تا از پهنای باند کمتری استفاده شود. همچنین به فضای ذخیره سازی کمتری در سرور شما نیاز است.
• بهینه سازی تصاویر وبسایت به افزایش تجربه کاربری کمک می‌کند. این مهم باعث می‌شود تا کاربران رضایت بیشتری از وبسایت شما داشته باشند.

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

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

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

فرمت مناسب برای تصاویر سایت

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

• PNG: تصاویر با کیفیت بالاتر تولید می‌کند اما همچنین دارای اندازه فایل بزرگ‌تری است. از فشرده سازی بی‌اتلافLossless) ) ایجاد شده است، اگرچه می‌تواند ضررآور نیز باشد.
• JPEG: از فشرده سازی بی‌اتلاف و با اتلاف Lossy)) استفاده می‌کند. شما می‌توانید سطح کیفیت عکس‌ها را برای تعادل مناسب کیفیت و اندازه فایل تنظیم کنید.
• GIF: فقط از 256 رنگ بهره می‌برد. این فرمت بهترین انتخاب برای تصاویر متحرک است. GIF فقط از فشرده سازی بی‌اتلاف استفاده می‌کند.

چندین مورد دیگر مانند «JPEG XR» و «WebP» نیز وجود دارند اما همه مرورگرها از آنها پشتیبانی جهانی نمی‌کنند. در حالت ایده آل، شما باید از تصاویر «JPEG» یا «JPG» برای تصاویر با رنگ زیاد و از «PNG» برای تصاویر ساده استفاده کنید.

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

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

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

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

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

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

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

تصویر دوم بی‌کیفیت به نظر می‌رسد اما تنها 68 کیلوبایت حجم دارد. کاری که باید انجام دهید، یافتن یک رابطه بین میزان فشرده سازی (کیفیت) و اندازه فایل است. بنابراین ما دوباره تصویر را با فشرده سازی متوسط ​​ذخیره کردیم و همانطور که در تصویر زیر می‌بینید، کیفیت به نظر خوب می‌رسد و اندازه فایل 151 کیلوبایت است که برای یک عکس با وضوح بالا قابل قبول است. این مقدار تقریباً چهار برابر کوچک‌تر از عکس اصلی با فشرده سازی کم است. به طور معمول تصاویر ساده‌تری مانند «PNG»، برای عملکرد بهتر باید کمتر از 100 کیلوبایت یا کمتر باشند.

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

بسیاری از ابزارها و برنامه‌ها وجود دارند، چه پولی و چه رایگان که می‌توانید برای بهینه سازی تصاویر خود از آنها استفاده کنید. ما شخصاً از طرفداران بزرگ «Affinity Photo» هستیم زیرا ارزان است و ویژگی‌های تقریباً مشابه فتوشاپ را در اختیار شما قرار می‌دهد. در ادامه چند ابزار و برنامه اضافی برای بررسی وجود دارند:

• Adobe Photoshop
• Gimp
• NET
• GIFsicle
• JPEGtran
• JPEG Mini
• OptiPNG
• pngquant
• FileOptimizer
• ImageOptim
• Trimage
• org

پلاگین‌های بهینه سازی تصاویر سایت

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

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

Imagify Image Optimizer

افزونه Imagify توسط تیم خلق کننده WP Rocket ایجاد شده است که احتمالاً اکثر شما با آن آشنایی دارید. این پلاگین با WooCommerce ،NextGen Gallery و WP Retina سازگار است. همچنین این افزونه دارای یک ویژگی بهینه سازی انبوه است و شما می‌توانید از بین سه سطح مختلف فشرده سازی Normal ،Aggressive و Ultra یکی را انتخاب کنید.

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

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

ShortPixel Image Optimizer

ShortPixel Image Optimizer یک افزونه رایگان است که ماهانه 100 تصویر را فشرده می‌کند و چندین نوع فایل از جمله PNG ،JPG ،GIF ،WebP و حتی فایل‌های PDF را فشرده می‌کند. این پلاگین هم فشرده سازی تصویر lossy and lossless را انجام می‌دهد. CMYK را به RGB تبدیل خواهد کرد.

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

Optimole

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

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

تمام تصاویری که Optimole فشرده می‌شود، از طریق CDN سریع ارائه می‌شوند. اگر به پهنای باند اضافی و فضای پردازش نیاز دارید، می‌توانید Optimole را رایگان امتحان کنید یا آن را به برنامه Premium ارتقا دهید.

EWWW Image Optimizer Cloud

EWWW Image Optimizer Cloud به شما کمک می‌کند تا تصاویر خود را کوچک‌تر کنید تا سرعت سایت خود افزایش دهید. بدون محدودیت اندازه و انعطاف پذیری فراوان، می‌توانید از پیش فرض‌ها استفاده کرده یا پلاگین را کاملاً مطابق میل خود تنظیم کنید. همه کاربران EWWW IO می‌توانند برای فشرده سازی تصاویر موجود خود از Bulk Optimizer یا از حالت لیست کتابخانه رسانه برای انتخاب و انتخاب تصاویر خاص برای فشرده سازی استفاده کنند.

پوشه‌های اضافی را می‌توان اسکن کرد تا مطمئن شوید تک تک تصاویر سایت شما به درستی بهینه شده‌اند. EWWW IO حتی به شما این امکان را می‌دهد تا تصاویر خود را به فرمت‌های نسل بعدی مانند WebP تبدیل کنید یا با گزینه‌های تبدیل چند فرمت بهترین فرمت را برای یک تصویر پیدا کنید. این افزونه ویژگیExactDN ، فشرده سازی خودکار (بدون نیاز به فشرده سازی سمت سرور)، تغییر اندازه خودکار و تمام مزایای CDN برای نتایج سریع تر و حتی عملکرد بیشتر در هر اندازه دستگاه را به همراه دارد.

Optimus Image Optimizer

Optimus WordPress Image Optimizer از فشرده سازی فشرده سازی بی‌اتلاف برای بهینه سازی تصاویر شما استفاده می‌کند. فشرده سازی بی‌اتلاف به معنای از دست دادن کیفیت نیست. این پلاگین از WooCoomerce و چند سایت پشتیبانی می‌کند و دارای ویژگی بهینه سازی انبوه برای افرادی است که عکس‌های زیادی دارند.

همچنین با افزونه WP Retina WordPress سازگار است. این افزونه یک نسخه رایگان دارد. در نسخه پولی سالانه یکبار پرداخت می‌کنید و می‌توانید مقدار نامحدودی از تصاویر را فشرده کنید. اگر آن را با افزونه Cache Enabler ترکیب کنید، می‌توانید به تصاویر WebP نیز بپردازید که یک فرمت تصویری سبک از گوگل است.

WP Smush

WP Smush هم نسخه رایگان و هم نسخه پولی دارد. این افزونه باعث کاهش اطلاعات پنهان از تصاویر برای کم شدن اندازه بدون کاهش کیفیت می‌شود. با بارگذاری تصاویر در سایت، تصاویر را اسکن و کاهش می‌دهید. همچنین تصاویری که قبلاً بارگذاری کرده‌اید را اسکن کرده و تصاویر را نیز کاهش خواهد داد.

به طور انبوه حداکثر 50 فایل را به یکباره خرد می‌کند. در صورت تمایل می‌توانید دستی هم آن را کاهش دهید. این نوع تصاویر JPEG ،GIF و PNG را خرد خواهد کرد. اندازه فایل‌ها به یک مگابایت محدود می‌شوند. با برخی از محبوب‌ترین پلاگین‌های کتابخانه رسانه مانند WP All Import و WPML سازگار است. تمام بهینه سازی تصاویر با تکنیک‌های فشرده سازی بدون از دست دادن کیفیت انجام می‌شود. مهم نیست که تصاویر خود را در کدام دایرکتوری ذخیره می‌کنید زیرا Smush آنها را پیدا کرده و فشرده می‌کند.

TinyPNG

TinyPNG برای بهینه سازی تصاویر JPG و PNG خود از سرویس‌های TinyJPG و TinyPNG استفاده می‌کند. حساب رایگان به شما این امکان را می‌دهد تا در ماه حدود 100 عکس را فشرده کنید). این تصاویر به صورت خودکار فشرده شده و تصاویر موجود شما را فشرده سازی می‌کند. این افزونه CMYK را به RBG تبدیل کرده تا فضای بیشتری ذخیره کند. تصاویر JPEG را تا 60 درصد و تصاویر PNG را تا 80 درصد بدون افت قابل مشاهده در کیفیت تصویر فشرده می‌کند و محدودیت اندازه فایل ندارد.

ImageRecycle

افزونه ImageRecyle یک بهینه ساز تصویر و PDF به صورت خودکار است. این افزونه علاوه بر فشرده سازی تصویر، بر PDF‌ها نیز تمرکز دارد. یکی از ویژگی‌های بسیار مفید این پلاگین توانایی تنظیم حداقل اندازه فایل برای فشرده سازی است. به عنوان مثال، اگر تصاویری با اندازه 80 کیلوبایت داشته باشید، می‌تواند به صورت خودکار آنها را از فشرده سازی حذف کند. این افزونه اطمینان می‌دهد که تصاویر و فایل‌ها هرگز زیاد فشرده نشوند. همچنین شامل بهینه سازی انبوه و تغییر اندازه خودکار تصویر است. این پلاگین 15 روز دوره تست رایگان دارد.

بهینه سازی تصاویر سایت با فرمت SVG

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

• SVG‌ها به طور خودکار هم در مرورگرها و هم در ابزارهای ویرایش عکس مقیاس پذیر هستند. این باعث می‌شود یک وب و طراحان گرافیک رویایی داشته باشند.
• گوگل ‌SVG‌ها را نمایه سازی می‌کند، به همان روشی که ‌PNG‌ها و ‌JPG‌ها را انجام می‌دهد، بنابراین دیگر نگران سئو نباشید.
• اندازه پرونده‌های SVG به طور سنتی از PNG یا JPG کمتر است. این می‌تواند باعث بارگذاری سریع‌تر شود.

همانطور که در بالا مشاهده می‌کنید، SVG در مقایسه با JPG در اندازه فایل 92.51 درصد کاهش یافته است و وقتی با PNG مقایسه می‌شود، این مقدار در حدود 92.83 درصد است.

کلام آخر

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