نمایش خبر

معرفی انواع فرمتهای رایج تصاویر در وب

معرفی انواع فرمتهای رایج تصاویر در وب

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

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

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

فرمت های زیادی برای تصاویر وجود دارد (jpg,png,gif,tiff,bmp,wbmp,…) که هرکدام در جای خاصی کاربرد دارند،مثلا فرمتTIFF مخصوص چاپ است اما ما در اینجا فقط فرمت های رایج در طراحی وب سایت را معرفی می کنیم.

jpg

این فرمت یکی از قدیمی ترین و پرکاربرد ترین فرمت تصاویر می باشد که خود این فرمت نیز دارای انواع مختلفی است که در حالت فشرده سازی با هم تفاوت دارند(همانند jpg, jpeg, jpe,…). که البته تفاوت چندان فاحشی نیست و در اینجا موضوع مورد بحث ما نیست.

تصاویر با فرمت jpg از تمامی رنگ ها پشتیبانی می کنند و از لحاظ رنگ ها محدودیتی ندارد و می توانند با کمترین حجم روی سیستم ذخیره شود.این موضوع یکی از مهمترین دلایلی می باشد که گرافیست ها این نوع از تصاویر را به عنوان خروجی استاندارد محصولشان در نظر می گیرند.

اما بزرگترین ویژگی این فرمت نسبت به سایر فرمت ها، حجم فایل است. که در تصاویر بزرگ رنگارنگ مثلا wallpaperها این تفاوت بسیار زیاد است. به همین دلیل است که این فرمت کاربرد زیادی دارد. اما نکته دیگر این است که کیفیت این تصاویر که رابطه مستقیم با حجم فایل دارد توسط نرم افزارهای ویرایش تصویر(Photoshop, firework,..) قابل تنظیم کردن است. بازه این کیفیت بین ۰ تا ۱۰۰ است، تصاویر jpg درحالت پیشفرض و معمولی دارای کیفیت ۸۰ هستند که تصاویر با کیفیت بین ۵۰ تا ۸۰ برای طراحی صفحات وب مناسب است و کمتر از این میزان در اکثر موارد باعث تغییر در ظاهر تصویر و مات شدن و درنتیجه پائین آمدن کیفیت تصویر میشود.

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

gif

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

png

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

این نوع از تصاویر می توانند جایگزین مناسبی برای نوع GIF باشند زیرا از تمام رنگ ها می تواند در تصاویر استفاده کند تا کیفیت عکس به حداکثر برسد. ولی اندازه تصاویر با فرمت PNG از نوع GIF به نسبت بیشتر است. از ویژگی های منحصر به فرد این نوع تصاویر خاصیت شیشه ای (transparency) است. به عبارت دیگر اگر تصویری از نوع JPG زیر تصویری از نوع PNG با خاصیت transparency باشد، تصویر زیرین مشاهده خواهد شد. این یکی از ویژگی های منحصر به فرد این نوع از تصاویر بوده که باعث محبوبیت آنها در میان طراحان وب سایت شده است.

خود این فرمت دارای دو نوع Png 8 و Png 24 می باشد که وجه مشترک این دو نوع پشتیبانی از حالت نمایش زمینه شفاف است Png 8. به لحاظ ساختاری به فرمت Gif نزدیکتر است و کیفیت تصاویر بدون پس زمینه در این حالت در اکثر موارد بهتر از Gif است.

اما Png 8 همانند GIF پیکسل های نیمه شفاف را پشتیبانی نمی کند به همین دلیل در بعضی جاها نمی توان تصویر بدون زمینه زیبایی داشت، مثلا اگر تصویر ما دارای سایه باشد حالت png8 نمیتواند پیکسل های طیف سایه را که از پر رنگ به کم رنگ است بصورت نیمه شفاف و کامل نمایش دهد اما png 24 بخوبی این حالت را پشتیبانی میکند و در موارد مشابه بهتر است از این فرمت استفاده شود.

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

به طور کلی در تصاویر باید موارد زیر را در نظر بگیرید:

  • حجم فایل و رابطه مستقیم آن با سرعت بارگذاری سایت (هرچه کم حجم تر باشد سریع تر بارگذاری می شود).
  • اندازه تصویر ( بزرگ، کوچک یا پس زمینه بودن)
  • ساختار طراحی گرافیکی وب سایت (آیا طراحی کلی حالتی تک رنگ دارد؟ ویا از طیفهای مختلف رنگ استفاده شده؟).
  • انیمیشن ( تصویر تبلیغاتی است که در این حالت لزوما باید GIF باشد).
  • محل و مکان استفاده از تصویر (بنر سایت است یا فوتر یا ...)
  • خاصیت (transparency) زمینه تصویر شفاف است یا نیمه شفاف.

امیدوارم مطالعه این مقاله برای شما مفید بوده باشد.با ادامه مقالات آموزش زبان HTML با ما همراه باشید.

کامنت جدید ...
Sort by:

'