فصل پنجم
تصاوير
در طراحي سايت تصاوير ارکان اصلي هستند . کاربران انتظار دارند که اين عکسها بتوانند مشاهدات خوبي برايشان به ارمغان آورند . همچنين از عکسها براي Navigation و نقشه هاي تصويري و دگمه هاي تصويري، ( که باعث اتصال به صفحات و يا منابع ديگر مي شوند )، استفاده مي شود . روي يک سايت يکدست و يکپارچه ساختار Logo و نماد هاي تجاري براي شناسائي بسيار مهم هستند . تصاوير خوب در طراحي بايد داراي جذابيت و کارآيي و مهمتر از همه سايز کوچک باشند .
اندازه فايل به طور مستقيم بر زمان بارگذاري تاثير دارد و ملاحظات اصولي براي توسعه و انتشار وب در اين مورد بايد رعايت شود . طراحان بايد پهناي باندي که براي تصاوير بکار برده شده در صفحه مورد نياز است را ، در نظر داشته باشند .
معمولاً کاربران براي ديدن عکس بي صبر و حوصله مي شوند . مندرجات صفحات وب با بکارگيري غلط عکسها و ايجاد زمان بارگذاري طولاني نابود مي شوند .
مودم با سرعت 56 kbps در Dial Up استاندارد به کار برده مي شود ولي هنوزهم خيلي از مودم هاوجود دارند که با سرعت کمتر از آن، مورد استفاده قرار مي گيرند . اگر سايت به منظور استفاده در اينترانت بر روي شبکه ايجاد شود خيلي ازاين موانع بر طرف خواهد شد . به ياد داشته باشيد که سرور اينترانت هدف متفاوت تري نسبت به برنامه هاي کاربردي دراينترنت دارد . نمايش اينترنت براي استفاده عمومي باشد و مي تواند نماي سازمان را براي دنياي بيرون ترسيم کند ولي اينترانت براي مصارف تجاري و به مقصود دسترسي سريع و آسان به منابع و اطلاعات بنا شده است.ايجاد زرق و برق در اينترانت باعث کاهش بهروري مي گردد. شما مي توانيد اينترانت را در جهت به عمل و اينترنت را مکاني جهت نمايش و عرضه بحساب آوريد.
گرافيک ها تشريح و توضيحي بر موارد و فعاليتهاي سايت و نيز ارائه معاني Navigation در يک سايت وب مي باشند.
داده هاي متصور رقمي :
همه تصاوير ديجيتالي ويژگيهاي خاص و مهمي را دارند که مي توانند در اندازه سايز آن موثر باشند که مقدار کمي از اين ويژگيها در اين بخش بيان مي شود .
پيکسل : ( Pixel)
نقطه کوچکي در تصوير مي باشد و در يک جمله شبکه اي از بلوکهاي ساختماني براي گرافيکها و تصاويري است که مي تواند بر روي کامپيوتر نمايش داده شود . پيکسل کوچکترين واحد نمايشي کامپيوتر است .
عمق رنگ :
پيکسل به مقدار زيادي اطلاعات رنگي ايجاد مي کند . اين اطلاعات با بيت اندازه گيري مي شوند .حساب کنيد که چگونه هر پيکسل تمامي اين رنگها را مي تواند نشان دهد . براي مثال اطلاعات پيکسل 4 مي تواند بيتي در مد Gray Scale تا 16 سايه خاکستري را نشان دهد . هر 8 بيت از اطلاعات رنگ در هر پيکسل تا 256 بيت از اطلاعات رنگ را توليد مي کند و به اين ترتيب بديهي است که در درجات بالاتر بيت ( که عمق بيت نيز ناميده مي شوند ) واقع بيني رنگي بيشتري را به ارمغان مي آورد .
ضرورت تفکيک پذيري استاندارد صفحه نمايش 640*480 يا 72 نقطه در اينچ (dpi) مي باشد . شما بايد المانهاي وب را با آهنگ خاص براي کاربران جلو برده و توسعه دهيد .
جدول رنگ و الگو :
( مجموعه اي از رنگهاي قابل دسترسي در يک سيستم گرافيکي کامپيوتر ) :
اگر چه 8 بيت رنگ مي تواند ميلونها رنگ را نمايش دهد ولي فقط در يک زمان 256 رنگ حمايت مي شوند . سيستم فقط اين 256 رنگ را در سيستم گرافيکي خود ذخيره ميکند .
تذکر : تفاوت کمي مابين جعبه رنگ ويندوز ميکروسافت و جعبه رنگ مرورگر Netscape Navigator وجود دارد . Navigator از 256 رنگ حمايت مي شوند ولي ويندوز از216 رنگ استفاده مي کند . هنگامي که يک عکس 8 بيتي ايجاد مي کنيد از يک بردار و يا يک نرم افزار نمايشي استفاده مي کنيد ،خود برنامه يک جعبه ايجاد مي کند که رنگهايي که در عکس موجود مي باشند در آن جعبه رنگ نيز وجود دارد . هنگامي که تصوير اصلي نمايش داده مي شود جعبه رنگ براي نمايش رنگ اصلي تنظيم مي شود . وقتي که تصاوير متعددي بطور مرتب و يکجا به نمايش مي گذاريد دچار عدم هماهنگي در تلالو رنگها مي شويد که اين امردرخشش الگو يا عوض شدن جعبه رنگ ناميده مي شود .
درخشش الگو، زماني اتفاق مي افتد که تفاوت معني دار زيادي بين تراکم ( چگالي ) تصوير يا جعبه رنگ آن و تراکم ( چگالي ) سيستم يا جعبه رنگ آن وجود دارد . براي غلبه بر اين محدوديت مرورگر به طور اتوماتيک تکنيکي را بنام افزايش نور تصوير ايجاد مي کند .
افزايش شدت نور نمايش
افزايش شدت نور نمايش تخمين تقريبي يا تطبيق رنگهامابين يک جعبه تصوير و جعبه رنگ سيستم است ورنگهاي روي تصاوير با رنگهاي سيستم جايگزين مي شوند . متاسفانه افزايش شدت نور باعث ميشود که نمايش عکس را بصورتي که شما نمي خواهيد عوض کند . تصاوير بايد قبل از آنکه در صفحات وب انتشار داده شوند پرنور شوند .
عکسهاي با فورمات Bitmap و برداري (Vector)
عکسهاي گرافيکي وب به 2 قالب دسته بندي مي شوند Bitmap و Vector که هر قالب خود زير شاخه هايي نيز دارد .
Bitmap:
بيشترين قالب گرافيکي معمول Bitmap مي باشد .
عکسهاي Bitmap از تاثير هر رنگ نمايش به طور جداگانه ساخته شده اند . هر چقدر که رنگهاي ايجاد شده توسط يک عکس بيشتر باشد، سايز فايل مربوطه به آن عکس بيشتر مي شود . وقتي که فايل Bitmap با بزرگنمايي ديده مي شود ، فايل Bitmap شبيه به يک سري مربع کوچک مي شود که هر يک درجه رنگي دارند که در کل عکس سهم دارد .
Bitmap هنگامي که از نزديک ديده مي شود ظاهري ناصاف دارد اما هنگامي که با فاصله به آنها نگاه مي کنيد بصورت نقطه ، نقطه و شبيه به شکل واقعي و يا بصورت بلوکهاي مجزا مي باشد.
براي ساختن فايل Bitmap مرورگر موجود به طور هماهنگي در بارگذاري يک عکس با يکديگر کار مي کنند .
اطلاعات هر پيکسل ذخيره مي شود و سپس دوباره در مرورگر براي ايجاد تصوير برگردانده مي شود.چون فايلهاي فايلهاي Bitmap از تعداد ديسکهاي بيشتري براي نمايش استفاده مي کنند سايز بزرگتري دارند،فايلهاي bitmap براي عکسها اثر هاي سايه دار و لبه هاي هموار يا تيره ايجاد مي کنند.
بردار :
تصاوير برداري در تفسير و ترجمه متفاوت تر از فايلهاي Bitmap ميباشند. تصاوير برداري اطلاعات عکس را در دستورالعمل هاي رياضي خود ذخيره مي کنند که در هنگام نمايش معني مي دهند.
براي مثال براي ايجاد يک دايره لازم است که مختصات مرکز و شعاع و درجه رنگ را بدانيم . از اين اطلاعات و دستورالعملهاي رياضي براي افزايش سايز فايل نيز استفاده مي شود .چون مقادير قابليت عوض شدن دارند بنابراين افزايش سايز بردار اندازه فايل را زياد نمي کند .
امتياز ديگر تصاوير برداري توانائيهاي آنها در به مقياس گذاشتن راندمان ابزار استفاده شده مي باشدو تصاوير برداري مستقل از قدرت تفکيک پذيري مي باشند.
برنامه هاي گرافيکي :
شما مي توانيد با برنامه هاي گرافيکي تصاوير ديجيتالي ايجاد کنيد . اخيراً پيشرفت هاي زيادي در نرم افزارها براي ويرايشي کردن عکسها ، رتوش کردن و ارسال آن براي وب ايجاد شده است .
اين برنامه ها به 2 گروه زير تقسيم مي شوند :
ترسيم بردار ، فايلهاي از نوع نقاشي
برنامه هاي ترسيم اشکال گرافيکي برداري :
نرم افزارهاي ترسيم بردار مبنا مانند XRes و AdobeIllustrator توصيف کننده نقشه شکل مي باشد و مي توان در آن خطوط نامرئي ايجاد کرد .
اطلاعات عکس در مجموعه اي از دستورالعمل هاي رياضي ذخيره مي شود . در قبل بحث کرديم که تصاوير برداري مستقل از مانيتور هستند به اين معنا که تنظيمات مانيتور کامپيوتر بر روي سايز و اندازه تاثير گذار است و نيز اين تصاوير کوچکتر از فايلهاي مشابه خود از نوع Paint هستند . تصاوير برداري گرافيکي معمولا در ابعاد سه بعدي و در محيط هاي زبانهاي نمونه سازي فرضي VRLM- Virtual Reality Modeling Language مورد استفاده قرار مي گيرند و معمولا نمي توانند به درستي و به طور واقعي گرايانه جزئيات تصاوير را انتقال دهند و نمايش آنها در صفحه نمايش تا اندازه اي آهسته تر است ونيز براي ديدن آنها در وب نياز به plug-ins مي باشد. به هر جهت تصاوير برداري در صنعت و مصارف علمي کاربرد خيلي خوبي دارند . بعدا به معرفي برنامه هايي که از تصاوير برداري حمايت مي کنند خواهيم پرداخت.
برنامه هاي نقاشي :
برنامه هاي نقاشي از Scan از عکس تا ضبط فريم هاي ويدئويي فايلهاي Bitmap ايجاد مي کند و يا براي ايجاد کارهاي هنري از آنها استفاده مي شود .
فايلهاي Bitmap با جزئيات بيشتري نشان داده مي شوند . در قبل بحث کرديم که فايل Bitmap با نقطه هاي کوچکي که هر نقطه مطابق با يک پيکسل در صفحه نمايش مي باشد طراحي شده است .
فايلهاي Bitmap در هنگام ضرورت پيکسل به پيکسل ويرايش مي شوند .
مضرت فايلهاي Bitmap در اين است که سايز فايلهاي اصلي بزرگ هستند . ظاهر فايلهاي Bitmap به طور زيادي بر صفحه مانيتور اثر مي گذارد . هر دو قالب Jpg ، Gif از نوع Bitmap هستند .
براي ايجاد تصاوير گرافيکي خوب معمولا از نرم افزارهاي زير استفاده مي شود:
• Adobe Photoshop
• Microsoft Image Computer
• JASC Paint Shop Pro
قالبهاي فايل تصوير
تصاوير گرافيکي در قالبهاي زير ظاهر مي شوند : Bitmap (BMP) قالب TIFF (Tagged Image File Format) (Gif) Graphic Interchange Format , (WMF) Windows Meta File (JPEG) Joint Photo Graphic Express Group فقط قالبهاي Gif و JPG بطور معمول و ذاتي با مرورگرها حمايت مي شوند و فورمتهاي ديگر با کمک Plug in مشاهده مي شوند . حمايت ذاتي به اين معنا است که مرورگر نيازي به نرم افزار خاص براي نمايش عکس ندارد . هنگام ايجاد يک تصوير وب يک طراح بايد يکي از فايلهاي jpg يا gif را بر مبناي نوع عکسي که در فرمت دارد انتخاب کند . جدول زير قالبهاي گوناگوني از فايلهاي عکس و پسوندهاي آن را نشان مي دهد .
Image File Format
File Name Extension | File Format | Origin |
Jpg,jpeg | Joint photoGraphic Experts Group | Joint Photographic Experts Group |
Gif | Graphic InterImage Format | Compuserver.Inc |
Tif | Tag Image File Format | Aldus Corporation |
Bmp | Bitmap(BMP) | Microsoft Corporation |
Wpg | Word Perfect Graphic | Word perfect Corporation |
Png | Protable Network Graphics | Codelable INC |
PCX | Bitmap(BMP) | Soft corporation |
Graphic Interchange Format- Gif
Gif يک قالب فايل مستقل است که محدود به نمايش 256 رنگ مي باشد که بطور طبيعي بوسيله Compuserver براي سرويسهاي روي خط انتشار داده شده است . Gif براي اکثر طراحان حرفه اي وب قالب خوبي مي باشد زيرا سايز آنها کوچک هستند.
بهم تابيدگي فايلهايGif بي نظير است و بهتر است که براي فايلهاي بزرگ از اين نوع قالب استفاده شود . Gif به عنوان يک قالب کم ضرر در نظر گرفته مي شود به اين معني که تصوير فشرده مي شود در حالي که هيچ اطلاعاتي از دست نمي رود . در نتيجه يک فايل Gif نمي تواند به اندازه يک فايل Jpg فشرده شود و نيز طراح نمي تواند ميزان فشردگي را محاسبه کند .
Animated -Gif
در سال 1989 ورژني از نرم افزار مربوط به فايلهاي Gif اين امکان راداد که رشته توالي از عکسها ذخيره شده يک فايل متحرک نمايش دهد. فايلهاي Gif مي توانند انيميشن هاي کامل و افکتهاي ويدئوئي بدون نياز به Plugins را ايجاد کنند .
فايلهاي Gif ممکن است شامل يک عکس ساکن باشد ، توابع متحرک Gif مانند کارتون و ...
فايلهاي Gif ممکن است شامل فرمهاي متوالي است که تقريباً از Cach مرورگر بارگذاري ميشوند و بطور نا محدود تکرار ميشوند و يا حلقه مجبور به حرکت تقليدي ميشود. يکي از اختيارات Gif هاي متحرک اين است که آنها در درجه بالاي تصاوير متحرک قرار دارند آنها وابسته به Client - Pull و Server – Pushنيستند. هم Client – Pull و هم Server Push نياز به فايلي دارند که بتوانند بطوري در پي در پي با تعداد زيادي تغييرات بين کامپيوتر کاربر و کامپيوتر سرور بارگذاري شود .
( Server Push _Client Pull )
( Server Push _ Pull ) ترکيبي از فنون سرويس دهنده / سرويس گيرنده وب که بصورت انفرادي شامل فشردن سرويس دهنده يا کشيدن سرويس گيرنده است. در فشردن سرويس دهنده ، داده ها را در سرويس گيرنده بار گذاري ميکند . اما ارتباط داده اي همچنان باز ميماند . اين ترکيب به سرويس دهنده امکان ميدهد که در صورت که در صورت لزوم انتقال داده ها را به مرورگر ادامه دهد . در کشيدن سرويس گيرنده ، سرويس دهنده داده ها را براي سرويس گيرنده بار گذاري ميکند. اما ارتباط داده اي باز باقي نميماند. سرويس دهنده رهنمود HTML را براي مرورگر ارسال ميکند و به آن اعلام ميکند که اين ارتباط را پس از يک فاصله زماني مجدداً باز کند. تا داده هاي بيشتري را دريافت کرده يا احتمالاً URL جديدي را باز کند.
Gif شفاف
امتيازي که فايلهاي Gif نسبت به تصاوير JPG دارند اين است که طراح مي تواند يک رنگ از تصاوير Gif طراحي کند که شفاف باشد و اين ويژگي باعث رفع محدوديت ها در اشکالي مثل مربع يا مثلث مي شود . براي مثال يک طراح مي تواند يک Logo دايره اي با يک زمينه رنگ شفاف ايجاد کند . بنابراين عکس با اطلاعات شفاف و بصورت دايره ظاهر مي شود .
تمرين 5-1 ايجاد سايت عکسهاي متحرک :
در اين تمرين شما از يک سرويس دهنده بر روي اينترنت براي ايجاد يک تصوير متني و متن متحرک استفاده مي کنيد .
1- وارد سايت http://www.mediabuilder.com شويد .
2- اتصال 3D Text Maker را که در طرف چپ صفحه قرار دارد انتخاب کنيد.
3- در مرحله اول فونتي دلخواه را براي متن خود انتخاب کنيد .
4- در مرحله 2 رنگي براي فونت خود در نظر بگيريد .
5- مي توانيد ابعاد متن خود را تنظيم کنيد .
6- در اينجا شما مي توانيد افکت هاي رنگي نيز براي متن خود اعمال کنيد .
7- در ميدان متني ، متن مورد نظر خود را وارد کنيد . مي توانيد براي مثال متن My 3D Text را وارد کنيد و سپس روي Make 3D Text کليک کنيد صفحه ديگر با فايل گرافيکي کامل شده بارگذاري مي شود . شما مي توانيد تغييرات ديگري را نيز وارد کنيد و همچنين مي توانيد فايل خود را با ابزار ديگري بنام Gif Works ويرايش کنيد و آنرا بر روي هارد محلي خود ذخيره کنيد .
8- به صفحه خانگي www.mediabuilder.com بازگرديد و اين بار ابزار Animated Banner Maker را انتخاب کنيد .
9- دستورالعمل استفاده از اين ابزار را بخوانيد .
10- براي اين تمرين سبک Around the world را انتخاب کنيد .
11- اگر نياز باشد با اسکرول به پائين برويد و وارد اولين ميدان متني شويد .
12- بر روي دگمه Make Banner کليک کنيد Banner در صفحه اي جديد ظاهر مي شود .
13- مراحل ذخيره فايل را به هارد بخوانيد .
Joint Photographic Experts Groop -JPEG :
عکسها در قالب JPEG از رنگهاي بيشتري نسبت به فايلهاي Gif برخوردار هستند . اما معمولا به زمان بارگذاري بيشتري نيز نياز دارند .
فايلهاي JPG شامل اطلاعات 24 بيت رنگي ( 16.7 ميليون رنگ ) مي باشند و به خوبي در تصاوير يکپارچه گرافيکي و عکسبرداري ها ظاهر مي شوند . بايد به خاطر آوريد که خيلي از کاربران فقط توانايي نمايش 8 بيت رنگ را براي خود دارند و در نتيجه در نمايش عکس براي آنها به مقدار قابل ملاحظه اي افزايش نور ايجاد مي شود . ( پديده اي که قبلاً راجع به آن بحث شد)
فايلهاي JPG به طور اتوماتيک فشرده مي شوند و در هنگام ورود به صفحات وب از حالت فشردگي خارج مي شوند . اثرات فشرده سازي متفاوت هستند . فشردگي بيشتر تنزل درجه بيشتري در عکس نهايي دارد . JPG را به عنوان يک فايل زيان آور و پر اتلاف در نظر مي گيرند . به اين معني که فشردگي عکس را افزايش مي دهد . رنگها با قطره چکان از جعبه رنگ عکس برداشته مي شود و نتيجه آن تنزل در کيفيت عکس است . براي مثال يک فايل 100 kb مي تواند 10 kb فشرده شود و به هر جهت اين فشردگي کيفيت عکس را کم مي کند . يکي از مضرات استفاده از اين قالب اين است که طراح کنترلي بر چگونگي تبديل 24 bit به 256 رنگ استفاده شده با صفحه نمايش کاربر را ندارد .
همچنين تفاوت بارزي در نحوه نمايش اين قالب در 2 مرورگر IE و NetScape وجود دارد بعلاوه نحوه نمايش در PC ها نيز متفاوت تر از مکينتاش مي باشد . طراح بايد قبل از آنکه صفحه خود را به اتمام رسانيد بداند که کدام قالب منظور وي را بهتر تامين ميکند و کار خود را در دو مرورگر با سيستم عامل هاي مختلف آزمايش کند .
JPEG2000:
قالب جديد JPEG به منظور توسعه ويژگي هاي فشردگي فايلهاي JPEG استاندارد مي باشد همانطور که قبلا بحث شد قالب اخير JPEG که اطلاعاتي راجع به تصويري که فشرده شده است در بردار سودمند نسيت و اين قضيه در نتيجه روزنه هايي را در تصوير ايجاد مي کند و باعث ايجاد تصوير خالدار مي گردد . در JPEG 2000 فشرده سازي در اثر يک تکنولوژي مواج بوجود مي آيد که اطلاعات را به گونه اي متفاوت ذخيره مي کند که تعداد زيادي از تکه هايي که در تصاوير فشرده شدهاي که از طريق JPEG بوجود آمدند را از بين مي برد .
Portable Network Graphics -PNG:
قالب PNG به عنوان يک قالب جديد براي گرافيکهاي وب ظاهر شده است . براي تصاوير وب PNG بهترين ترکيب از ويژگيهاي JPG و GIF را تحت يک قالب واحد دارا مي باشد . فايلهاي PNG زيادتر هستند و همچمين از شفافيت فايلهاي GIF و از عمق رنگي JPGحمايت مي کنند . فشردگي در فايلهاي PNG با استفاده از *****هاي فشردگي که تا عمق 48 bit حمايت مي شوند توسعه پيدا کرده است . حمايت مرورگرها از قالب PNG هنوز معمول نشده است . Netscape 4.7 و IE5 با درجات مختلفي از PNG حمايت مي کنند . به هر جهت کميته www در 1996 فرمت PNG را پيشنهاد داد ولي فرمت استاندارد شده نيست .
تصاوير برداري مقياس پذير SVG
قالب تصاوير برداري مقياس پذير (SVG) در فاز نقشه هاي کاري W3C مي باشد . SVG در XML در تشريح اشکال اصلي کاربرد دارد . مشابه بردارهاي گرافيکي ديگر SVG هنگامي که با هنرهاي خطي و اشکال کار مي کند بهينه مي شود .
[URL="http://www.up98.org/"][IMG]http://www.up98.org/upload/server1/02/i/xjb2rtqy16eghj89yc79.gif[/URL][/IMG]
ايجاد تصاوير
ايجاد تصاوير با کيفيت در وب نياز به داشتن علم و کاربرد نرم افزارهاي گرافيکي دارد و از اين جهت طراحي وب براي استادان آن مي تواند مشکل باشد . يک هنرمند گرافيک کار بايد بتواند بخوبي تصاوير خوبي را ايجاد کند. اگر شما ذاتا استعداد اين کار را نداريد خيلي از منابع در روي وب استفاده از اين عکسها را به طور مجاني براي شما ايجاد کردند . عکسهاي با کيفيت خوب معمولا مجاني نيستند ولي به هر جهت مي توانيد براي بدست آوردن کيفيت مطلوب از گرافيک ها در سايتهاي مختلف ثبت نام کنيد . اين حق اشتراک مي تواند در محدوده حق اشتراک ماهيانه تا حق اشتراک ساليانه باشد .
تذکر : ابتدا مطمئن شويد که تصاويري که در سايت خود از آنها استفاده مي کنيد حق کپي برداري از آن مجاني است . متون بکار برده شده در وب سايت يا بايد توسط شما ايجاد شود و يا براي دسترسي به آنها بايد اجازه داشته باشيد . هميشه جملات خود را از لحاظ قانوني بررسي کنيد .
ويژگي ALT :
ويژگي ALT متون اختياري در مکانهايي از تصاوير بر روي صفحات HTML ايجاد مي کند . گرامر استفاده از ويژگي ALT به شکل زير دنبال مي شود :
[URL="http://www.up98.org/"][IMG]http://www.up98.org/upload/server1/02/i/j8urrmwlr6d9y011e7za.gif[/URL][/IMG]
ويژگي ALT براي مکان هاي زير مهم است :
ويژگي ALT براي مکان هاي زير مهم است : ● کاربراني که گزينه نمايش عکس را در مرورگرهاي خود غير فعال کردند از اين طريق مي توانند آنرا بخوانند.
● هنگامي که صفحه در حال بارگذاري است کاربر مي تواند توصيف آنرا بخواند .
● اين گزينه براي کاربراني که قدرت بينايي يا شنوايي کمي دارند امکانات خوبي ايجاد ميکند.
بهينه سازي تصاوير :
يک طراح وب اگر نتواند تصاوير خود را بهينه سازي کند هيچ يک از توانمنديهاي Gif و jpg و Png تشخيص داده نمي شود. اين اشتباه غلط ازآنجا ناشي ميشود که بگويم هيچ يک از اين قالبها از ديگري بهتر نيست. در صورتيکه در قبل گفتيم که هر قالب تصوير داراي توانمندي مي باشد که آن را منحصر به فرد مي کند . به عنوان يک طراح وب بايد بياموزيد که چه نوع قالبي را براي ايجاد يک تصوير خوب و جذاب و بدون مشکل به کار بريد استفاده از قالبهاي Gif يا Jpg شما را به استفاده از تصاوير بهينه مطمئن نمي سازد .
موارد زير راهنمايي است که شما را در بهينه سازي تصاوير کمک مي کند :
● استفاده از رنگهايي که در وب امنيت دارند .
● ايجاد يک ليست از رنگهاي ممکن
● استفاده از رنگ هاي يکدست در هر جايي که ممکن باشد .
● اجتناب از اثرات بصري نامطلوب تا جايي که مقدور است .
● استفاده از امکانات بهينه سازي .
منابع بهينه سازي :
در حال حاضر خيلي از منابع وجود دارند که براي کمک به طرح بهينه سازي تصاوير در دسترس مي باشند . روش اصلي براي بهينه سازي, محاسبه کوچکترين مقدار رنگ ممکن و انتخاب قالب فايلي است که مي تواند کيفيت رنگ درخواستي شما را ايجاد کند . بيشترين استفاده معمول در بهينه سازي استفاده از نرم افزارهاي Photo Shop ، Fire Works ، Image Ready و ... مي باشد .
2 روش بهينه ساز معمول ديگر که در حال حاضر مورد استفاده قرار مي گيرند Online Version ، Desktop Version مي باشند .
بهينه سازي تصاوير بر روي اينترنت به نوعي نياز به حق اشتراک ساليانه دارد که اين مقدار به طور زيادي بسته به تعداد صفحات و يا عکسهايي مي باشد که شما مي خواهيد آنها را بهينه کنيد . بعضي از سرويسهاي ديگر مجاني هستند . يک طراح وب بطور ساده يک URL براي تصاوير وارد مي کند ، يعني بر روي سايتي ميرود که امکان بهينه سازي براي تصاوير را به ما ميدهد. برنامه اي روي سايت براي بارگذاري و بهينه سازي تصاوير آماده مي شود .
سپس طراح براي دسترسي به بهينه سازي تصاوير صاحب امتياز مي شود . سرويسهاي زير تصاوير بهينه OnLine ايجاد مي کند .
● Gifbot - www.netmechanic.com/accelerate.htm ● Gifwizard - www.gifwozard.com Desktop Image نيز به همان روش ، تصاوير شما را بهينه مي کند .
تمرين 2-5 بهينه سازي تصاوير :
در اين تمرين از سرويسهاي بهينه سازي تصاوير در روي اينترنت استفاده مي کنيد . اين تصاوير و اتصالات يک صفحه را بطور آشکار را ارزيابي مي کند و خلاصه اي از سايتهاي گرافيکي ايجاد مي کند و سپس ورژنهاي مختلفي از بهينه سازي تصاوير براي انتخاب و بارگذاري و نگهداري ، براي شما ارائه مي دهد . 1- وارد سايت http://www.netmechanic.com شويد .
2- بر روي اتصال Gifbot کليک کنيد .
3- از اين صفحه بر روي Try it کليک کنيد .
4- URL که عگس مورد نظرتان در آنجا قرار دارد را بر روي فيلد مخصوص وارد کنيد.
5- شما همچنين مي توانيد فايل را از کامپيوتر خود به کامپيوتر راه دور بفرستيد ، با استفاده از کليد Brows و آدرس Email خود را وارد کنيد و هر دو قالب Gif و Jpeg را از منوي خروجي انتخاب کنيد و Testnow را کليک کنيد .
6- حال اين سرويس شروع به بارگذاري عکس و ارزيابي آن مي کند .
7- وقتي بارگذاري کامل شد ليستي ايجاد مي شود .
8- وقتي ارزيابي تمام شد گزارش کاملي ظاهر مي شود .
9- براي ديدن کامل نتايج ، صفحه خود را اسکرول کنيد . بر روي سايز فايلي که در اتصالات سايت قرار دارد کليک کنيد تصوير بزرگتر ظاهر خواهيد شد .
10- اگر شما تا پايين صفحه اسکرول کنيد تکرار همان عکسها را خواهيد ديد . توجه داشته باشيد که هر عکسي اطلاعاتي راجع به عکس شامل نوع ، عمق رنگ ، سايز و زمان بارگذاري و نيز درصد ذخيره را به شما انتقال مي دهد و در صد سايز فايل را به شما مي دهد و مي توانيد تصوير بهينه شده را با تصوير اصلي با جابه جا کردن اشاره گر ماوس بالاي هر عکس مقايسه کنيد . اگر اينکار را انجام داديد تصوير اصلي ظاهر خواهد شد و يک مقايسه دقيق انجام مي دهيد . قبل از آنکه بخواهيد به تغييرات دقت کنيد بايد با اسکرول کردن تمامي عکسها را ديدن کنيد .
11- حال شما تصويري که بهينه شده و کيفيت خوبي در حد درخواست شما را دارد انتخاب کنيد .
12- بر روي عکس مورد نظر کليک راست کرده و آن را Save کنيد.
با بهينه سازي ، تمامي عکسهاي صفحه ( و سايت ) به طرز چشمگيري مي توانيد زبان بارگذاري را کاهش دهيد و براي کاربران يک مشاهده سريع را ايجاد کنيد .
تکه تکه کردن عکس و بهم اتصال دادن
روش ديگري که براي کمک به بارگذاري عکسهاي بزرگ در زمان کم وجود دارد برش دادن عکس مي باشد . برش تکه هاي متعددي از عکس را در بر دارد . با استفاده از جداول HTML يک عکس مي تواند تجديد بنا شده و در پنجره مرورگر بهم پيوند داده مي شود . برش ها نمي توانند تغييري در سايز عکس بوجود آورند اما بارگذاري عکس را سريعتر ميکنند زيرا کاربر قبل از بارگذاري عکس قسمت هايي از عکس را مي بيند . نتيجه : در اين فصل شما در مورد نکات مهم در تصاوير وب آموختيد و با بيشتر قالبهاي معمولي و امتيازات آنها آشنا شديد و نيز تفاوت بين تصاوير BMP و برداري را آموختيذ و در پايان درباره ابزارها و تکنيک هاي بهينه سازي عکسها آموختيد .