در این مقاله به بررسی تاثیر تصاویر بر روی سرعت لود وب سایت خواهیم پرداخت.

1-بهینه سازی حجم تصاویر

ابزار های مختلفی جهت بهینه سازی حجم عکس ها وجود دارد  که یکی از آنها نرم افزار فتوشاپ است. برای انجام این کار کافی است در زمان ذخیره تصاویر مورد نظر،  از منوی FILE گزینه Save For Web را انتخاب کنید.علاوه بر این ابزار های انلاینی نیز وجود دارد که با استفاده از آنها می توانید حجم تصاویر خود را کاهش دهید، در ادامه دو نمونه از انها معرفی شده است:

• compressor.io
• compressjpeg.com

2-مشخص کردن ابعاد عکس

ابعاد تصاویر مورد استفاده را در کد نویسیHTML مشخص کنید.

روش کار:

استفاده از قالب کلی زیر برای عکس ها

<img src="/beyamooz.jpg" alt="" width="470" height="307">

 3-استفاده از عکس ها در اندازه واقعی

از عکس ها با همان ابعادی که هستند استفاده کنید و آنها را با استفاده از HTML تغییر اندازه ندهید.

4-از ادغام تصاویر استفاده کنید.

زمانی که مجبور هستید از چندین عکس در یک صفحه استفاده کنید ، یکی از روش های مفید استفاده از Css Image Sprites می باشد که تمامی تصاویر را به یک تصویر تبدیل می کند. این کار باعث می شود تمام عکس ها در قالب یک عکس نمایش داده شوند و سپس با استفاده از Css و مختصات x,y میتوان  هر عکس را در جای خود فراخوانی کرد. یکی از ابزار های آنلاین برای این کار Css Sprites می باشد.

5-تبدیل عکس ها به Base64 Code

یکی دیگر از روش ها،  تبدیل عکس ها به  کد های Base64 می باشد، که عکس را به کد تبدیل می کند. گرچه در این روش طول کد ممکن است زیاد باشد اما نیاز به درخواست مجدد برای بارگذاری عکس نیست.برای انجام این کار می توانید از Base64 File Encoder استفاده کنید. کافی است که تصویر را انتخاب کنید تا به صورت اتوماتیک  کد تصویر ساخته شود.

6-بهینه سازی تصاویر با استفاده از Gtmetrix

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

 مقالات مرتبط:

افزایش سرعت لود وب سایت بخش1

افزایش سرعت لود وب سایت بخش 2

• قبلی
• بعدی