چرا نیاز به بهینه‌سازی تصاویر داریم؟
این کار باعث بهبود سرعت سایت شما می‌شود. دیر لود شدن صفحه باعث خسته شدن کاربران می‌شود و احتمال خروج کاربر بیشتر می‌شود.
با استفاده از یک پلاگین خوب بهینه‌سازی میتوان سئو وبسایت را بهبود داد. فایل‌های حجیم سرعت سایت را کاهش می‌دهند و این موضوع بر خلاف الگوریتم‌های موتور جستجو است.
راحت‌تر شدن و سبک شدن فرایند پشتیبانی گیری از سایت.
تصاویر کم حجم، پهنای باند کم‌تری را استفاده می‌کند و باعث کاهش هزینه‌ها می‌شود.
چطور تصاویر سایت را بهینه کنیم؟
هدف اصلی از بهینه‌سازی سرعت سایت بالانس کردن بین کم‌ترین حجم تصویر و کیفیت قابل قبول است. برای بهینه‌سازی تصاویر چند راه وجود دارد. محبوب‌ترین راه بهینه کردن قبل از آپلود بر روی سایت است. معمولا این بهینه‌سازی توسط فتوشاپ انجام می‌شود. در برخی موارد میتوان بهینه‌سازی را توسط پلاگین‌ها انجام داد.
نکته دیگر بهینه‌سازی تصاویر فرمت فایل و نوع فشرده‌سازی است، با انتخاب فرمت مناسب و نوع فشرده سازی مناسب میتوان حجم تصاویر خود را تا ۵ برابر کاهش دهید. پیدا کردن این ترکیب مناسب، نیازمند آزمایش روش‌های مختلف است.
فرمت مناسب فایل را انتخاب کنید
پیش از شروع بهینه‌سازی تصاویر، از انتخاب صحیح فرمت فایل مطمئن شوید. چندین فرمت برای استفاده وجود دارد:
- PNG تصویر با کیفیتی را تولید می‌کند اما فایل حجیمی است
- JPG با این فرمت میتوانید تعادل خوبی بین کیفیت و سایز عکس ایجاد کنید
- GIF فقط از ۲۵۶ رنگ استفاده می‌کند و بهترین انتخاب برای تصاویر متحرک است
چندین فرمت دیگر مانند webp و … وجود دارد توسط تمامی مرورگرها پشتیبانی نمی‌شوند؛ در بهترین حالت باید از JPG برای تصاویری که رنگ کم‌تری دارند و از PNG برای بقیه تصاویر استفاده کنید.
کیفیت و سایز تصویر
در اینجا نمونه‌ای از بهینه سازی بیش از حد قرار داده‌ایم. در تصویر اول فشرده سازی کمی انجام شده است در نتیجه کیفیت و حجم بالایی دارد. در تصویر دوم نرخ بهینه سازی بسیار بالاست در نتیجه کیفیت تصویر بسیار پایین است و تصویر حجم مناسب‌تری دارد.
فشرده سازی کم – ۱۸۱ kb
فشرده سازی بیش از حد – ۳۴ kb
شما برای پیدا کردن حجم مناسب صفحه، باید با استفاده از ابزاری که می‌خواهید تصویر را بهینه کنید، تناسب مناسب کیفیت و حجم سایت خود را پیدا کنید؛ توجه داشته باشید حجم صفحه شما باید کم تر از ۲ MB باشد.
تصویر زیر تناسب درست بهینه سازی این تصویر است، همانطور که مشاهده میکنید این تصویر کیفیت خوبی دارد و حجم آن متناسب صفحات وب است.
فشرده سازی مناسب – ۶۹ kb
تکنیک‌های مختلف بهینه‌سازی را امتحان کنید تا به بهترین ترکیب برسید، شما میتوانید برای بهینه سازی در ویندوز از فتوشاپ و fileOptimizer استفاده کنید.
در ادامه چند ابزار برای بهینه سازی قرار می‌دهیم
- Adobe Photoshop
- Gimp
- Paint.NET
- GIFsicle
- JPEGtran
- JPEG Mini
- OptiPNG
- pngquant
- FileOptimizer
- ImageOptim
- Trimage
- ImageResize.org
تغییر اندازه تصویر
در گذشته خیلی مهم بود تصاویر را در سایز دقیق آپلود کنید و اجازه ندهید سایز آنها توسط CSS تغییر کند. وردپرس در نسخه‌های جدید با داشتن قابلیت ریسپانسیو این مشکل را حل کرده؛ در واقع وردپرس چند نسخه با سایزهای مختلف از تصویر آپلود شده ایجاد می‌کند و انتخاب استفاده از این تصاویر به عهده مرورگر کاربر است.
پلاگین بهینه سازی تصویر
اگر سایت وردپرسی دارید لازم نیست فشرده سازی را دستی انجام دهید، میتوانید از افزونه‌ها استفاده کنید تا برخی از کارها به صورت اتوماتیک انجام شود. چندین پلاگین وجود دارند که تصاویر را هنگام اپلود بهینه می‌کنند و تصاویر قبلی شما را نیز بهینه می‌کنند. این یک ویژگی مهم است به خصوص اگر در گذشته تصاویر را بدون بهینه‌سازی آپلود می‌کردید.
فقط به افزونه ها اعتماد نکنید، مثلا تصویر با حجم ۲MB را روی سایت آپلود نکنید. این کار می‌تواند پر شدن فضای هاست را تسریع کند، بهترین روش تغییر سایز و حجم به صورت افلاین است، از افزونه‌ها برای بهینه‌سازی بیشتر استفاده کنید.
- Imagify Image Optimizer
- ShortPixel Image Optimizer
- Optimole
- EWWW Image Optimizer Cloud
- Optimus Image Optimizer
- WP Smush
- TinyPNG
- ImageRecycle
استفاده از SVG
توصیه می‌کنیم از SVG برای تصاویر خود استفاده کنید، زیرا مقیاس پذیر است که برای لوگوها، متن و تصویر عالی عمل می‌کند در ادامه چند دلیل دیگر را بررسی می‌کنیم:
- این فایل‌ها به طور خودکار در مرورها و ابزارهای ویرایش تصویر مقیاس پذیر هستند و این قابلیت برای گرافیست‌ها فوق‌العاده است.
- این فرمت مانند فرمت‌های رایج به خوبی ایندکس می‌شود.
- SVG از فرمت‌های تصویری رایج کم حجم‌تر است.
