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