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

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


امیر سروری 20 دیدگاه استاندارد وب سایت , اصول طراحی وب سایت Saturday, 1st January , 2011 50974 بازدید

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

GIF

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

JPG

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

PNG

نام آن کوتاه شده کلمه Portable Network Graphics است که در سال 1996 به عنوان جایگزینی پیشرفته تر و مناسب برای GIF (Graphics Interchange Format) به وجود آمد.
PNG از محدوده رنگ 24-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 است (256 رنگ حداکثر) ، اما میتوان از خاصیت alpha channel آنها برای ایجاد تصاویر شفاف استفاده نمود.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



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

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


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


  1. صالح
    5 January 2011

    عالی بود

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



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




  3. Ali Aghdam
    16 January 2011

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




  4. Moham2ad
    6 February 2011

    ممنون!




  5. مسعود
    7 February 2011

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




  6. سعید
    19 September 2011

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




  7. کرل دیزاین
    1 September 2012

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




    • امیر سروری
      1 September 2012

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




      • کرل دیزاین
        1 September 2012

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

        موفق باشی




        • امیر سروری
          3 September 2012

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




  8. amirali
    7 December 2012

    مممنون




  9. بتن
    6 May 2013

    عالی بود




  10. ققنوس
    30 May 2013

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




  11. HoSsEin
    30 August 2013

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

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




  12. علی حاجیلویی
    14 December 2013

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




  13. مدل لباس
    3 September 2014

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




  14. دوست
    17 June 2016

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




  15. ati
    1 January 2018

    سلام مطالبتون واقعا آموزنده و مفید بود …
    فقط کاش آموزش asp.net رو هم میذاشتین!



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





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

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

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

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

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



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

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