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

آشنایی با فرمت تصاویر مورد استفاده در طراحی وب سایت ( jpg , .gif , .png. ) , مزیت ها, معایب و نحوه استفاده


امیر سروری ۱۹ دیدگاه استاندارد وب سایت , اصول طراحی وب سایت شنبه, ۱۱ام دی , ۱۳۸۹ 31527 بازدید

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

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 هم استفاده نمود



نویسنده / مترجم : امیر سروری

امیر سروری هستم علاقه مند به بازاریابی و تبلیغات آنلاین , طراحی وب سایت و البته آموزش


۱۹ دیدگاه برای این نوشته ثبت شده است


  1. صالح
    ۱۵ دی ۱۳۸۹

    عالی بود

    شاد و پیروز باشید



  2. سلام
    واقعا ممنون
    آموزنده بود.




  3. Ali Aghdam
    ۲۶ دی ۱۳۸۹

    بسیار مفید، بسیار




  4. Moham2ad
    ۱۷ بهمن ۱۳۸۹

    ممنون!




  5. مسعود
    ۱۸ بهمن ۱۳۸۹

    ممنون امیر جان !




  6. سعید
    ۲۸ شهریور ۱۳۹۰

    ممنون .زیبا بود




  7. کرل دیزاین
    ۱۱ شهریور ۱۳۹۱

    خیلی مفید و آموزنده بود
    منبع این مطلب رو اگه میشه ذکر کنید!
    ترجمه ش رو خودتون انجام دادین ؟




    • امیر سروری
      ۱۱ شهریور ۱۳۹۱

      بله امیر عزیز این مطلب رو من خودم تقریبا یک سال و خورده ای پیش نوشتم با استفاده از منابع انگلیسی متنوع ! چطور فکر کردین که من مطلبی رو کپی کردم! آیا جای دیگه ای دیدین ؟ ممکنه البته دوستان دیگه ای این لطف رو به ما داشتن و مطلبمون رو کپی کرده باشن ;-)




      • کرل دیزاین
        ۱۱ شهریور ۱۳۹۱

        نه دوست عزیز منظورم این نبود که کپی کردین
        میخواستم بگم که اگه اگه ترجمه کردین منبع رو ذکر میکردین. همین.

        موفق باشی




        • امیر سروری
          ۱۳ شهریور ۱۳۹۱

          ممنون امیر عزیز ، حالا از شانس خوبم این مطلب رو خودم از منابع ختلف خوندم و برآیندش رو نوشتم :-) چشم در مورد ترجمه ها هم سعی میکنیم منابع رو ذکر کنیم ;-) در هر صورت ممنون از توجهت و امیدوارم شما هم موفق باشی




  8. amirali
    ۱۷ آذر ۱۳۹۱

    مممنون




  9. بتن
    ۱۶ اردیبهشت ۱۳۹۲

    عالی بود




  10. ققنوس
    ۹ خرداد ۱۳۹۲

    دوست عزیز خیلی توپ بود ایوللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللللل




  11. HoSsEin
    ۸ شهریور ۱۳۹۲

    کلی از وبسایتتون چیز یاد گرفتم :D

    دستتون درد نکنه ;)




  12. علی حاجیلویی
    ۲۳ آذر ۱۳۹۲

    با سپاس از مطالب خوب شما..
    اما ای کاش از فرمت svg هم که این روزا توی وب بحثش داغ هست می نوشتید..
    موفق باشید..




  13. مدل لباس
    ۱۲ شهریور ۱۳۹۳

    باسلام ممنون عالی ومفیدبود




  14. دوست
    ۲۸ خرداد ۱۳۹۵

    بسیار عالی بود



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





نشانی ایمیل شما منتشر نخواهد شد.

کامنت های شما بعد از تأیید توسط نویسنده وبلاگ، منتشر خواهند شد.

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

شما میتوانید با مراجعه به سایت گراواتار یک آواتار اختصاصی برای خود تعریف کنید، تا در کنار نام شما نمایش داده شود

برای قرار دادن کدهای نمونه می توانید از تگ های [php] ، [html] ، [css] و [js] استفاده کنید.
به عنوان مثال کدهای php را می توان به صورت زیر قرار داد:
[php] var $whoLoveIranians = "WebTarget!"; [/php]



کلیه حقوق مادی و معنوی برای وب سایت وب تارگت محفوظ است ©2017 وب‌تارگت

استفاده از مطالب وب سایت در سایر وب سایت‌ها و نشریات چاپی با ذکر منبع آزاد است.