تصاویر در طراحی وب ( بخش اول )

February 12, 2005 at 01:31 am

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

هرچند استفاده ی بیش از حد از هنرهای گرافیكی می توان بر روی سایت های غیر قابل استفاده اثر و نتیجه ی منفی داشته باشد . استفاده ی صحیح از تصاویر در وب سلیقه ایی نیست ، بلكه احتیاج به فهم كامل از فرمت های فایل های مختلفی مانند GIF , JPEG , PNG دارد . هدف اصلی طراحان این است كه كیفیت تصاویر را با اندازه فایل بارگذاری شده متعادل كنند .

چون شاخصه های هر یك از فرمت های فوق نیاز به توضیحات مفصل دارد ، توضیح به صورت یكجا مقدور نیست بنابراین در این پست به بررسی شاخصه های فرمت GIF می پردازیم و ما بقی آن ها را به پست های آینده موكول می كنیم .

تصاویر GIF در وب به طور وسیعی پشتیبانی می شوند . در آغاز توسط كامپیوسرو ( و گاهی اوقات به عنوان CompuServe GIFs به آن اشاره می شود ) معرفی شدند . قالب GIF در واقع داری دو نوع است : GIF 89a و GIF 87 . هر دو قالب رنگ هشت بیتی را پشتیبانی می كنند . امروزه وقتی از GIF صحبت می شود همیشه در نظر می گیریم كه قالب GIF 89a در حال استفاده است و هیچ گونه تفاوتی بین این قالب ها قائل نیستیم .

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

ونه كه ذكر شد تصاویر GIF فقط رنگ هشت بیتی را برای حداكثر 256 رنگ در تصویر پشتیبانی می كنند . در نتیجه ، بعضی از ضایعات به هنگام ارائه رنگ واقعی تصاویر ، مانند عكس ها ، غیر قابل اجتناب است .نوعا وقتی كه یك تصویر از پالتی با تعداد رنگ های زیاد به یك پالت رنگ كوچك تر نگاشت بشود ، در هم ریختگی اتفاق می افتد . در هم ریختگی سعی می كند رنگی كه از پالت بیرون است را خلق كند . این كار را بدین صورت انجام می دهد كه دو رنگ یا بیشتر از پالت را می گیرد و جایگزین طرح شطرنجی یا نقطه نقطه می كند به طوری كه مشابه رنگ اصلی را به وجود می آورد .

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

با وجود اینكه داشتن عمق رنگ فقط 8 بیتی به نظر مسئله ساز می آید ، اما در بعضی مواقع طراحان عمق بیت فایل GIF را به صورت نزولی تنظیم می كنند تا اندازه فایل كاهش یابد . به خاطر داشته باشید كه هر چه عمق بیت در یك تصویر بیشتر باشد ، رنگ ها و همچنین مقدار اطلاعات لازم بیشتر خواهد بود . ممكن است این مسئله عاقلانه به نظر بیاید كه تا آنجا كه ممكن است با محدود كردن تعداد رنگ ها ، بدون كاهش كیفیت تصویر ، فایل های كوچك زیادی به وجود آورید .

تنها راه برای انجام این كار آن است كه در تصاویر از رنگ های كافی استفاده كنید كه بدین وسیله از آن چه آنجا وجود دارد یا هر چه كه برای در هم ریختگی مناسب است بتوان پشتیبانی كرد . استاندارد GIF های 8 بیتی شامل 256 رنگ است ، 7 بیت 128 رنگ ، 6 بیت 64 رنگ ، 5 بیت 32 رنگ و … .
بیشتر برنامه های گرافیكی مانند Fireworks یا فتوشاپ همراه با ImageReady ، در هنگام ذخیره ی تصویر به طور مستقیم از كاهش رنگ پشتیبانی می كنند . شكل های اینجا نمونه ای از یك كاهش اندازه ی فایل را با استفاده از كاهش رنگ GIF نشان می دهد .

تصاویر GIF همچنین از مفهوم شفافیت ( Transparency ) نیز پشتیبانی می كنند . یك بیت شفاف كه در آن یك رنگ می تواند شفاف باشد مجاز شمرده می شود . شفافیت اجازه می دهد پس زمینه ایی كه یك تصویر روی آن جایگزین می شود تا نمایش دادن ، مجموعه ی متنوعی از جلوه های پیچیده را ممكن بسازد . برای آن كه با نمونه هایی از شفافیت آشنا شوید ، به اینجا مراجعه كنید .

مشكل اساسی شفافیت یك بیتی هموار سازی لبه های كنگره دار است . برای این كار از رنگ های متغیر استفاده می شود تا بتوان لبه های دندانه دار و ناصاف یك تصویر را محو و صاف كرد . به خاطر داشته باشید كه هر چیزی كه بر روی صفحه ی نمایش نشان داده می شود از پیكسل تشكیل شده است .

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

تصاویر GIF از یك ویژگی دیگری به نام بافتی ( interlacing ) پشتیبانی می كنند . این ویژگی به كاربران این امكان را می دهد كه بفهمند تصویر قبل از اینكه به طور كامل بارگذاری بشود چگونه است . بنابراین باعث می شود كه كاربر در طول بارگذاری تصویر دلسرد و نا امید نشود . در جایی كه سرعت بارگذار یاغلب یك مشكل محسوب می شود ( ایران ما ) پیش نمایش بافتی در وب بسیار مفید است .

با وجود اینكه نمایش بافتی یك تصویر GIF عموما ایده خوبی است ، اما اغلب با عیبی نیز همرا هاست . تصاویر مشبك شده ممكن است از تصاویر دیگر بزرگتر شوند . بنابراین از عمل interlacing برای تصاویری كه دارای متن هستند نباید استفاده كرد ، زیرا متن تا موقعی كه كامل بارگذاری نشده باشد قابل خواندن نخواهد بود . برای مشاهده عمل interlacing به اینجا مراجعه كنید .

Alvanweb

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

مرورگر هایی كه از قالب GIF متحرك پشتیبانی نمی كنند معمولا اولین قاب نقاشی متحرك را به جای آن نمایش می دهند . اگر چه برنامه های نصب نشدنی یا دیگر امكانات مرورگرها نیاز نمی شود ، اما سازندگان صفحات نباید از نقاشی متحرك در صفحاتشان زیاد استفاده كنند ، زیرا ممكن است موجب حواس پرتی كاربران و انجام بارگذاری های بی جا و بدون استفاده شود .

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

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

دسته: طراحی وب | نویسنده: مرتضی الوانی
  1. 3 نظر برای این مطلب ارسال شده است. نظر خود را ارسال کنيد »

  1. 1

    الوان


    شرمنده همه دوستان ! فكر كنم بيش از حد زياد شد :roll:

    February 12, 2005 at 2:00 am

  2. 2

    سکوت مرگ


    دستت درد نکنه
    این چند تا مطلب آخریت خیل خوب بود
    موفق باشی

    February 12, 2005 at 1:18 pm

  3. 3

    salar


    salam agha morteza
    khoobi?
    agha Aliii bood , dastet dard nakone.

    February 12, 2005 at 4:47 pm