راهنمای بهینه سازی تصاویر برای بهبود عملکرد وب سایت(Optimizing Images)

راهنمای بهینه سازی تصاویر برای بهبود عملکرد وب سایت(Optimizing Images)
میانگین 5 از 3 رای

“یک تصویر ارزش هزار کلمه را دارد” این ضرب المثل معروف نشان دهنده اهمیت تصویر در زندگی روزمره اینترتی  است.

نگران نباش !!در این مقاله قصد دارم تمام جنبه های بهینه سازی تصاویر برای وب و افزایش سرعت بارگذاری را بگم.

راهنمای بهینه سازی تصاویر برای بهبود عملکرد وب سایت(Optimizing Images)

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

1- وب سایت سبکتر

تصاویر سنگین فضای دیسک بیشتری از وب سرور شما را اشغال می کنند و بازیابی آنها از سرور برای نمایش در مرورگر نیازمند پهنای باند بیشتری است.

شاید در مرحله اول به نظرتون بیاد این مسئله برای سایت های با پهنای باند و فضای بزرگ مهم نباشد اما هزینه های میزبانی را بشدت افزایش می دهد. همچنین با این روش سرعت بارگذاری تصاویردر اتصال به اینترنتهای  کم سرعت  2G نیز افزایش چشمگیری دارد.

2- عملکرد پیشرفته

وب سایت های سبک تر زمان لازم برای بارگذاری تمام اطلاعات را فراهم می کنند به خوبی در مقایسه با وب سایت های سنگین تر کار می کنند.

3- کاربر پسند

بازدیدکنندگان به وب سایتی دوباره باز می گردن که سرعت خوبی داشته باشه.

4- مزایای SEO

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

برای مثال ، ما یک محیط تست ایجاد کردیم، که در آن هشت تصویر JPEG با اندازه 1 مگابایت اضافه کردیم.

در زیر نتایج آزمایش را می بینید:

 

قبل از بهینه سازی:

راهنمای بهینه سازی تصاویر برای بهبود عملکرد وب سایت(Optimizing Images)

 

پس از بهینه سازی:

راهنمای بهینه سازی تصاویر برای بهبود عملکرد وب سایت(Optimizing Images)

پس از بهینه سازی تصاویر ما توانستیم زمان بارگیری را از 1.66 ثانیه به 1.41 ثانیه برسیم و تعداد درخواستها از 26 تا 13 کاهش پیدا کند.

 

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

  • فرمت مناسب انتخاب کنید.

تصویر PNG (گرافیک شبکه قابل حمل):

راهنمای بهینه سازی تصاویر برای بهبود عملکرد وب سایت(Optimizing Images)

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

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

 

تصویر(JPEG (Group Experts Photographic Experts:

راهنمای بهینه سازی تصاویر برای بهبود عملکرد وب سایت(Optimizing Images)

کیفیت تصویر این فرمت پایین تر از PNG است و حجم فایل کم است.

از هر دو الگوریتم فشرده سازی lossi و lossless استفاده می کند و در دوربین های دیجیتال و وب استفاده می شود.

تصویر GIF(فرمت تبادل گرافیک):

راهنمای بهینه سازی تصاویر برای بهبود عملکرد وب سایت(Optimizing Images)

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

  • تغییر اندازه تصویرو فشرده سازی را شروع کن.

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

به عنوان مثال، اگر اندازه تصویر شما 2800*4000 پیکسل باشد برای نمایش در وب اندازه را به 400*400 پیکسل تغییر دهید و سپس ارسال کنید.

  • کیفیت تصویر را با چشم خود کنترل کن

راهنمای بهینه سازی تصاویر برای بهبود عملکرد وب سایت(Optimizing Images)

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

کیفیت تصویر می تواند از 100٪ به 0٪ بسته به نیاز شما کاهش یابد. معمولا کیفیت با کاهش 10٪ تا 20٪ تاثیر قابل توجهی در کیفیت تصویر ندارد، اما حجم فایل را چند KB کاهش می دهد.

این کارو را می توان با استفاده از یک نرم افزار ویرایش عکس انجام شود.

 

پیشنهاد میکنم ۱۰ کلید نوشتن مقاله با سئو عالی را هم مطالعه نمایید

 

  •  فشرده سازی از دست رفته و بی حرکت را یاد بگیرید.

تصویر را می توان در فشرده سازی Lossy یا Lossless فشرده کرد. بیایید آنها را یک به یک بررسی کنیم تا هر دو تکنیک را درک کنیم.

 

Lossy

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

این نو فشرده سازی توسط فرمت فایل JPEG انجام می شود.

 

Lossless

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

هر دو روش فشرده سازی Lossy و Lossless را می توان با استفاده از برنامه های  Adobe Photoshop، Affinity Photo و یا FileOptimizer انجام داد.

  • از ابزارهای بهینه سازی عکس استفاده کنید.

چندین نرم افزار ویرایش تصویر رایگان و غیر رایگان وجود دارد که می تواند برای بهینه سازی تصاویر استفاده شود:

  • Adobe Photoshop
  • JPEG Optimizer
  • NET
  • JPEG Mini
  • OptiPNG
  • ImageRecycle
  • FileOptimizer
  • ImageOptim
  • Trimage
  • org

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

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

 

توجه: (اگر چه پلاگین ها عالی هستند و کار با آنها ساده است، ولی هنوز هم بهترین راه فشرده سازی قبل از ارسال به وب می باشد).
  1. EWWW Image Optimizer

راهنمای بهینه سازی تصاویر برای بهبود عملکرد وب سایت(Optimizing Images)

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

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

 

  1. WP Smush

راهنمای بهینه سازی تصاویر برای بهبود عملکرد وب سایت(Optimizing Images)

پلاگین WP Smushیکی دیگر از پلاگین های محبوب وردپرس می باشد. WP Smush به علت عملکرد بالا و رابط کاربر پسند شناخته شده است.

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

 

  1. ShortPixel Image Optimizer

راهنمای بهینه سازی تصاویر برای بهبود عملکرد وب سایت(Optimizing Images)

پلاگین کوتاه پیکسلShortPixel سومین پلاگین وردپرس است. این یک پلاگین هوشمند سازگار با فایرفاکس است که می تواند  فایلهای پی دی اف را همراه با تصاویر فشرده کند. این افزونه از هر دو فشرده سازی Lossless و Lossy  پشتیبانی می کند.

 

SVG ها و مزایای استفاده از آنها چیست

گرافیک برداری مقیاس پذیر یا (SVG)  عمدتا برای تصاویر ساده، آرم ها و متن استفاده می شود. فایل SVG حاوی متن  و خطوط است و  منحنی ها و اشکال را تعریف می کند.

SVG ها از نظر رزولوشن مستقل هستند و می توانند برای هر اندازه صفحه نمایش به سادگی قابل استفاده باشند.

به راحتی می توان آنها را  برنامه ریزی و پیکربندی کرد . مثلا ایجاد نمودار  پویا توسط موتورهای جستجو همانند تصاویر PNG یا JPEG.

این فرمت معمولا اندازه فایل های کوچکتری نسبت به رقبایشان دارند وتوسط اکثر مرورگرهای وب و دستگاه ها پشتیبانی می شود.

 

ساختن برای موبایل

راهنمای بهینه سازی تصاویر برای بهبود عملکرد وب سایت(Optimizing Images)

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

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

  • قبل از ارسال آنها به سرور، تصاویر را به درستی تغییر دهید.
  • فشرده سازی تصاویر برای کاهش حجم فایل غیر ضروری.
  • از SVG در هر کجا استفاده کنید.
  • استفاده از ویژگی های CSS3.
  • تغییر اندازه تصاویر به جای تعریف عرض و ارتفاع در HTML.
  • به جای قرار دادن متون درون تصویر از فونت وب استفاده کنید.
  • از فرمت های فایل (JPEG، PNG و GIF) استفاده کنید.
  • از متن alt استفاده کنید.