مقاله جامع نحوه بهینه سازی تصاویر برای افزایش سرعت سایت

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

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

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

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

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

در ابتدا بهتره که پاسخ این سوالات رو بدونیم: چرا باید تصاویر وب سایتمون رو قالب بندی و بهینه سازی کنیم؟ مزایای این کار چیه؟

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

و از قضا، یکی از راحت‌ترین و بهترین راه‌های بهینه سازی سایت، بهبود حجم تصاویره که البته (نمی‌دونم چرا!) بیشتر مدیران وب سایت‌ها به اون توجه نمی‌کنن.

اما مزایای اصلی بهینه سازی عکس‌ها چی‌ان:

• سرعت لود صفحه شما رو بهبود می‌بخشن و در نتیجه باعث سئوی بهتر می‌شن. البته بارها درباره اهمیت عکس در مقالات اشاره کردیم و حین بحث سئو داخلی گفتیم که گوگل چه اندازه به سرعت سایت و بهینه سازی تصاویر اهمیت می‌ده. کم شدن دیدگاه‌ها، کمتر شدن بازدید کنندگان روزانه و … می‌تونه به دلیل کم بودن سرعت و بیش از حد منتظر موندن کاربران برای لود وب سایت باشه. اگ شما قصد دارید سرعت وب سایت خودتون رو بهبود بخشید، می‌تونید از خدمات منحصربه‌فرد افزایش سرعت سایت میزفا استفاده نمایید.
• فایل‌های بک آپ (پشتیبان) خیلی سریع تر ساخته می‌شن.
• باعث افزایش رتبه سایت در گوگل می‌شه و وب سایت شما نسبت به قبل رنک بهتری در صفحات موتور جستجو می‌گیره. فایل‌های سنگین باعث کاهش سرعت وب سایت شما می‌شن و موتور‌های جستجوگر از وب سایت‌های کند، متنفرن! گوگل دوست داره تصاویر شما رو هرچه سریع‌تر در بخش تصاویر خودش مرتب و ایندکس کنه. تا به حال کنجکاو نشدید که چه مقدار از ترافیک وب سایت شما از طریق بخش تصاویر گوگله؟ وارد گوگل آنالیتیکس وب سایت خودتون بشین و طبق این آموزش ترافیک ورودی از بخش تصاویر گوگل خودتون رو بررسی کنید.
• تصاویر کم حجم، ترافیک کمتری مصرف می‌کنن که شبکه اینترنت و مرورگرها از همچنین تصاویری استقبال می‌کنن.
• حجم کمتری از سرور شما رو اشغال می‌کنن. (بستگی به تعداد تصاویر شاخص بهینه شده شما داره)

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

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

تصاویر JPEG بهینه سازی نشده

در ابتدا ما ۶ تصویر بهینه سازی نشده رو روی وب سایت آپلود کردیم که تمامی اونا سایزی بیشتر از ۱ مگابایت داشتن. این آزمایش رو ما ۵ بار تکرار کردیم تا از تصادفی نبودن نتایج اطمینان پیدا کنیم. همانطور که تو بخش زیر مشاهده می‌کنید، زمان لود وب سایت ما ۱.۵۵ ثانیه در حالتی که صفحه ۱۴.۷ مگابایت حجم داره.

تصاویر JPEG بهینه سازی شده

حالا بعداز بهینه سازی تصاویر با استفاده از افزونه Imagify و حالت اگرسیو، همونطور که مشاهده می‌کنید زمان لود صفحه ما ۴۷۶ میلی ثانیه و حجم صفحه ۲.۹ مگابایت شده. ( این بررسی رو هم ۵ بار تکرار کردیم تا اطمینان کامل حاصل کنیم)

پس از مقایسه نتایج متوجه شدیم که زمان لود وب سایت ما ۵۴.۸۸ درصد و حجم صفحه ۸۰.۲۷ درصد کاهش پیدا کرده.

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

با بهینه سازی تصاویر شما خیلی راحت می‌تونید خطاهای Optimize Images و Serve scaled images در زمان تست سرعت لود صفحه در ابزارهای Google PageSpeed Insights یا GTmetrix رو هم برطرف کنید.

راستی اگر شما هشدار بهینه سازی دیگه‌ای تو بخش هشدار‌های تست سرعت سایت داشتید، مقالات آنالیز سایت با GTMetrix و بخش آنالیز سایت با Pingdom وب سایت میزفا رو بررسی کنید.

نحوه بهینه سازی تصاویر برای وب و عملکرد بهتر وب سایت

هدف اصلی در بهبود تصاویر سایت، پیدا کردن تعادل بین کمترین حجم و بهترین کیفیت قابل قبوله. برای این  بهینه‌سازی، بیشتر از یک راه وجود داره اما یکی از بهترین راه‌های موجود انجام بهینه سازی در تصاویر، فشرده سازی عکس قبل از آپلود در سایته که در بیشتر اوقات با نرم‌افزارهایی مثل Adobe Photoshop و Affinity Photo امکان پذیره. بعضی از بهینه سازی‌ها همتوسط افزونه‌ها انجام می‌شن که در ادامه مقاله به اونا هم می‌پردازیم.

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

انتخاب فرمت فایل تصویری صحیح

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

• فرمت PNG – با کیفیت‌ترین نوع تصویر رو به شما تحویل می‌دهد ولی با حجمی بسیار بالا. برای فشرده سازی تنها از lossless استفاده می‌کنه. البته گاهی فرمت PNG از بقیه فرمت‌ها حجم کمتر و کیفیت بهتری داره و باید تست کرد، مخصوصا در تصاویری که دارای تعداد رنگ کمتر هستند.
• فرمت JPEG – از فشرده سازی lossy و lossless استفاده می‌کنه. شما می‌تونید سطح کیفیت تصاویرتون رو تا دریافت کیفیتی خوب و حجمی قابل قبول کنترل کنید.
• فرمت GIF – تنها از 256 رنگ استفاده می‌کنه. بهترین انتخاب برای تصاویر متحرکه دو تنها از نوع فشرده سازی lossless استفاده می‌کنه.

فرمت‌های دیگه‌ای هم مثل WebP و JPEG XR وجود دارن، ولی خب متاسفانه توسط تمامی مرورگرها پشتیبانی نمی‌شن. در حالت ایده‌آل، شما برای تصاویر حجیم و پر از رنگ بهتره که از فرمت JPG (JPEG) استفاده کنید و برای تصاویر ساده، شفاف (Transparent) و یا عکس های با تعداد رنگ کمتر، از فرمت PNG.

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

تصویر زیر مثالی از فشرده سازی بیش از حده. تصویر اول، تصویری با درجه فشرده سازی بسیار پایین و دریافت بهترین کیفیت (ولی با حجمی بالا)ست. تصویر دوم، تصویری با درجه فشرده سازی حداکثر و دریافت کیفیت بسیار نامناسب و کم (ولی با حجم کم) هستش.

نکته : تصویر اصلی قبل از فشرده سازی حجمی بالغ بر 2.06 مگابایت داشته.

همینطور که می‌بیند، تصویر ابتدایی بیشتر از 540 کیلوبایت حجم داره و به عنوان یه تصویر، بسیار زیبا و پر کیفیته. اگر بتونید صفحه خودتون رو با بقیه تصاویر، کمتر از 1 یا 2 مگابایت نگه دارید، این می‌تونه یه حجم قابل قبول برای تصویر باشه. همچنین در نظر داشته باشید که 590 کیلوبایت نسبت به تصویر اصلی یک چهارم شده. تصویر دوم که از نظر کیفیت غیرقابل قبوله، 39 کیلوبایت حجم داره. کاری  کهشما باید انجام بدید، ایجاد کردن تصویری با کیفیت و حجمی وسطِ بهترین و بدترین کیفیته.

بنابراین ما تصویر رو دوباره فشرده سازی کردیم ولی این بار درجه فشرده سازی رو روی حالت معمولی (Medium در فتوشاپ) قرار دادیم. کیفیت تصویر قابل قبول و حجم اون هم 132 کیلوبایت شد که برای یک تصویر با چنین کیفیت بالایی قابل قبوله. این تصویر حدودا 4x کوچک‌تر از تصویر ابتدایی با فشرده سازی کم و 8x کوچک‌تر از تصویر اصلی شد.

به طور معمول ، تصاویر ساده PNG باید 100 کیلوبایت یا کمتر باشن تا وب سایت بهترین عملکرد رو داشته باشه.

متد بهینه سازی lossy و lossless

یکی از مهم‌ترین مورد‌هایی که باید در بهینه سازی تصاویر به اون توجه کنید، اینه که بین دو متد lossy و lossless برای بهینه سازی تصاویر کدومشون رو انتخاب کنید.

Lossy : یک فیلتر که هنگام بهینه سازی بخشی از داده‌های تصویر رو حذف می‌کنه. این متد تصویر رو ضعیف می‌کنه و باید حین بهینه سازی توجه لازم رو به کیفیت نهایی  تصاویر داشته باشید. حجم تصاویر در این متد بسیار کاهش پیدا می‌کنه. در نرم‌افزار‌هایی مثل Adobe Photoshop ، Affinity Photo و دیگر نرم افزار‌های موجود می‌تونید با انجام یه سری تنظیمات از این متد استفاده کنید و همچنین کیفیت تصویر رو کنترل کنید. برای مثال در Adobe Photoshop حین گرفتن خروجی JPEG از شما متد خروجی رو درخواست می‌کنه که می‌تونید از متد lossy compression و lossless compression استفاده کنید. دومی رو الان توضیح می‌دم.

Lossless : یک فیلتره که حین بهینه سازی، داده‌ها رو فشرده سازی می‌کنه. این متد کیفیت تصویر رو کاهش نمی‌ده ولی تصاویر نباید از قبل فشرده سازی شده باشن تا به بهترین روش عمل کنن. با نرم افزار‌هایی مثلAdobe Photoshop ، Affinity Photo و … و همچنین بعضی از افزونه‌های وردپرس با متد Gzip این کار رو می‌شه انجام داد.

بهتره که برای هر تصویر تکنیک‌های فشرده سازی مختلف رو بررسی کنید تا بهترین کیفیت و حجم رو پیدا کنید. اگر نرم افزار‌ای شما گزینه ذخیره سازی مخصوص وب (Save for Web در فتوشاپ منوی File) رو دارند، مطمئن بشید که به صورت وب ذخیره سازی کنید. این گزینه در بیشتر ادیتورهای تصویر موجوده و به شما اجازه می‌ده که به اندازه مورد نیاز تصویر رو بهینه سازی کنید. شما در فشرده سازی مقداری کیفیت تصویرتون رو از دست می‌دید، بنابراین باید توجه کنید که این مقدار رو کنترل کنید و بهترین انتخاب رو داشته باشید.

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

تو این بخش از مقاله می‌خوایم چندین ابزار و نرم افزار رو به در قالب یه لیست به شما معرفی کنیم که بعضی پولی و بعضی رایگانن و می‌تون تو فرایند بهینه سازی تصاویر بهتون کمک کنن. بعضی‌ از این ابزارها بهینه سازی رو به صورت دستی به خودتون می‌سپارند و بعضی‌هاشون هم به صورت خودکار بهینه سازی رو براتون انجام می‌دن. خود من به شخصه طرفدار نرم افزار Affinity Photo هستم، که هم ارزونه و هم بیشتر امکانات نرم افزار Adobe Photoshop رو داره.

بعضی از ابزار‌ها و نرم افزار‌های خوب برای بهینه سازی تصاویر :

• Adobe Photoshop
• Gimp
• Paint.NET
• GIFsicle
• JPEGtran
• JPEG Mini
• OptiPNG
• pngquant
• FileOptimizer
• ImageOptim
• TinyPNG
• Trimage

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

یکی دیگه از مشکلات موجود در بهینه سازی تصاویر، وقتی رخ می‌ده که باید اونا رو برای مقایس بندی یا سایز (Scale) اقدام به آپلود کنید و اجازه ندید که CSS اندازه اونا رو  تغییر بده. این بخش به اندازه فشرده سازی مهم نیست، اما یه نکته‌ی دیگه ست تا تصاویر شما با حداکثر سرعت ممکن در تمامی دستگاه‌ها اجرا بشن. اگر از وردپرس استفاده می‌کنید، به صورت پیش‌فرض تصاویر شما توسط سیستم تغییر اندازه داده می‌شن. در بخش تنظیمات> رسانه ، می‌تونید حداکثر طول و عرض تصاویر رو تعیین کنید. با این‌کار دیگه CSS تصاویر شما رو با کدگذاری‌های خودش کوچک نمی‌کنه.

بخش رسانه وردپرس به صورت پیش‌فرض ریز تصویرهایی (thumbnails) با توجه به تنظیمات وردپرستان می‌سازه. با این‌حال، تصویر اصلی بدون تغییر سایز و به همان شکل باقی می‌مونه. اگر می‌خواید در حجم وب سایتتون صرفه جویی کنید و تصاویر اصلی رو ذخیره سازی نکنید می‌توونید از افزونه رایگانی به نام Imsanity استفاده کنید.

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

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

افزونه های بهینه سازی که می‌توانید استفاده کنید

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

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

افزونه Imagify Image Optimizer

افزونه Imagify توسط تیم سازنده Wp Rocket ساخته شده و یه افزونه‌ی بسیار عالی در خصوص بهینه سازی سرعت وب سایت محسوب می‌شه و اینم بگم که بسیار پر طرفداره. این افزونه با Woocommerce ، WP Retina و NextGen Gallery سازگاره. همچنین با ویژگی Bulk (بهینه سازی تعداد بالا) می‌تونید تصاویرتن رو با 3 سطح مختلف فشرده سازی یعنی عادی (Normal) ، جسورانه (Aggressive) و فوق العاده (Ultra) فشرده سازی کنید.

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

افزونه ShortPixel Image Optimizer

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

افزونه Optimus Image Optimizer

افزونه Optimus Image Optimizer از متد lossless برای بهینه سازی تصاویر شما استفاده می‌کنه. همونطور که در بالا گفتیم در متد lossless هیچ اطلاعاتی از تصویر شما پاک نمی‌شه. این افزونه از افزونه‌های WooCommerce ، Multi-Site پشتیبانی می‌کنه و یه بخش bulk بسیار خوب داره تا تصاویر آپلود شده قدیمی رو هم بهینه سازی کنه. این افزونه از WP Ratina‌ هم پشتیبانی می‌کنه.

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

افزونه WP Smush

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

در نسخه رایگان می‌تونید ۵۰ تصویر رو در حالت عادی بهینه کنید و اگر نیاز به بهینه سازی دستی داشتید هم می‌تونید هر تصویری که دوست دارید رو به صورت دستی بهینه سازی کنید. Smush می‌تونه فرمت‌های JPEG ، PNG و GIF رو بهینه سازی کنه. همچنین در حالت رایگان Smush تصاویر زیر ۱ مگابایت رو بهینه سازی می‌کنه.

افزونه TinyPNG (همچنین فرمت JPEG را نیز فشرده سازی می‌کند)

افزونه TinyPNG که تحت فضای ابری TinyPNG و TinyJPG می‌تونه ماهیانه ۱۰۰ تصویر رو برای شما بهینه سازی کنه. این افزونه یکی از بهترین‌های وردپرس محسوب می‌شه و می‌تونه تصاویر PNG و JPEG شما رو بهینه سازی کنه.

این افزونه به طور خودکار تصاویر جدید و قدیمی وردپرس شما رو بهینه سازی و همچنین ساختار CMYK رو به RGB تبدیل می‌کنه. به گفته سازنده این پلاگین، می‌تونه تصاویر JPEG را تا ۶۰ درصد و تصاویر PNG را تا ۸۰ درصد بهینه سازی کنه و هیچ تغییری در کیفیت اصلی تصویر ایجاد نشه. این افزونه محدودیتی در حجم تصاویر نداره و صرفا با یه ایمیل می‌تونید از خدماتش بهره‌مند بشید.

افزونه ImageRecycle

افزونه ImageRecycle ، افزونه ایه که تصاویر و فایل‌های PDF شما رو به صورت خودکار بهینه سازی می‌کنه. این افزونه نه تنها در بهینه سازی تصاویر بلکه در بهینه سازی فایل‌های PDF همکارایی داره. یکی از بهترین امکانات این افزونه امکان تعیین کردن کم‌ترین حجم تصویر برای بهینه سازیه. برای مثال، اگر نمی‌خواید که تصاویر با حجم کمتر از ۸۰ کیلوبایت بهینه‌ سازی بشن کافیه  ۸۰ کیلوبایت رو حداقل حجم بهینه سازی قرار بدید. و این باعث می‌شه تاشما از بیش از حد فشرده نشدن تصاویرتون اطمینان پیدا کنید. این افزونه همچنین شامل Bulk برای تصاویر قدیمی (امکان بهینه سازی گروهی عکس های از قبل آپلود شده) می‌شه و همچنین امکان تغییر اندازه خودکار رو هم داره. تو این افزونه، تصاویر تو سرورهای واسطه‌ایِ سازنده آپلود و بهینه سازی می‌شن.

نکته : این افزونه یک تست ۱۵ روزه به کاربران خود هدیه می‌ده ولی به طور کلی افزونه‌ای تجاری به حساب می‌آد و برای استفاده از اون باید هزینه بپردازید. برای خرید این افزونه نیازی نیست که به صورت اشتراکی هزینه پرداخت کنید ولی باید بسته‌هایی مخصوص خریداری کنید که توی اونا تعداد تصاویری که شما مجاز به فشرده سازی هستید از قبل تعیین شده. این بسته ‌ها از ۱۰ دلار برای ۱۰ هزار تصویر شروع می‌شن.

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

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

• فایل‌های SVG در ویرایشگر‌های تصاویر و مرورگرها امکان تغییر مقیاس دارن و برای طراحان وب و گرافیک کاران رویایی طراحی شدن.
• گوگل درست مثل PNG و JPEG ، فایل‌های با فرمت SVG رو هم ایندکس می‌کنه و این نگرانی شما رو بابت سئو برطرف می‌کنه (برخلاف تصاویر با تکنولوژی base64 که اونا رو تا این تاریخ ایندکس نمی‌کنه).
• فایل SVG در بیشتر اوقات (نه همیشه) حجمی کمتر از فایل‌های JPEG و PNG دارن. این باعث می‌شه گزینه خوبی برای افزایش سرعت لود وب سایت محسوب بشن.

در زیر تفاوت ۳ فرمت PNG و JPEG و SVG رو در تصاویر وکتور(برداری) می‌بینید.

فرمت JPEG (پس از بهینه سازی 81.4 کیلوبایت)

فرمت PNG (پس از بهینه سازی 85 کیلوبایت)

فرمت SVG ( پس از بهینه سازی 6 کیلوبایت)

همینطور که در بالا دیدید، تصویر SVG ساده ما حدودا ۹۲.۵۱ درصد از فایل JPG و همچنین حدودا ۹۲.۸۳ درصد از PNG کم حجم تره.

پایان بندی: بهترین روش‌ها

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

• تا جایی که ممکنه از تصاویر وکتور به جای تصاویر PNG و JPEG استفاده کنید.
• از CDN برای افزایش سرعت لود تصاویر توسط کاربران در هرجای جهان استفاده کنید.
• تصاویرتون رو با استفاده از فشرده سازی Gzip ، بهینه سازی کنید.
• بخش‌های غیر ضروری تصاویر رو حذف کنید.
• بخش‌های سفید تصاویر رو پاک کنید و توسط CSS اونا رو بسازید.
• از افکت‌های CSS3 تا جای ممکن استفاده کنید.
• تصاویرتان رو با ابعاد خودشان در html و css سایت لود کنید (اشاره به خطای serve scaled images).
• برای نوشتن متن روی تصاویر از وب فونت‌ها استفاده کنید. (اونا عکس رو بهینه تر می‌کنند و امکان تغییر اندازه هم به شما می‌دن.)
• از تصاویر شطرنجی تنها در بخش‌هایی که اشکال و جزئیات وجود داره استفاده کنید.
• از bit-depth برای کاهش پلات رنگ استفاده کنید.
• در جاهایی که می‌تونید از متد lossy برای فشرده سازی استفاده کنید.
• در صورت نیاز به انیمیشن از GIF استفاده کنید.
• برای پیدا کردن بهترین تنظیم در تصاویر با فرمت‌های مختلف، اونا رو آزمایش کنید.
• اگر بهترین کیفیت و بهترین جزئیات رو نیاز دارید از فرمت PNG استفاده کنید.
• برای تصاویر اصلی و اسکرین شات‌ها از JPEG استفاده کنید.
• مقیاس تصاویر رو نسبت به صفحه نمایش تنظیم کنید تا تعداد پیکسل‌ها کاهش پیدا کنه.
• هر Metadata غیر ضروری رو حذف کنید.
• عملیات فشرده سازی رو تا جای ممکن خودکار کنید.
• در بعضی موارد شما نیازمند لود تنبل برای نمایش تصاویر هستید (مقاله جامع lazy loading چیست رو مطالعه نمایید).
• در ابزاری مثل photoshop تصاویر رو به صورت Save for Web خروجی بگیرید، این گزینه در سربرگ File موجوده.

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

برخی از تصاویر و متن‌ها از سایت kinsta گرفته شده است.