تصاویر در طراحی سایت

تصاویر در طراحی سایت :

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

GIF

این نوع نشان دهنده ی تصویرهای گرافیکی ثابت و یا متحرک و در حال حرکت است. این نام به اختصار درآمده ی Graphics Interchange Format که مفهوم لغتی آن در زبان فارسی چارچوب تعویضٔ گرافیک می باشد. این چارچوب گرافیکی بوسیله شرکت CompuServe در سال ۱۹۸۷ میلادی به بازار آمده است و در حال حاضر به طوروسیعی در وب سایت ها از آن استفاده می شود. در این نوع تصویری از روش LZW (Lempel-Ziv-Welch) برای کاهش حجم و فشرده کردن تصویرها استفاده می شود که یک روش فشرده کردن ( Lossless compression ) می باشد.شمار رنگ های استفاده شده در این نوع با در نظر گرفتن ۸ bit بودن آن ۲۵۶ رنگ می باشد که یک بازه رنگ تقریبا محدود شده برای استفاده در دسترس کاربران می گذارد .

این ۲۵۶ رنگ از یک بازه رنگ بزرگتر (۲۴ bits: 8 red, 8 green, 8 blue) با ۱۶,۷۷۷,۲۱۶ انتخاب می شود. ( با در نظر گرفتن ترکیب رنگ و نوع تصویر ) به دلیل کم بودن تعداد رنگ ها ازاین نوع خاص برای تصویرهایی با شمار رنگ پایین تر از ۲۵۶ استفاده خواهد شد . برای تصویرهای دیجیتال و یا تصویرهای دارای Gradiant این نوع را به کار نبرید . زیرا کم بودن شمار رنگها موجب بی کیفیت و بهم ریختن تصویرهایتان می شود. این نوع برای تصویرهای خطی ، عنصرهایی با دیواره های تیز و شمار رنگ با تعداد محدود خیلی پر کاربرد است . ( مثل لوگوهایی با چند رنگ و دیواره های تیز، خط ها و نمودارها ) یکی از ویژگی های مهم این نوع تصویری توانایی ایجاد تصویرهای متحرک می باشد. شما می توانید با استفاده از نرم افزارهای ویرایش تصاویر مانند Photoshop و یا نرم افزارهایی که برای ساخت تصویرهای در حال حرکت با فرمت GIF طراحی و ایجاد شده اند ، برای ایجاد تصویرهای در حال حرکت ساده خودتان استفاده کنید.

( Animated gif )

JPG

استاندارد به کار برده شده برای فشرده وکم حجم کردن تصویرهایی که نام آن ، به اختصار درآمده Joint Photographic Experts Group ، نام شرکت سازنده این استاندارد در سال ۱۹۹۲ می باشد. از این استاندارد اکثرا برای ذخیره کردن تصویرهای دیجیتال و تصویرهایی که با بکارگیری دوربین های عکاسی گرفته شده اند( که از میلیون ها رنگ تشکیل شده اند ) استفاده خواهد شد. این استاندارد به شما این امکان را می دهد که با کمی تغییرات درخصیصه ها به حجم قابل قبولی برای نشر در محیط طراحی سایت دست پیدا کنید. روش فشرده کردن تصویرها در این نوع ( Lossy Compression ) می باشد که به این معنی است که پس از تغییریافتن ویژگی ها به منظور فشرده کردن تصویرها ، کیفیت قبلی تصویرها از بین می رود و به کیفیت خیلی کمتری از تصویرها دست پیدا می کنیم به همین دلیل در تغییر دادن خصیصه ها با بکارگیری این استاندارد توجه لازم را مبذول نمایید. در بکارگیری این استاندارد برای تصویرهایی که شامل متون، الگوها و سطوحی با دیواره های تیز هستند خیلی دقت نمایید به دلیل این که کم کردن ویژگی ها به مقدار زیاد موجب در هم ریختن دیواره های متن و سطح ها خواهد شد. با مقداری ممارست و تجربه ،اندازه مورد نظر تغییرات در این خصیصه ها را در خواهید یافت و خواهید توانست که به نحو مطلوب از آنها بهره مند شوید.شما همین طور می توانید از نرم افزارهای ویرایش کردن تصویرها مثل Photoshop ( گزینه Save for web در منوی File ) برای ایجاد تغییرات در ویژگی های تصویرها بهره ببرید)

PNG

نام این نوع به اختصار درآمده ی Portable Network Graphics می باشد که در سال ۱۹۹۶ به عنوان جایگزین مترقی تر و بهتر برای GIF (Graphics Interchange Format) ساخته شد. PNG از بازه رنگ ۲۴-bit RGB or 32-bit RGBA و همین طورGrayscale ( همراه و یا بدون alpha channel ) هم بهره می برد. PNG نوعی می باشد که برای نشر در محیط وب سایت ها ساخته شده است و برای موارد چاپی مورد مناسبی برای استفاده نمی باشد و به همین جهت از بازه رنگ فایلهاو پوشه های چاپی نیز ( CMYK ) پشتیبانی نخواهد کرد. یکی از ویژگی های مطبوع و کابرپسند این نوع تصویر برای سازندگان و توسعه دهندگان وب سایت ها،ویژگی alpha channel آن است که باعث ساختن تصویرهای Transparent ( پس زمینه صاف و شفاف ) خواهد شد. از دیگر مشخصه های بوجود آمده در انواع GIF و PNG (Lossless compression ) از بین نرفتن کیفیت تصویر نشان داده شده پس از فشرده ساختن تصویر ها می باشد ( دقیقا بر عکس استاندارد JPEG ) در نوع PNG از روش ( ZLib ) برای فشرده ساختن تصویرها به کار برده می شود که کاراتر از روش فشرده ساختن در GIF می باشد (LZW ) دو فرمت مختلف از نوع PNG با کیفیت تصویر متمایز در صفحه های وب سایت ها استفاده می شوند. PNG8 (8-bit) ازنظر محدود بودن رنگ مثل .gif می باشد(۲۵۶ رنگ حداکثر) ، اما می توانیم از ویژگی alpha channel آنها برای ساختن تصویرهای شفاف نیزبهره گرفت. PNG24 (24-bit) اجازه به کارگیری از محدوده گسترده تری از رنگ ها را به ما خواهد داد. متاسفانه در این روزها شماری از مرورگرهای وب سایت ها به طور کامل و دقیق و راحت از این نوع تصویر بهره نمی برند و این امر مشکل ها و مسایل زیادی را برای سازندگان وب به پدید آورده است.

اما استفاده از این نوع به طرز مطلوب و کاملی جای خود را پیدا کرده است و توانسته است در بین انواع مختلف جا باز کند و در نهایت تمام مرورگرهای سایت ها بالاجبار به بهره گیری و پشتیبانی از این نوع خواهند پرداخت . البته راه و روش های بخصوصی برای نشان دادن درست این نوع در مرورگرهای سایت های کهنه که از این نوع استفاده نمی کنند وجود خواهد داشت. بهره گیری از این نوع برای ذخیره کردن تصویرهایی با کیفیت و شفافیت بالا و اندازه کوچک بسیار خوب و راحت است . مانند لوگوهایی با شمار رنگ بالا و دیواره های گرد و دایره ای ، یا آیکون ها و نماد هایی در اندازه های ریز . بهینه سازی تصویرها برای نشر در محیط وب سایت در ادامه کوشش ما براین است که به طور عملی تمایزهای ما بین نوع تصویرها و روش کارکردن با آن ها را برایتان شرح دهیم. برای این امر ما از نرم افزار فتوشاپ بهره خواهیم گرفت و در ذیل مرحله های انجام دادن این امر را برایتان شرح خواهیم داد. بعد از باز کردن تصویری که می خواهیم روی آن ویرایش کنیم، در محیط فتوشاپ از منوی file گزینه Save For Web را در نظر می گیریم و روی آن کلیک می کنیم. بعد از باز شدن پنجره مخصوص برای ذخیره کردن تصویرها به منظور منتشر کردن در محیط وب نوع تصویر مورد نظرخودمان را در نظر گرفته و انتخاب خواهیم کرد. به عنوان نمونه برای نوعJPG می توانیم با بالاآوردن یا کم کردن درصد کیفیت و شفافیت ،به حجمی که می خواهیم و کیفیت مطلوب خودمان برسیم. تمایز های ذخیر سازی با به کار بردن دو نوع GIF و JPG بعد از ذخیره کردن با بهره گیری از نوع PNG اندازه تصویر بدون تغییرات خیلی زیاد در کیفیت تصویر،افزایش یافته است. بهترین گزینه می تواند نوع JPG با کیفیت ۵۰ درصد باشد. نوعGIF برای ذخیره کردن تصویرهایی که شامل متون و خط های صاف هستند بهتر از JPG عمل خواهد کرد همانگونه که مستحضر می باشید برای کردن تصویرها با پس زمینه شفاف بهترین گزینه می تواند PNG 24bit باشد . در مورد تصویرهایی با لبه های گرد و پس زمینه شفاف می توانیم از انواع GIF و PNG 8 bit هم استفاده کنیم.