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

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

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

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

ما چندین نوع روش برای کم کردن حجم تصاویر بدون افت کیفیت داریم که در اکثر مواقع همه ی آنها به خوبی کار میکنند ، در اینجا شمارا با این آها آشنا میکنیم :

 

 

انواع تایپ فایل های تصاویر و زمان استقاده از آن ها :

ما در هنگام ساخت وب سایت ۳ نوع فایل تصویری داریم که عباتند از JPG ، PNG و SVG

 

JPG : این نوع از تایپ تصویر معمولا برای تصاویری همچون مناظر ویا عکس هایی هستند که مردم میگیرند و عمدتا در متن یک مقاله و یا وبلاگ استفاده می شود که اندازه آن باید بین ۲۰-۵۰ کیلوبایت باشد که این حجم وقتی شما از برای تصویر پس زمینه استقاده کنید در بیشترین حالت به ۵۰۰ کیلوبایت میرسد که متوس این اندازه باید ۲۰۰ کیلوبایت باشد .

تصاویر JPG در هنگام دوباره فشرده سازی و تغییر اندازه کیفیت خود را حفظ نمیکنند و توسط طراحان وب مورد استفاده قرار نمیگیرند .

 

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

 

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

 

ما به عنوان مثال  از ۲ تصویر PNG که مربوط به Silver Insider و Bozeman می باشد استفاده میکنیم که تا آنها ره بطور استاندارد فشرده کنیم .

 

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

 

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

 

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

 

 

تکنیک های بهینه سازی تصاویر :

برای بدست اوردن بهترین خروجی از ۲ نرم افزار استفاده میکنیم برای این کار ، یکی ImageOptim که یک ابزار آنلابن برای JPG و PNG می باشد و دیگری TinyPng که هم افزونه ای برای وردپرس دارد و هم میتوانید بصورت وب اپلیکیشن استفاده کنید .

 

 

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

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

 

وب سایت ImageOptim یکی از وبسایت های بسیار مهم و حرفه ای در این کار میباشد ، برای تصاویر بک گراند باید از اندازه های ۱۶۰۰×۱۲۰۰ استفاده کنیم و برای متصاویر داخل متن مقاله ما بین ۲۰۰ الی ۸۰۰ پیکسل استفاده شود .

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

 

تصاویر Retina JPG :

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

 

 

بهینه سازی تصاویر PNG :

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

 

خب برای پر استفاده ترین نوع تصویری که در سطح وب استفاده می شود ، از فتوشاپ استفاده میکنیم ، در این ترفند ، شما با گزینه “Save For Web” یک خروجی ۲۵۶ رنگ تحویل میگیرد ، در این قسمت انتخاب با خود شماست ( تیم آیم سئو TinyPng را پیشنهاد میدهد ) یکی از این وب سایت ها را بازکنید و تصویر مورد نظر را آپلود  کنید ، وب سایت ها با تبدیل ۲۵۶ رنک به ۵ رنگ بطور چشمگیری حجم تصویر را کم میکند .

 

 

نتیجه گیری :

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

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

 

 

منیع : ۱stwebdesigner

تاریخ انتشار : ۲۹ دی