ویژگیهای تصاویر صفحات وب

همانطور که گفته شد، تصاویر در صفحات وب، نقش عمدهای دارند، به طوری که امروزه تقریباً تمام صفحات وب شامل تصاویر هستند. اما تصاویر صفحات وب چه ویژگیهایی باید داشته باشند؟

همانطور که گفته شد، تصاویر در صفحات وب، نقش عمدهای دارند، به طوری که امروزه تقریباً تمام صفحات وب شامل تصاویر هستند. اما تصاویر در طراحی سایت  چه ویژگیهایی باید داشته باشند؟ آنچه که مسلم است این است که اولاً تصاویر باید در گستره وسیعی از کامپیوترها قابل دسترس باشند و ثانیاً حجم آنها باید اندک باشد تا سرعت کارکردن با وب را کند نکنند. بنابراین، تصاویر وب باید ویژگیهای خاصی داشته باشند. تصاویر مربوط به وب را می توان در نرم افزارهای مختلفی مثل coreldraw ، freehand ، photoshop و غیره ایجاد کرد. به هر حال تصاویر صفحات وب بهتر است به یکی از سه فرمت JPEG ،"GIF" و PNG" باشند. پس از اینکه فرمت فایل تعیین شد، باید توجه داشته باشید که حجم فایل نیز کم باشد. اگر بخواهید فایلی به ظرفیت 3M را از طریق یک مودم با سرعت ۱۴/۴ به کامپیوتر خود انتقال دهید، زمان زیادی باید صرف کنید. فایلهای تصویری با ۳۰ کیلوبایت، فایلهای مناسبی برای صفحات وب هستند. البته برای انتقال فایلهای بزرگ نیز راه حلهای گوناگونی وجود دارد و لذا نباید نگران انتقال این فایلها باشید.

فرمت JPEG

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

فرمت GIF

GIF فرمت دیگری است که می توان برای تصاویر وب استفاده کرد. این فایلها به ۲۵۶ رنگ محدود میشوند (و در برنامه های مرورگر وب، این محدودیت برابر با ۲۱۶ رنگ است). به همین دلیل، این فایلها برای انتقال تصاویری با رنگهای تدریجی نمی توانند به خوبی فایل JPEG عمل کنند. به هر حال، این فرمت برای ذخیره فایلهایی که تصاویر آنها دارای رنگهای محدودی اند مفید است. علاوه بر این، فایلهای GIF می توانند تصاویر پس زمینه را نیز ذخیره کنند. به این ترتیب می توان از آنها برای ایجاد دکمه ها و بخشهای گرافیکی دیگر استفاده کرد.

فرمت PNG

این فرمت توسط همه مرورگرها پشتیبانی نمی شود. دو نوع فرمت PNG وجود دارد: ۸ بیتی و ۲۴ بیتی، در فرمت ۸ بیتی از رنگهای ۸ بیتی استفاده می شود. PNG همانند GIF ناحیه هایی را که حاوی رنگهای یک دست باشند فشرده می کند. از طرف دیگر، تصاویری را که حاوی حروف متنی باشند نیز به خوبی نگهداری می کند. PNGهشت بیتی توسط مرورگرهای قدیمی پشتیبانی می شود. در این روش، هنگام فشرده سازی، اطلاعات از بین نمیرود. تبدیل تصاویر ۲۴ بیتی به ۸ بیتی موجب تقلیل کیفیت انها می شود. طرح فشرده سازی PNG از فشرده سازی GIF پیشرفته تر است. یعنی فایلهایی که با فرمت PNG ایجاد می شوند ممکن است ۱۰ تا ۳۰ درصد نسبت به فایلهایی با پسوند GIF فضای کمتری اشغال کنند.

در PNG بیست و چهار بیتی، از سیستم رنگ ۲۴ بیتی استفاده میگردد. این فرمت برای تصاویری مناسب است که در آنها تغییرات شدت رنگ، تدریجی است. این فایلها نسبت به فایلهای JPEG بسیار کوچک هستند. لذا بهتر است این فایلها را برای تصاویری به کار ببرید که تغییرات شدت رنگ در آنها تدریجی است. به عنوان مثال، برای ذخیره تصاویری که بر روی لایه ای شفاف قرار دارند و ویژگی هموار کردن لبه ها نیز به آنها اعمال شده باشد، بهتر است از فایلهای PNG هشت بیتی استفاده کرد.

به این نکته توجه کنید که اگر فرمت GIF برای فایلی مناسب باشد، فرمت PNGهشت بیتی نیز برای آن مناسب است. PNGهشت بیتی، فایل کوچکتری می سازد. اگر فرمت JPEG برای تصویری چندسطحی مناسب است، فرمت PNG بیست و چهار بیتی نیز می تواند برای آن به کار گرفته شود. اگر تصویر چند سطحی نباشد، فرمت JPEG ممکن است فایل کوچکتری را ایجاد کند.

مسایل برداشت تصاویر از وب

یکی از مسائل مربوط به استفاده از تصاویر در صفحات وب، زمانی است که برای برداشتن آنها از وب صرف می شود. به طور کلی، انتقال داده ها از طریق اینترنت وقت گیر است. میزان داده ای که در یک دوره زمانی در یک پیوند ارسال میشوند، پهنای باند نام دارد و برحسب بیت بر ثانیه (bps)، کیلوبیت بر ثانیه (Kbps) یا مگابیت بر ثانی (Mbps) اندازه گیری میشود. هرچه پهنای باند بیشتر باشد، دادهها با سرعت بیشتری انتقال می یابند. متأسفانه کاربرانی که از طریق مودم به اینترنت دسترسی دارند پهنای باند اندکی دارند. جدول ۱-۶ بعضی از سرعتها و زمان لازم برای انتقال داده ها را نشان می دهد.

همانطور که در جدول ۱-۶ میبینید، هرچه سرعت اتصال داده ها بیشتر باشد، وب سریعتر برداشت می شود. فعلاً مودمهای کابلی اتصالات سریعتری را برای کاربران خانگی فراهم می کنند. اما سرعت مودمهای امروزی بین 28.8Kbps و 56Kbps است. به هر حال، بهترین راه این است که حجم تصاویر در صفحات وب کاهش یابد. اندازه تصاویر گرافیکی در درجه اول با اندازه پیکسل فیزیکی و سپس با اطلاعات مربوط به رنگ مشخص می شود یک روش کاهش اندازه تصاویر این است که یک تصویر کوچک ایجاد شود و با کلیک کردن بر روی آن، تصویر کامل برداشت شود. روش دیگر برای کاهش اندازه تصویر، کم کردن تعداد رنگها است. به عنوان مثال، تعداد رنگهای موجود در تصاویر GIF زیاد است. اگر تعداد بیتها از ۸ بیت (۲۵۶ رنگ) به ۵ بیت کاهش یابد، حجم فایل به میزان زیادی کاهش می یابد.

فشرده سازی روش دیگری برای کاهش اندازه تصاویر است. با انتخاب فرمت مناسبی برای فایل تصویر، یا انتخاب فرمت مناسبی برای تصویر خاص، می توان حجم فایل را کاهش داد. مثلاً فرمت JPEG برای عکسها مناسب است . تنظیم میزان فشردگی تصویرکیفیت تصویر را کم می کند ولی حجم فایل را کاهش می دهد .

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

تصاویر مورد استفاده در وب را می توان در نرم افزارهای مختلفی ایجاد کرد. یکی از معروفترین نرم افزارها، نرم افزار فتوشاپ، بخصوص فتوشاپ ۵/۵ و به بالا است.

تصاویر و HTML

برای قراردادن تصویر در صفحه وب، از دستور <IMG > استفاده می شود. به طوری که صفت SRC آن، URL تصویر را مشخص میکند. به عنوان مثال، برای اینکه فایل تصویر arm.gif را در صفحه وب قرار دهید باید از دستور زیر استفاده کنید: 

<IMG SRC = "arm.gif">

اگر تصویر موردنظر در یک سایت دیگری باشد، باز هم می توان آن را در صفحه وب قرار داد. دستور زیر تصویرArm.gif را از سایت www.rayaneh.com از دایرکتوری images در صفحه وب قرار می دهد :

<|MG SRC = "http://www.rayaneh.com/images/arm.gif">

صفت BORDER. این صفت، ضخامت کادر دور تصاویر را مشخص میکند. اگر این صفت ذکر نشود، کادری دور

تصویر رسم نمی شود. دستور زیر، کادری به ضخامت یک را دور تصویر رسم می کند: *

<IMG SRC = "arm.gif"BORDER = "1">

صفت SRT . همانطور که گفته شد ، این صفت URL تصویری را مشخص می کند که باید در صفحه وب قرار گیرد

.مثال آن را قبلاً دیدید

صفت ALT. این صفت، متنی را مشخص میکند که چنانچه تصویر به هر دلیلی ظاهر نشود، به جای آن چاپ خواهد شد. مقدار صفت ALT ممکن است به جای تصویر قرار گیرد یا ممکن است به عنوان پیامی در مرورگرهای تصویری به کار گرفته شود. مقدار صفت ALT معمولاً در داخل کوتیشن قرار میگیرد. در مرورگرهای مدرن گرافیکی، متنی که در ALT ذکر میشود، به عنوان توضیحاتی راجع به شکل منظور میگردد، به طوری که وقتی علامت ماوس بر روی آن تصویر قرار گرفت، آن پیام ظاهر می گردد. گاهی متن ALT به ۱۰۲۴ کاراکتر محدود میشود، بعضی از مرورگرها

مثل نت اسکیپ ۴، متن کمکی طولانی را قبول نمیکنند، دستور زیر، کاربرد صفت ALT را نشان میدهد:

<IMG SRC = "images/arm.gif"ALT = "This is a test">

بعضی از مرورگرها فقط با متن کار می کنند و تصاویر را در صفحات وب قرار نمی دهند. علاوه بر این، ممکن است افراد از مرورگرهای مختلفی استفاده کنند. افراد نابینا ممکن است فقط از مرورگرهای متنی استفاده کنند و متن را به ماشینی ارسال نمایند که آنها را تکرار کند و یا ممکن است از مرورگری مثل pwwebSpeak (www.prodworks.com) استفاده کنند که از صوت استفاده می کند. بعضی دیگر از کاربران ممکن است از طریق تلفن یا سایر سیستمهای اتوماتیک برای دستیابی به اینترنت استفاده کنند. اکنون، سیستمهای اتوماتیک برای دستیابی به اینترنت استفاده می شوند. اکنون سیستمهایی مثل مرورگر صوتی www.netphonic.com) Web-on-call) امکان دسترسی تلفن اتوماتیک به وب سایت را فراهم می کنند. وضعیتی را در نظر بگیرید که یک سیستم تلفن اتوماتیک برای دستیابی به وب، این جملات را می خواند "press1for Corporateinformation"،

"press2forproductinformation". در همه این موارد - مرورگر متنی، سیستم دستیابی اتوماتیک به وب، روباتهای شاخص بندی سایتها - تصویر معنایی ندارد. در این موارد، صفت ALT بسیار مفید واقع می شود. استفاده از صفت ALT برای تهیه اطلاعات دیگری راجع به یک تصویر، می تواند بسیاری از مسائل دستیابی را حل کند، اما فقط ذکر یک متن کافی نیست. مهمترین عیب این نوع متنها این است که فایده چندانی ندارند. متن باید گویا و مفید باشد. اگر تصویر مهم باشد، وجود یک متن مناسب باALT ضروری است ولی اگر تصویر فقط به عنوان دکور باشد، بهتر است ALT برابر با تهی شود: "= ALT

 

چند رسانه ای در وب ( راهنمای html)

قواعد پیشرفتهٔ شیوه نامه

کاربرد شیوه نامه خارجی

خواص لیستها(راهنمای html)

خواص فاصله گذاری(راهنمای html)