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

GIF، JPEG، PNG، تمام فرمت های مبتنی بر bitmap: در حال حاضر، تصاویر بر روی وب را می توان به فرمت های تصویری مختلف تقسیم کرد. فرمت برداری جدید به نام SVG با ابعاد زیاد می باشد و انتظار می رود در آینده نزدیک به فرمت اصلی تصویر وب تبدیل شود. لطفا توجه داشته باشید که دیگر فرمت های گرافیکی وب سایت اختصاصی مانند فلش ماکرومدیا (وب انیمیشن دار) و MetaCreations MetaStream 3D، که کاربران برای مشاهده نیاز به پلاگین دارند. این فرمت های اختصاصی در این مقاله مورد بحث نیست.

قبل از مشاهده فرمت های مختلف تصویر وب ، اجازه دهید نگاهی به برخی از مفاهیم اساسی است که درک ما را بالا می ببرد بندازیم.

بیت مپ (Bitmap) در مقابل بردار(Vector)

چه تفاوت بین بیت مپ (Bitmap) و گرافیک برداری(vector) وجود دارد؟

تصاویر بیت مپ به صورت پیکسل هستند. تصور کنید که شما یک تصویر پرتقال. با استفاده از یک مداد روی تصویر یک شبکه 800 ستون و 600 ردیف طراحی کنید. هر سلول از شبکه در حال حاضر از تصویر bitmap بزرگتر است. یک تصویر بیت مپ وابسته به وضوح است زیرا آن استفاده می کند از یک عدد ثابت از پیکسل که داده های تصویر را نشان می دهد. زوم تصویر bitmap نارنجی باعث می شود تا کیقیت آن را از دست رود و جزئیات به عنوان داده های تصویری موجود در هر پیکسل است مقیاس پذیر نباشد.

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

فشرده سازی lossless در مقابل اتلاف کیفیت

فرمت تصویر فشرده سازی lossless، مانند GIF، به سادگی به این معنی است که کیفیت تصویر زمانی که تصویر فشرده شده است کاهش پیدا نمی کند.

قالب سازی با اتلاف تصویر، مانند JPEG، بدان معنی است که برخی از داده های تصویر با فشرده سازی کیفیتشان از دست می دهند. کاهش کیفیت تصویر.

عمق بیت

عمق بیت در تعداد رنگ یک تصویر می تواند شامل:

4 بیتی = 16 رنگ

8 بیتی = 256 رنگ

16 بیتی = هزاران رنگ

24 بیتی = میلیون رنگ

DPI (نقطه در اینچ)

تصاویر ایجاد شده را برای چاپ معمولا با وضوح DPI 300 و بالاتر تنظیم می کنند. مانیتور کامپیوتر تنها می توانید صفحه نمایش 72 پیکسل در هر اینچ نمایش دهد ، بنابراین dpi تصاویر وب سایت خود را بالاتر از 72 قرار ندهید این فقط تنها باعث اتلاف فضای فایل می شود. . هنگامی که اسکن تصاویر و یا ساخت تصاویر وب سایت شما آماده است، به یاد داشته باشید برای تنظیم وضوح تصویر روی 72 نقطه در اینچ قرار دهید.

وب فرمت تصویر

در حال حاضر، اجازه دهید یک نگاهی به فرمت های تصویری مختلف موجود که اغلب بر روی وب سایت هستند بندازیم:

GIF

(Graphics Interchange Format) GIF فرمت بیت مپ برای CompuServe توسط یک شرکت که در حال حاضر بخشی از UNISYS می باشد تهیه شده است. Compuserve GIF به عنوان یک استاندارد عمومی است، اما UNYSIS چند بار تلاش کرده است که GIF به عنوان یک استاندارد اختصاصی می باشد و کاربران برای صدور مجوز باید هزینه پرداخت کنند.. GIF فرمت متغیر 8 بیتی است که با فشرده کردن فایل های بیت مپ به نیمی از اندازه اصلی خود تبدیل می شود، و از شفافیت بالایی برخوردار است. فرمت فشرده سازی lossless در GIF، به این معنی است که کیفیت تصویر زمانی که تصویر فشرده شده است کاهش پیدا نمی کند. GIF برای تصاویر گرافیکی که از 256 رنگ استفاده می کنند و یا کمتر و کارتون مانند بهترین گزینه است.

JPEG

JPEGJPEG (Joint Photographic Experts Group) یک جایگزین برای GIF می باشد ، به طور خاص برای تصاویر عکاسی شده است. JPEG از میلیونها رنگ (24 بیت) پشتیبانی می کند. JPEG قالب سازی با اتلاف تصویر است ، بدان معنی است که برخی از داده های تصویر با فشرده سازی کیفیتشان از دست می دهند ، کاهش کیفیت تصویر می باشد. عکس JPEG نیز می تواند با کاهش حجم تصویر ذخیره شود. فرمت JPEG برای عکس های اسکن شده یا تصاویر که نیاز به بیش از 256 رنگ بهتر است.

PNG

PNG (یا Portable Network Graphics) متنوع ترین فرمت های صفحات وب گرافیکی فعلی است. با این حال، مرورگرهای وب جدید می توانند کامل از ویژگی های PNG مانند رنگ 32 بیتی و شفافیت استفاده کنند. فشرده سازی PNG یک فرمت فشرده سازی lossless است و می تواند بیش از GIF و یا JPEG از همان عمق رنگ و کیفیت بهره گیرد، در نتیجه حجم فایل کوچکتر و فشرده سازی شده است. فرمت PNG است که بهترین راه حل برای ایجاد گرافیک رنگی با کیفیت یا فشرده سازی بهتر با عدم کاهش رنگ می باشد.

SVG

SVG (Scalable Vector Graphics) انقلابی است در فرمت تصویر جدید که توسط W3C (کنسرسیوم شبکه جهانی وب) تهیه شده است.، سازمانی است که به ایجاد استانداردهای وب مشغول به کار است. SVG در XML ((Extensible Markup Language))و زبان وب مانند از HTMLWorld Wide Web Consortium),) کاربرد دارد.از SVG انتظار می رود که در گرافیک با وضوح بالا مورد استفاده در رسانه های چاپی امروز (مجلات، روزنامه ها، مجلات، کاتالوگ، و غیره) به وب سایت استفاده شود . تصاویر SVG با ابعاد بردار (به عنوان مخالف به بیت مپ مبتنی بر عکس JPEG، GIF و PNGs) به این معنی که تصاویر را می توان در داخل و خارج بزرگنمایی کرد به طوری که بدون از دست دادن هر گونه اطلاعات و کیفیت باشد و همچنین انتظار می رود به اندازه فایل هایی حتی کوچکتر از عکس JPEG، GIF یا PNGs باشد. بنا بر این با سرعتهای بالاتری دانلود شود، SVG امکان چاپ با وضوح بالا، کارایی بالا در زوم و سوژه متحرک از روبرو، و حتی تعبیه تصاویر یا اطلاعات دیگر در داخل تصویر SVG با ابعاد خود را میسر می سازد!

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

تصاویر زیر را با کیفیت های مختلف در زیر مشاهده می کنید. لطفا با دقت به کیفیت تصویر نوجه نمایید.

	تصویر: webmehraz32.gif رنگ: 32 اندازه: 3847 بایت
	تصویر: webmehraz16.gif رنگ:16 اندازه: 2960 بایت
	تصویر: webmehraz100.jpg کیفیت: 100% اندازه: 9617 بایت
	تصویر: webmehraz75.jpg کیفیت: 75% اندازه: 3469 بایت
	تصویر: webmehraz25.jpg کیفیت: 25% اندازه: 1894 بایت