عضویت در کانال تلگرام

عضویت در کانال تلگرام

آموزش ذخیره سازی تصاویر برای وب

آموزش ذخیره سازی تصاویر برای وب

نازوب: اگر چه فرمت های متعددی برای تصاویر وجود دارد (JPEG, GIF, PNG ،…)، تصاویر را می توان به دو دسته داده های صرفه جو و پراتلاف طبقه بندی کرد. داده های صرفه جو به رسانه این امکان را می دهد تا بدون از دست دادن و یا تلف کردن اطلاعات و یا کیفیتشان نمایش داده شوند.
 
اما داده های پرتلاف ممکن است کیفیت و اطلاعاتشان را از دست بدهند. متداول ترین رسانه صرفه جو در گرافیک و طراحی شامل: GIF و PNG و TIFF می شود در حالیکه JPEG از معروفترین رسانه های گرافیکی پر اتلاف به شمار می رود.
  
چگونه در فتوشاپ Save for Web کنیم
 
Adobe Photoshop یک راه مناسب برای بهینه سازی تصاویر برای ذخیره کردن برای وب را داراست. در فتوشاپ، به مسیر File > Save For Web بروید و یا از کلیدهای میانبر Ctrl + Alt + Shift + S استفاده نمایید.
 
یک پنجره جدید باز خواهد شد که شامل همه تنظیمات برای ذخیره سازی و بهینه سازی یک تصویر برای وب می شود:

 

آموزش ذخیره سازی تصاویر برای وب

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

ذخیره کردن عکس ها برای وب

عکس ها باید همیشه به عنوان یک داده پر اتلاف ذخیره شوند و این به خاطر سایز بزرگ فایل آنهاست. وقتی یک عکس گرفته می شود، گرایش دوربین به سمت ذخیره سازی عکس در قالب یک نوع فایل فشرده مانند (JPEG)  است تا قالب RAW، که می تواند فایلی با  اندازه بزرگتر ایجاد کند.

نوع فایل متداول و مقدم در عکس ها JPEG است، که از نام بنیانگذاران آن یعنی "Joint Photographic Experts Group" گرفته شده است. دلیل اینکه چرا JPEG تبدیل به یک استاندارد شد به خاطر قابلیت آن در فشرده سازی داده های تصویر است که در همین زمان قادر به حفظ بالاترین کیفیت می باشد و نیز شباهت زیادی به تصاویر صرفه جو دارد ( با در نظر گرفتن اطللاعات )
  
وقتی قصد ذخیره کردن عکس برای وب را دارید می توانید  چند Save For Web از قبل تنظیم شده را انتخاب کنید. برای یک عکس، باید کابرد هریک از قالب های JPEG Low یا JPEG Medium و یا JPEG High را در نظر بگیرید. با توجه به تصویر زیر خواهید دید که یک عکس بدون اتلاف و از دست دادن کیفیت، فشرده می شود. در مقایسه با عکس اصلی، که بالای 250 KB است، می توانیم یک عکس با کیفیت قابل قبول و با استفاده ازفشرده سازی Medium quality یا High quality از قبل تنظیم شده که اندازه فایل آن کمتر از 30 KB است به دست آوریم.

 
 

آموزش ذخیره سازی تصاویر برای وب

تصاویر GIF

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

GIF یا Graphics Interchange Format، یک قالب عکس است که از یک پالت که شامل بیش از 256 رنگ است استفاده می کند، که آن را  به یک گزینه مهم برای گرافیک های وب تبدیل کرده است که از یک میدان رنگ گسترده استفاده نمی کند همچنین GIF می تواند پیکسل های تکی را طوری تنظیم کند تا به transparent تبدیل شوند که ما در این آموزش قصد آموزش و بحث در مورد آن را نداریم. تصویر زیر مقایسه بین یک تصویر با قالب GIF (با استفاده از 250 رنگ) و تصویر دیگر با قالب jpeg است، اندازه فایل هر دو دقیقا مشابه است. همین طور که می بینید قالب گرافیکی صرفه جوی GIF، از لحاظ کیفیت، شباهت بیشتری به تصویر اصلی دارد.

 
به دلیل اینکه تصاویر GIF یک پالت محدود با 256 رنگ دارد،  تقریبا هیچ وقت از آنها در عکس ها استفاده نمی شود، اما برای گرافیک هایی که از یک رنگ در آنها استفاده می شود یا رنگ های محدودی در ساختارشان  بکار رفته، بسیار مناسب هستند. برای عکس ها،قالب JPEG و یا PNG را می توان استفاده کرد.

تصاویر با کیفیت و PNG صرفه جو

PNG یا Portable Network Graphics، مانند GIF ، قالب هایی با داده های صرفه جو هستند، جز اینکه آنها تعداد بیشتری رنگ را پشتیبانی می کنند ( که باعث می شود آنها در بسیاری موارد دیگر نیز بزرگتر باشند )…..و نیز می توانند به جای single transparent pixels یا تک پیکسل های شفاف، کانال های  شفاف آلفا یا alpha transparency channels را پشتیبانی کنند.

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

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


عضویت در کانال تلگرام

پربیننده ترین