آشنایی با تصاویر مورد استفاده در طراحی وب سایت – GIF , JPG , PNG

چهارشنبه, ۱۱ام خرداد , ۱۳۹۰ | ۱۴ دیدگاه

تصاویر بخش بسیار مهمی از قسمت قابل نمایش از هر وب سایت را تشکیل می دهند و میزان حجم , کیفیت , و نوع آنها تاثیر قابل ملاحظه ای در استاندارد بودن و جذابیت هر چه بیشتر یک وب سایت دارد.
در اینجا سه فرمت اصلی تصاویر مورد استقاده در طراحی سایت , نحوه و زمان استفاده از هر کدام را بررسی می کنیم.

GIF

این فرمت مشخص کنندهٔ تصاویر گرافیکی ثابت یا متحرک است. این نام کوتاه شده Graphics Interchange Format که مفهوم لغوی آن در زبان فارسی قالب مبادلهٔ گرافیک است. این قالب گرافیکی توسط شرکت CompuServe در سال ۱۹۸۷ میلادی معرفی شده است و امروزه به طور گسترده در وب مورد استفاده قرار میگیرد.
در این فرمت تصویری از تکنیک LZW (Lempel-Ziv-Welch) برای فشرده سازی تصاویر استفاده می شود که یک تکنیک فشرده سازی ( Lossless compression ) است.تعداد رنگهای مورد استفاده در این فرمت با توجه به ۸ bit بودن آن ۲۵۶ رنگ است که یک بازه رنگ نسبتا محدود برای استفاده در اختیار شما قرار میدهد .این ۲۵۶ رنگ از یک محدوده رنگ بزرگتر (۲۴ bits: 8 red, 8 green, 8 blue) با ۱۶,۷۷۷,۲۱۶ رنگ انتخاب می شود. ( با توجه به ترکیب رنگ و نوع تصویر ) به دلیل محدودیت تعداد رنگ ها ازاین فرمت برای تصاویری با تعداد رنگ کمتر از ۲۵۶ استفاده میشود .برای تصاویر دیجیتال و یا تصاویر دارای Gradiant از این فرمت استفاده نکنید . زیرا به دلیل محدودیت تعداد رنگها باعث کم کیفیت و نامرتب شدن تصاویر شما خواهد شد.
این فرمت برای تصاویرخطی ، عناصر با لبه های تیز و تعداد رنگ محدود بسیار مناسب است . ( مانند لوگوهایی با چند رنگ و لبه های تیز، خطوط و نمودارها )
یکی از قابلیت های مهم این فرمت تصویری قابلیت ساخت تصاویر متحرک است. می توانید با استفاده از نرم افزارهای ویرایش تصاویر مانند Photoshop و یا نرم افزارهایی که برای ساخت تصاویر متحرک با فرمت GIF برنامه ریزی شده اند ، برای ساخت تصاویر متحرک ساده خود استفاده کنید. ( Animated gif )

JPG

استاندارد مورد استفاده برای فشرده سازی تصاویر که نام آن ، کوتاه شده Joint Photographic Experts Group ، نام سازمان ایجاد کننده این استاندارد در سال ۱۹۹۲ است.
از این استاندارد بیشتر برای ذخیره سازی تصاویر دیجیتال و تصاویری که با استفاده از دوربین های عکاسی گرفته شده است ( که دارای میلیونها رنگ هستند ) استفاده می شود. این استاندارد به شما اجازه میدهد با مقداری تغییر در خصوصیات به حجم مناسبی برای انتشار در محیط وب برسید.تکنیک فشرده سازی تصاویر در این فرمت ( Lossy Compression ) است به این معنی که پس از تغییر خصوصیات برای فشرده سازی تصاویر ، کیفیت گذشته تصاویر از دست خواهد رفت و به کیفیت پایین تری از تصاویر خواهیم رسید بنا براین در تغییر خصوصیات با استفاده از این استاندارد دقت نمائید. در استفاده از این استاندارد برای تصاویری همراه با متن ، الگوها و سطوح با لبه های تیز بسیار دقت کنید . زیرا کم کردن خصوصیات به میزان زیاد باعث بهم ریختگی در لبه های متن و سطوح میشود.
با کمی تمرین و تجربه میزان مناسب تغییر در این خصوصیات را درک خواهید کرد و می توانید به طور مناسب از آن استفاده نمائید.میتوانید از نرم افزارهای ویرایش تصاویر مانند Photoshop ( گزینه Save for web در منوی File ) برای تغییر در خصوصیات تصاویر استفاده نمائید.

PNG

نام آن کوتاه شده کلمه Portable Network Graphics است که در سال ۱۹۹۶ به عنوان جایگزینی پیشرفته تر و مناسب برای GIF (Graphics Interchange Format) به وجود آمد.
PNG از محدوده رنگ ۲۴-bit RGB or 32-bit RGBA و همچنین Grayscale ( همراه و یا بدون alpha channel ) پشتیبانی می کند.PNG فرمتی است که برای انتشار در محیط وب به وجود آمده است و برای کارهای چاپی مورد استفاده قرار نمی گیرد و به همین دلیل از محدوده رنگ فایلهای چاپی نیز ( CMYK ) پشتیبانی نمی کند. یکی از خصوصیات جذاب این فرمت تصویر برای طراحان و توسعه دهندگان وب خاصیت alpha channel آن می باشد که موجب ایجاد تصاویر Transparent ( زمینه شفاف ) می شود.
از دیگر خصوصیات موجود در فرمت های GIF و PNG (Lossless compression ) از دست ندادن کیفیت ظاهری پس از فشرده سازی تصویر است ( بر خلاف استاندارد JPEG )
در فرمت PNG از تکنولوژی ( ZLib ) برای فشرده سازی تصاویر استفاده میشود که کارآمد تر از تکنیک فشرده سازی در GIF است (LZW ) دونوع متفاوت از فرمت PNG با کیفیت متفاوت در صفحات وب مورد استفاده قرار میگیرند.

PNG8 (8-bit) ازنظر محدودیت رنگ مانند .gif است (۲۵۶ رنگ حداکثر) ، اما میتوان از خاصیت alpha channel آنها برای ایجاد تصاویر شفاف استفاده نمود.

PNG24 (24-bit) اجازه استفاده از بازه بیشتری از رنگها را به شما میدهد.

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

بهینه سازی تصاویر برای انتشار در محیط وب

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

مراحل بهینه سازی تصاویر با استفاده از نرم افزار فتوشاپ

مراحل بهینه سازی تصاویر با استفاده از نرم افزار فتوشاپ

پس از باز کردن تصویر مورد نظر در محیط فتوشاپ از منوی file گزینه Save For Web را انتخاب نمائید.

مراحل بهینه سازی تصاویر با استفاده از نرم افزار فتوشاپ

پس از باز شدن پنجره مخصوص برای ذخیره تصاویر برای انتشار در محیط وب فرمت تصویر مورد نظر را انتخاب نمائید.

مراحل بهینه سازی تصاویر با استفاده از نرم افزار فتوشاپ

به طور مثال برای فرمت JPG می توانید با افزایش یا کاهش درصد کیفیت به حجم و کیفیت مورد نظر خود برسید

تصاویر مورد استفاده در طراحی وب سایت ، تفاوتها ، خصوصیات و نحوه استفاده ( jpg , .gif , .png. )

در تصویر بالا ، ذخیره سازی تصاویر با استفاده از درصد کیفیت های مختلف را ملاحظه می فرمائید.

تصاویر مورد استفاده در طراحی وب سایت ، تفاوتها ، خصوصیات و نحوه استفاده ( jpg , .gif , .png. )

تفاوت در ذخیر سازی با استفاده از دو فرمت GIF و JPG

تصاویر مورد استفاده در طراحی وب سایت ، تفاوتها ، خصوصیات و نحوه استفاده ( jpg , .gif , .png. )

ملاحظه می کنید که پس از ذخیره سازی با استفاده از فرمت PNG سایز تصویر بدون تغییر چشمگیری در کیفیت تصویر افزایش پیدا کرده است. بهترین گزینه می تواند فرمت JPG با کیفیت ۵۰ درصد باشد

تصاویر مورد استفاده در طراحی وب سایت ، تفاوتها ، خصوصیات و نحوه استفاده ( jpg , .gif , .png. )

با استناد به تصویر بالا ملاحظه میکنید که فرمت GIF برای ذخیره سازی تصاویری شامل نوشته ها و خطوط صاف بهتر از JPG عمل میکند

تصاویر مورد استفاده در طراحی وب سایت ، تفاوتها ، خصوصیات و نحوه استفاده ( jpg , .gif , .png. )

تصاویر مورد استفاده در طراحی وب سایت ، تفاوتها ، خصوصیات و نحوه استفاده ( jpg , .gif , .png. )

تصاویر مورد استفاده در طراحی وب سایت ، تفاوتها ، خصوصیات و نحوه استفاده ( jpg , .gif , .png. )

در تصاویر بالا تفاوت میان تصاویر با پس زمینه های شفاف را در فرمت های مختلف ملاحظه می فرمائید. همانطور که ملاحظه می کنید برای ذخیره تصاویر با پس زمینه شفاف بهترین گزینه می تواند PNG 24bit باشد . در مورد تصاویری با لبه های گرد و پس زمینه شفاف می توان از فرمت های GIF و PNG 8 bit هم استفاده نمود

مطلب فوق از وبلاگ webtarget.ir نقل شده است ، اگرعلاقه مند به دنبال کردن مطالب این وبلاگ هستید میتوانید آدرس فید این وبلاگ را در فید خوان خود اضافه کنید و به این روش حمایت خود از این وبلاگ جدید را اعلام فرمائید .
Be Sociable, Share!


۱۴ دیدگاه

  1. […] کامل در ITTutorial برچسب ها: آموزش آی تی, آشنایی, تصاویر, سایت, طراحی, […]




  2. shima
    ۱۲ خرداد ۱۳۹۰

    salam
    matalebi ke vasam mifrestin kheili khob hast
    mamnoon




  3. حمید رضا
    ۱۲ خرداد ۱۳۹۰

    واقعا عالی بود.




  4. misssdandelion
    ۱۳ خرداد ۱۳۹۰

    عالی بود مرسی




  5. طراحی وب تورتک
    ۱۸ خرداد ۱۳۹۰

    مقاله مفیدی بود خیلی ممنونم از بازنشر آن …
    همچنین پیشنهاد می کنم بعد از ساخت تصویر خود برای وب که در مقاله به طور کامل چگونگی انجام آن گفته شد از سرویس Smush.it یاهو برای کم کردن و فشرده سازی حجم تصاویر خود استفده کنید که از طریق آدرس زیر قابل دسترس است.
    http://smushit.com
    همچنین دوستانی که مثل من برای انتشار سایت یا وبلاگ خود از سیستم دوست داشتنی وردپرس استفاده می کنند برای فشرده سازی تصاویر خود که در هنگام افزودن نوشته به مطلب خود اضافه می کنند می توانند به صورت اتوماتیک توسط Smush.it از افزونه که در زیر آدرس آن درج شده است استفاده کنند.
    http://wordpress.org/extend/plugins/wp-smushit/




  6. سجاد
    ۱۶ شهریور ۱۳۹۰

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




  7. Behzad
    ۲۷ شهریور ۱۳۹۰

    Salam, matlabe kheily khubi bud mamnoon, bazi az aksha tuye website ha hastand ke be tadrijload kishand,yani ebtedan ba keifiate payin load mishan va ba’d be moroor kamel ba keyfiat load mishan, fekr mikonam akshaye gif bashand ama nemidoonam cehjur mishe ba photoshop oon haro sakht va harchizi roham ke tooye photosho vojud dasht emtehan kardam javab nadad, mamnoon misham agar rahnamaeem konid




  8. محمد صادق
    ۱۶ مهر ۱۳۹۰

    با سلام
    از مطالب مفیدتون متشکرم. یک پیشنهاد داشتم و اون این هست که اگر بشه لطف کنید نسخه ی pdf هر مطلب رو هم بگذارید خیلی عالی میشه به این خاطر که اصولا شخصا این مطالب را ناگذیر به ذخیره و در آینده خواندن هستم. این شکلی هم قالب مطلب مرتب قرار می گیره و هم در فایل pdf منبع سایت شما به خوبی ذکر میشود.
    ممنون




  9. امين
    ۲۸ مهر ۱۳۹۰

    سلام دستتون درد نکنه
    هر چی می خواستم اینجا هست




  10. 123a
    ۱۸ آبان ۱۳۹۰

    سلام
    مطالبتون واقعا خوب ومفید هست ولی اگر به صورت فایل pdf قرار می دادید روی سایت واقعا عالی بود




  11. شكيبا
    ۱۲ آذر ۱۳۹۰

    شما حرف ندارید
    شمااااااااااااااااااااااااااااااااااااااااااااااااااااااااااا
    حرررررررررررررررررررررررررررررررررررررررررررررف
    ندااااااااااااااااااااااااااااااااااااااااااااااااااااااااااارید
    دیگه چی بگم




  12. alisheytoon
    ۲۴ آذر ۱۳۹۰

    خیلی ممنون . مفید و کامل …




  13. روژ
    ۲۵ دی ۱۳۹۰

    ممنوووووووووووون




  14. س.م
    ۱۸ فروردین ۱۳۹۱

    سلام
    کد قالب سایت های را چگونه می توانم پیدا کنم؟؟؟؟



دیدگاه خود را بنویسید