4 تکنیک و روش بهینه سازی تصاویر برای وب - قسمت 1



visibility  
mode_comment   ۰

در این مطلب 4 تکنیک و روش بهینه سازی تصاویر برای استفاده در صفحات وب رو بهتون توضیح میدیم که با استفاده از اونا میتونین سایت خودتون رو بهینه تر کنید و سرعت اون رو افزایش بدین.

4 تکنیک و روش بهینه سازی تصاویر برای استفاده در وب

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

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

تصاویر مهم و بحرانی رو انتخاب کرده و اونا رو Preload کنید

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

شما میتونین از اون برای هر چیزی استفاده کنید ولی باید در نظر داشته باشید که به جز در موارد ضروری و تصایر حیاتی از این مورد استفاده نکنید. فرض کنید که میخوایم تصویر اصلی یک سایت رو Preload کنیم. برای اینکار بصورت زیر عمل میکنیم:

کد بالا رو در قسمت Head سایت خودتون قرار بدین. شما همچنین میتونین از Preload در هدرهای HTTP استفاده کنید. بصورت زیر:

در تصویر زیر دو حالت مختلف از لود شدن تصویر رو مشاهده میکنید که تفاوت استفاده یا عدم استفاده از Preload در اون مشخص شده است:

همونطور که میبینید در مثال بالا تصویر در حالت Preload تقریبا 0.5 ثانیه زودتر لود و نمایش داده شده است. پس در مواقع ضروری از این ویژگی استفاده کنید و تصاویر اصلی خودتون رو زودتر در اختیار کاربر قرار بدین.

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

بهینه سازی SVG با بهینه سازی انواع تصاویر دیگه تفاوت داره چون برخلاف تصاویر PNG و JPG، تصاویر SVG بصورت متنی هستند و شبیه به کدهای XML هست. پس شما از هر روشی که برای فشرده سازی متون استفاده میکنید، میتونین برای بهینه سازی SVG نیز استفاده کنید. علاوه برای این موارد شما میتونین از ابزار SVGO استفاده کنید و سایز فایلهای SVG خودتون رو پایین بیارید.

ابزار SVGO امکانات و ویژگی های زیادی رو در اختیارتون قرار میده که با استفاده از اونا میتونین بصورت کامل بر روی فایلهای SVG خودتون مدیریت داشته باشید و اون چیزای اضافی رو حذف کنید و با اینکار حجم SVG خودتون رو کاهش بدین.

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

تصویر سمت چپ، تصویر اولیه هست و همونطور که مشاهده میکنید 251 نقطه داره و حجم اون تقریبا 21 کیلوبایت هست. زمانی که تصویر رو ساده سازی میکنید، تفاوت چندانی در ظاهر اون به وجود نمیاد ولی تعداد نقاط اون به 152 عدد میرسه و حجم اون هم تقریبا 5 کیلوبایت کاهش پیدا میکنه. شما با این روش ساده و اتوماتیک مسیرهای SVG رو ساده سازی کردید.

در مطلب بعد با ادامه نکات در خدمتتون هستیم.

Source

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.