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

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

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

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

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

نحوه کم کردن حجم عکسها

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

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

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

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

حجم زیاد عکس در قالب نمودار
میانگین داده های هر صفحه وب

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

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

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

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

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

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

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

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

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

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

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

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

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

خطای بهینه سازی تصاویر در PageSpeed Insights
خطای بهینه سازی تصاویر در PageSpeed Insights

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

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

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

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

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

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

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

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

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

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

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

فشرده سازی ضعیف (بالاترین کیفیت) JPG – 543 KB
فشرده سازی ضعیف (بالاترین کیفیت) JPG – 543 KB
فشرده سازی قوی (کمترین کیفیت) JPG – 39 KB
فشرده سازی قوی (کمترین کیفیت) JPG – 39 KB

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

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

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

فشرده سازی معمولی (کیفیت خوب) JPG – 132 KB
فشرده سازی معمولی (کیفیت خوب) JPG – 132 KB

متد بهینه سازی 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 رو داره.

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

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

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

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

تنظیمات بخش رسانه وردپرس
تنظیمات بخش رسانه وردپرس

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

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

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

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

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

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

افزونه Imagify Image Optimizer

افزونه Imagify Image Optimizer
افزونه Imagify Image Optimizer

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

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

محیط کاربری افزونه Imagify
محیط کاربری افزونه Imagify

افزونه ShortPixel Image Optimizer

افزونه ShortPixel Image Optimizer
افزونه ShortPixel Image Optimizer

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

افزونه Optimus Image Optimizer

افزونه Optimus Image Optimizer
افزونه Optimus Image Optimizer

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

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

افزونه WP Smush

افزونه WP Smush
افزونه WP Smush

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

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

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

افزونه TinyPNG
افزونه TinyPNG

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

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

افزونه ImageRecycle

افزونه ImageRecycle
افزونه ImageRecycle

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

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

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

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

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

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

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

فرمت JPEG
فرمت JPEG

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

فرمت PNG
فرمت PNG

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

فرمت SVG
فرمت SVG

همینطور که در بالا دیدید، تصویر 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 گرفته شده است.

علی اسماعیلی
درباره خودم گفتن یا نوشتن کار آسونی نیست. باید تو کم‌ترین حجم مهم‌ترین اطلاعات رو بنویسی. وقتی که اولین بار دستم به کیبورد خورد، ۶ سالم بود. حس جالبی بود؛ زندگیم شده بود ۴ تا کلید WASD روی کیبورد کامپیوتر برای کنترل ماشین. از ۱۰ سالگی که مادرم با فوتوشاپ کار می‌کرد کنارش نشستم و یاد گرفتم. ۱۳ سالم بود که اولین وب‌سایتم رو با پی اچ پی نیوک ایجاد کردم. تا الان وب سایت‌های زیادی رو شروع کردم و شاید به خاطر اینکه هدف تجربه کردن رو داشتم شکست خوردند. موفق‌ترین پروژه شکست خوردم رو می‌تونم اوکسو معرفی کنم که شاید اسمش رو شنیده باشید. الانم دارم کار‌هایی رو شروع می‌کنم چون با خودم عهد کرده بودم که تا بیست سالگی جاهای مختلفی کار کنم و تجربه کنم و بعد از تجربیاتم استفاده کنم. بعد از رسیدن به بیست سالگی خوشحالم که یکی از تجربیات خوبم همکاری با میزفاست و دارم ادامش میدم…

14 نظر

14 پاسخ

  1. هوالرزاق
    سلام و احترام
    در تبدیل تصاویر به webp مشکلی نیست ولی برای تبدیل به svg چرا تصاویر سیاه و سفید میشه ؟
    ممنون

    1. سلام. خود svg ورژن های مختلف داره. ورژن های مختلف تست کنید بررسی کنید.

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

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

      url فارسی بهتر است یا url انگلیسی

  3. سلام
    سایت ن وردپرسی نیست و با ASP .net طراحیش کردم و از بوت استرپ استفاده کردم و وقتی در یک ستون عکس رو قرار می دم نیازی نیست بهش اندازه بدم و در اندازه های مختلف تصویر رو درست نشون میده و مشکلی نداره اما وقتی اندازه تصویر تغییر میکنه در واقع تصویر اصلی داره لود میشه و خب بهینه نیست و از طرفی از بزرگترین سایز صفحه تا کوچکترین سایز، اندازه های مختلفی از تصویر من نشون داده میشه حدودا 20 سایز مختلف (با استفاده از inspect متوجه شدم).
    آیا باید برای همه این 20 سایز تصویر توی سرورم داشته باشم !!!!؟؟؟
    اگر هم یک سایز اصلی رو بذارم که مشکل بهینه سازی به وجود میاد و تصاویر بند انگشتی رو هم حتی از سایز اصلی می خونه…
    میشه بنده رو راهنمایی کنید
    و اینکه سایزهای استاندارد تصاویر بهینه برای سئو چه سایز هایی هستن.
    ببخشید که طولانی شد و ممنون.

    1. سلام میلاد جان. من متوجه نشدم وقتی شما خودتون میگید تصاویر در اندازه های مختلف خوب نشون میده پس مشکل چی هست؟ منظورتون از تغییر تصویر چی هست؟ تغییر تصویر چه ارتباطی به نمایش داره؟ بالاخره یک عکس میره یک عکس دیگه میاد.
      ب نظر من ۲۰ تا تصویر زیاده. شما میتونید یک تصویر درست کنید برای نسخه های لپ تاپ و یکی برای نسخه های تبلت و یکی هم برای موبایلی ها.
      اندازه هم کلا بستگی به سایت و محتوا و اهداف سایت دره.
      امیدوارم نظرم براتون مفید باشه.

  4. سلام و ممنون از مطالب بسیار عالیتون
    ی سوال از خدمتتون داشتم
    سایتم رو که در گوگل اسپید تست می کنم یک ارور جدید برای تصاویر میده به اسم Serve images in next-gen formats
    فرمتی هم که برای تصاویر استفاده کردم، jpg هست و داخل فتوشاپ حجم تصاویر کم شده ، یکی دو سایت دیگه رو هم که بررسی کردم از فرمت jpg استفاده کردند ولی برای آنها ارور نمیده
    اگه ممکنه لطفا بفرمائید که مشکل از چی هست و راهکارش چیه

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

  5. بهینه سازی عکس در عین سادگی بسیار میتونه تاثیر گذار باشه.
    5 تا پلاگین برتر بهینه سازی عکس در وردپرس را هم طی سعی و خطایی ک کردیم- به اینا رسیدیم
    EWWW Image Optimizer
    Smush Image Compression and Optimization
    reSmush.it
    Compress JPEG & PNG images
    ShortPixel Image Optimizer

    1. بله کاملا درسته، ممنون که تجربه‌تون در اختیار گذاشتید.

  6. سلام
    امروز در html improve وبمستر دیدم که تعداد حدود 50 تایی Duplicate title tags داده بود که اکثرش برای عکس هستند!
    همان عکس تکرار شده و آخرش به ترتیب 1234 اضافه شده. البته همه عکس ها یک بار در سایت استفاده شده اند
    تعدادی را پاک کردم

    آیا همه عکس های سایت باید نامهای متفاوت و منحصر به فردی داشته باشند؟

    1. سلام، بستگی داره که ایا سایت ما عکس محور هست یا نه، در حالت کلی خیلی مهم نیست و پیشنهاد هم نمیشه صفحات مخصوص عکس ها رو به گوگل معرفی کنید.

  7. سلام ممنونم از وب سایت عالی و مطالب عالیتون
    من در کسب و کارم کوتاه کننده لينک استفاده نمودم
    با تشکر

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

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

نشانی ایمیل شما منتشر نخواهد شد.

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر