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

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

بهینه سازی تصویر در توسعه وب پیشرفته:

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

نوع فرمت و زمان استفاده از آن ها:
همانطور که می دانید تصاویر سه نوع فرمت دارند که به هنگام طراحی سایت از آن ها استفاده می شود. این سه نوع فرمت عبارتند از : jpg، Pngand ، Svg

Jpg بیشتر برای عکس هایی همچون عکس منظره، افراد یا صحنه ها به کار می رود. برای گنجاندن تصویر در محتوا همچون پست وبلاگ یا مقاله، معمولا از تصاویری با اندازه ۲۰ الی ۷۰ کیلوبایت استفاده می شود.
تصاویر بزرگ تر بک گراند را می توان تا ۵۰۰ کیلوبایت نیز انتخاب کرد اما ۲۰۰ کیلوبایت ایده بهتری است. Jpg ها ممکن است کیفیت خوبی نداشته باشند زیرا هر باری که آن ها را اکسپورت می کنید دوباره فشرده می شوند و از کیفتشان کم می شود. اگر در تصویر خود گرادیان دارید می توانید تصویر را به دو برش جدا کنید. در این شرایط می توانید گرادیان را در یک بک گراند جداگانه به کمک گرادیان CSS رندر کنید.

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

بیشتر بدانید :  google lighthouse چیست؟

SVG ها کیفیت بهتری نسبت به دو گزینه قبل دارند و برای کارهای وکتوری مورد استفاده قرار می گیرند زیرا مقیاس پذیری خوبی دارند. ما اغلب از این نوع فایل برای لوگوها استفاده می کنیم با اینحال SVG کار بیشتری بر روی مرورگرها تحمیل می کند و باعث می شود رندر آن طولانی گردد. اینکار به بارگذاری کند صفحات منجر می شود. به همین خاطر کیفیت تصویر باید در برابر پیچیدگی آن به تعادل برسد. به عنوان مثال از PNG و SVG برای طراحی لوگوی سایت های Silver Screen Insider و Bozeman Websites استفاده شده. در اولی، از فرمت SVG برای اینکار استفاده شد.

برای آگاهی بیشتر در مورد دیگر خدمات آژانس دیجیتال مارکتینگ بهیدو همین حالا با ما تماس بگیرید .

 

برای سایت Bozeman Websites به خاطر پیچیدگی موجود در انیمیشن های CSS به هنگام اسکرول کاربر به سمت پایین صفحه، بیشتر از فرمت PNG استفاده شده تا عملکرد مرورگر دچار مشکل نشود. برخی از اوقات بهترین راه حل استفاده ترکیبی از این فرمت هاست. به عنوان مثال برای لوگوی سایت jtech بخش JT از فرمت PNG و بخش Celebrating 20 Years از فرمت SVG استفاده می کند تا بتواند کیفیت تصویر را حفظ نماید.

تکنیک های بهینه سازی:

خوب برای اینکه بهترین نتیجه ممکن را از تصاویر خود دریافت کنیم باید آن ها را بهینه سازی نماییم. به همین خاطر ما از سه برنامه ImageOptim( برای فرمت JPG و PNG)، ImageAlpha( برای PNG) و Scour( برای SVG) استفاده خواهیم کرد.

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

بهینه سازی تصویر
همانطور که قبلا بیان کردیم برای بهینه سازی تصاویری که دارای فرمت JPG هستند می توان از برنامه ای همچون ImageOptim استفاده کرد که اندازه فایل های JPG و PNG را کاهش می دهد. برای تصاویر بزرگ تر همچون آن هایی که برای بک گراند مورد استفاده قرار می گیرند می توان از ابعاد ۱۶۰۰ در ۱۲۰۰ پیکسل استفاده نمود. برای تصاویر معمولی مثل تصاویری که در پست های وبلاگی گنجانده می شود از ابعاد بین ۲۰۰ الی ۸۰۰ پیکسل عرض استفاده می شود. بعد از تغییر سایز تصویر، زمان تعیین رزولوشون نهایی آن فرا می رسد. تصویر در فتوشاپ قرار می گیرد تا بهترین کیفیت آن تعیین گردد.

بیشتر بدانید :  طراحی سایت با استفاده از cms بهتر است یا با کد نویسی ؟

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

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

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

بهینه سازی تصویر
برای تصاویر PNG به کمک PNG24 در گزینه save for web در فتوشاپ به یک خروجی دست پیدا می کنیم و سپس تصویر به دست آمده را در نرم افزار Imageoptim قرار می دهیم. اگر این نرم افزار تشخیص دهد که تصویر شما کمتر از ۲۵۶ رنگ دارد بدون کاهش کیفیت، آن را به PNG8 تبدیل می کند که فرمت فایل ساده تری است و می تواند فایل های بسیار سبک تری ایجاد کند. در این نرم افزار، خروجی نهایی تصویری که پیچیدگی زیادی ندارد( رنگ های اندک، شکل های ساده تر و رزولوشون کمتر از ۲۰۰ در ۲۰۰) ممکن است اندازه متغیری همچون ۱۵ کیلوبایت تا زیر ۱ کیلو بایت داشته باشد.

بهینه سازی تصویر با فرمت PNG بزرگ تر:
برای تصاویر پیچیده تر اگر نتوانید فایلی بین ۱۵ الی ۵۰ کیلوبایت با نرم افزار ایجاد کنید می توانید از نرم افزار دیگری همچون ImageAlpha استفاده نمایید. این نرم افزار برای پردازش PNG از PNG24( میلیون ها رنگ) به PNG8( حداکثر ۲۵۶ رنگ) استفاده می شود و سعی می کند تصاویر با کیفیتی ایجاد نماید و در نهایت تصویری در اختیار شما قرار می دهد که تعداد رنگ کمتری دارد. Lossiness در این فرمت در اصل به معنای اصلاح استراتژیک پالت های رنگی، حذف رنگ های کم اهمیت برای تولید تصویری است که با کاهش پیچیدگی های آن باز هم ظاهر خوبی دارد. بعد از اکسپورت تصویر از ImageAlpha، می توان آن را وارد نرم افزار Imageoptim کرد تا بیشتر بهینه گردد.

بیشتر بدانید :  طراحی فروشگاه اینترنتی با ووکامرس

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

بهینه سازی تصویر
زمانی که صحبت از تصاویر SVG به میان می اید، قبل از اکسپورت آن از ایلوستریتور، باید پیچیدگی اش تا حد امکان کاهش پیدا کند. خوب این فرایند به خاطر اندازه ای که چنین تصاویری دارند کمی خسته کننده خواهد بود. ما در ابتدا تلاش می کنیم تعداد لایه ها را به حداقل برسانیم و در عین حال زیبایی کار هنری خود را حفظ کنیم. سپس آن را در نرم افزار ایلوستریتور به صورت SVG ذخیره می کنیم و با برنامه ای به نام Scour بهینه سازی می نماییم. زمانی که از اسکرپیت برای سیستم عامل مک استفاده می کنیم می توانیم بر روی فایل SVG در finder راست کلیک کنیم و آن را از طریق منوی services بهینه سازی نماییم. ما اغلب از فایل فونت برای گرافیک های وکتوری که تک رنگ هستند به همراه نرم افزار Glyph استفاده می کنیم.

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

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

مشاوره رایگان

در بهیـدو مشـاوره رایگـــان دریافت کنیـد

شماره تماس : ۰۳۱۳۲۷۵۱۹۸۸۰۳۱۳۲۷۵۱۹۸۹

پشتیبانی فروش : ۰۹۹۰۸۰۶۰۸۳۵۰۹۳۷۶۱۳۹۳۰۶

آدرس پستی : خیابان هشت بهشت شرقی، نرسیده به چهارراه هشت بهشت ، ساختمان فراز طبقه دوم

×

در بهیـدو مشـاوره رایگـــان دریافت کنیـد

شماره تماس : ۰۳۱۳۲۷۵۱۹۸۸۰۳۱۳۲۷۵۱۹۸۹

پشتیبانی فروش : ۰۹۹۰۸۰۶۰۸۳۵۰۹۳۷۶۱۳۹۳۰۶

آدرس پستی : خیابان هشت بهشت شرقی، نرسیده به چهارراه هشت بهشت ، ساختمان فراز طبقه دوم

×

در بهیـدو مشـاوره رایگـــان دریافت کنیـد

شماره تماس : ۰۳۱۳۲۷۵۱۹۸۸۰۳۱۳۲۷۵۱۹۸۹

پشتیبانی فروش : ۰۹۹۰۸۰۶۰۸۳۵۰۹۳۷۶۱۳۹۳۰۶

آدرس پستی : خیابان هشت بهشت شرقی، نرسیده به چهارراه هشت بهشت ، ساختمان فراز طبقه دوم

×

در بهیـدو مشـاوره رایگـــان دریافت کنیـد

شماره تماس : ۰۳۱۳۲۷۵۱۹۸۸۰۳۱۳۲۷۵۱۹۸۹

پشتیبانی فروش : ۰۹۹۰۸۰۶۰۸۳۵۰۹۳۷۶۱۳۹۳۰۶

آدرس پستی : خیابان هشت بهشت شرقی، نرسیده به چهارراه هشت بهشت ، ساختمان فراز طبقه دوم

×

در بهیـدو مشـاوره رایگـــان دریافت کنیـد

شماره تماس : ۰۳۱۳۲۷۵۱۹۸۸۰۳۱۳۲۷۵۱۹۸۹

پشتیبانی فروش : ۰۹۹۰۸۰۶۰۸۳۵۰۹۳۷۶۱۳۹۳۰۶

آدرس پستی : خیابان هشت بهشت شرقی، نرسیده به چهارراه هشت بهشت ، ساختمان فراز طبقه دوم

×