رایج ترین فرمت های تصویر در صفحات وب. گرافیک در یک صفحه وب در HTML. قرار دادن یک تصویر گرافیکی از یک فایل

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

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

کلمه کلیدینوار.

TAPE=1 - شماره گذاری استاندارد (1،2،3،4،5، ...)

TAPE=A - حروف بزرگ (A، B، C، D، ...)

TAPE=a - حروف فوری (a، b، c، d، ...)

TAPE=I - اعداد رومی (I، II، III، IV، ...)

TAPE=i - اعداد رومی با حروف کوچک (i، ii، iii، iv، ...)

لیست های تعریف کمی متفاوت از انواع دیگر لیست ها به نظر می رسند. در این مورد، از دو تگ برای توصیف هر آیتم لیست استفاده می شود و نه یک تگ

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

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

   همه لیست های بالا را پخش کنید

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

   تعدادی تگ برای تعریف جداول استفاده می شود. برچسب ها

   وکل جدول را قاب کنید و تعدادی تگ دیگر نحوه نمایش اطلاعات را تعیین می کند. جدول نشان می دهد توضیحات کاملبرچسب های جدول

   
   
   

   تگ های HTML برای ساخت جداول:

   برچسب ها توضیحات

   و این تگ ها جدول را می پوشانند. برچسب بزنید

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

   به صورت هدر نمایش داده می شود. همچنین می توانید از برچسب ها برای تنظیم عنوان استفاده کنید. و.

   برچسب‌ها متن را به صورت عناوین ردیف یا ستون با فونت پررنگ‌تر نشان می‌دهند.

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

   این جفت تگ متن هر سلول جدول را از هم جدا می کند.

   یک فایل ایجاد کنید که در آن یک جدول با پنج سطر و پنج ستون بسازید.

   تعدادی تگ وجود دارد که به شما امکان می دهد پس زمینه و رنگ های شبکه جدول را تنظیم کنید. در حالت اول، کلمه کلیدی BGCOLOR در تگ درج می شود

   و متن مشخص شده با این تگ ها،

   و
   و

   تصاویر زیر:

   علاوه بر کلمه کلیدی BGCOLOR، راه های دیگری نیز برای کنترل رنگ وجود دارد:

   BORDERCOLOR رنگ شبکه جدول را تغییر دهید

   BORDERCOLORDARK/ برای تغییر شبکه از استفاده می شود

   BORDERCOLORLIGHT برای جلوه سه بعدی اضافی

   تغییر رنگ شبکه جدول با جلوه 3D.

   درس 12-13.استفاده از گرافیک

   تصاویر و گرافیک برای WWW بسیار مهم هستند. این تنها ابزار اینترنتی است که به شما امکان می دهد تصاویر و متن را همزمان روی صفحه نمایش مشاهده کنید.

   برای قرار دادن یک تصویر در یک صفحه وب، باید بدانید که چگونه تگ را اعمال کنید . یک برچسب وارد کنید و کلمه کلیدی SRC= برای تعیین اینکه کدام گرافیک باید بارگذاری شود.

   

   هنگام وارد کردن این تگ، لطفا توجه داشته باشید که فایل باید در همان پوشه فایل HTML شما باشد.

   گرافیک و ترافیک

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

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

   GIF و JPEG دو مورد از محبوب‌ترین فرمت‌های تصویر هستند و مدت‌هاست که استانداردهای واقعی برای استفاده در WWW بوده‌اند. هر دو کاملا جهانی هستند، توسط اکثر مرورگرها خوانده می شوند و نیازی به خاصی ندارند نرم افزار(یا ماژول های اضافی). GIF و JPEG فرمت های تصویر شطرنجی هستند که به ترتیب یک فرمت ثابت (رزولوشن) را هنگام نمایش چنین تصاویری روی صفحه تعیین می کنند. هنگامی که سعی می کنید مقیاس (ارائه شده در برخی از مرورگرها) را انجام دهید، تصاویر بیت مپ (پیکسلی) کیفیت زیادی را از دست می دهند. علاوه بر این، برای فرمت GIF 8 بیتی (256 رنگ)، انتخاب پالت رنگ یک مشکل جدی است.

   فرمت های گرافیکی برداری برای استفاده در وب بسیار جذاب تر هستند. بر خلاف بیت مپ، گرافیک برداری بر اساس نمایش ریاضی (هندسی) داده ها است. چنین تصاویری از نظر ذخیره سازی / انتقال بسیار کوچکتر هستند ، به راحتی مقیاس بندی می شوند و عملاً در طول هیچ تغییری کیفیت را از دست نمی دهند. متأسفانه، فرمت های برداری هنوز در اینترنت کاربرد کمی دارند، اما استانداردها قبلاً شکل گرفته اند و باید مورد توجه طراحان قرار بگیرند.

   چندین استاندارد برداری نسبتاً اخیراً پیشنهاد شده‌اند و فرمت‌های PGML و VML در حال حاضر توسط کنسرسیوم وب جهانی (W3C) در نظر گرفته شده‌اند. با این حال، Macromedia که VML را ترویج می کند، مدت هاست که فرمت برداری خود را باز کرده است. Shockwave Flashبه توسعه دهندگان دیگر و ماژول های اضافی برای مشاهده گرافیک در این فرمت برای مرورگرهای محبوب پیاده سازی شده است.

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

   بنابراین، انتخاب فرمت در نهایت به وظایف شما بستگی دارد و این شما هستید که تصمیم می گیرید کدام تصاویر با مخاطب هدف شما مرتبط تر باشد.

   GIF - فرمت برای طراحی

   CompuServe در ابتدا فرمت GIF خود را برای برنامه های کاربردی تعاملی در ظرفیت محدود گرافیک های استاندارد در رایانه شخصی در نظر گرفته بود. در ابتدا یک فرمت بیت مپ 4 بیتی و بعداً 8 بیتی با نقشه رنگی بود که حداکثر 256 رنگ را پشتیبانی می کرد. یکی از مزایای قابل توجه فرمت این است که تصاویر را می توان در یک پالت خاص (مجموعه ای از رنگ ها) فهرست کرد، در حالی که تصاویر JPEG را نمی توان به یک پالت "پیوند" کرد و نمایش "صحیح" آنها همیشه امکان پذیر نیست. این ویژگی به ویژه برای آن دسته از توسعه دهندگانی که از نمایه سازی پالت برای بهینه سازی رندر تصویر برای همه پلتفرم ها بدون استثنا (خواه PC، Mac، Web-TV یا دیگران) استفاده می کنند، صرف نظر از اینکه این یا آن سیستم با چه عمق رنگی کار می کند، مهم است. این تطبیق پذیری را می توان با یک پالت محدود از 216 رنگ به دست آورد که شامل تمام رنگ های رایج مورد استفاده در ویندوز و برای مثال در MacOS می شود. طراحی سایت در یک پالت جهانی، نمایشگر سازگار، چند پلتفرمی و مستقل از سخت افزار را تضمین می کند. علاوه بر این، فرمت GIF از یک طرح فشرده‌سازی بدون تلفات استفاده می‌کند (با یک الگوریتم رمزگذاری تکراری ساده: دنباله‌ای از بایت‌های همرنگ با کلمه‌ای دو بایتی جایگزین می‌شود که یکی از آنها حاوی یک الگوی پر کردن است، و دومی تعداد را تعیین می‌کند. از تکرارها)، بنابراین داده های گرافیکی در این فرمت اطلاعات را در فرآیند فشرده سازی و بازیابی از دست نمی دهند.

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

   بنابراین، مزایای اصلی فرمت GIF استفاده از فشرده سازی بدون اتلاف و حفظ اقتصادی نواحی جامد رنگ با حاشیه روشن و انتقال رنگ دقیق است. فرمت JPEG با فرمت توضیح داده شده تفاوت دارد زیرا بسته به سطح فشرده سازی، مناطق جامد در آنجا از بین می روند و انتقال رنگ های تیز صاف یا شسته می شوند.

   معیار اصلی برای انتخاب فرمت GIF: اگر خودتان تصویری را در یک بسته گرافیکی مانند Photoshop یا Painter کشیده اید که دارای مناطق بزرگی از همان رنگ است، یا یک تصویر موجود را پردازش کرده اید و می خواهید کنتراست بالا را حفظ کنید (مثلاً لازم است، هنگام نمایش متن)، سپس آن را در این قالب ذخیره کنید (مخصوصاً برای نقاشی های سیاه و سفید یا رنگی ضعیف).

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

   همچنین مهم است به خاطر داشته باشید که اگر می‌خواهید تصاویر GIF با صدای پیوسته را ذخیره کنید، احتمالاً باید اطلاعات زیادی را در فرآیند آماده‌سازی تصویر (هنگام تبدیل آن به یک پالت ثابت) و فشرده‌سازی GIF دور بیندازید. این روش به قدری ناکارآمد خواهد بود که از نظر مالی نیز ضرر خواهید کرد (هم از نظر هزینه نیروی کار و هم از نظر اندازه پرونده).

   از جمله موارد دیگر، فرمت GIF به اصطلاح ظاهر در هم آمیخته (Interlaced) را فراهم می کند که به کاربران با کانال های کند در همان ابتدای دریافت کمک می کند تا محتوای تصویر را ارزیابی کنند (اثر شبیه به ترسیم تدریجی یک غیر شارپ است. تصویر) و زمان لازم برای انتقال کامل آن، و در نتیجه تصمیم گیری در مورد ادامه مصرف آن یا امتناع از آن بهتر است. با این حال، برخلاف JPEG پیشرونده، تأثیر در اینجا بیشتر روانی است تا واقعی (شکل را ببینید).

   همچنین باید یک مزیت مهم فرمت GIF را به خاطر بسپارید که در برخی موارد حتی با تمام کاستی های آن نمی توان از آن چشم پوشی کرد، پشتیبانی از شفافیت (پسوند GIF89a) است که امکان نمایش یک شبح با خطوط غیر مستطیلی را بر روی آن فراهم می کند. یک پس زمینه موجود شفافیت در قالب GIF به صورت بدوی اجرا می شود - یک رنگ (معمولاً پس زمینه) به عنوان شفاف اختصاص داده می شود. این مزیت اغلب هنگام ایجاد دکمه ها و آیکون ها در طراحی صفحه استفاده می شود (JPEG هیچ گونه شفافیتی را ارائه نمی دهد).

   در نتیجه می توان موارد زیر را بیان کرد: GIF - بهترین انتخاببرای دستیابی به یک مصالحه موثر بین سخت افزار و نرم افزار موجود، و توانایی ایندکس کردن یک تصویر GIF 8 بیتی تا 216 رنگ جهانی ضروری است، زمانی که قرار است تصاویر شما در چندین مرورگر و پلتفرم های ناشناخته نمایش داده شوند.

   JPEG - فرمت برای عکس ها و فریم های ویدئویی

   فرمت JPEG نام خود را از مخفف کمیته مشترک گروه کارشناسان عکاسی (کمیته مشترک کارشناسان عکاسی) گرفته است که این استاندارد را در اواخر دهه 80 و اوایل دهه 90 ایجاد کرد. فرمت JPEG بر اساس یک الگوریتم فشرده سازی با اتلاف (تبدیل کسینوس گسسته) است که با استفاده از آن تصویر شما به مناطق (معمولاً مربع های پیکسل 8×8) تقسیم می شود که در آن توزیع رنگ ها با یک تابع ریاضی و فقط ضرایب جایگزین می شود. این تابع ذخیره می شود و به شما امکان می دهد فرم آن را بازیابی کنید. طبیعتاً با کاهش کیفیت مواجه خواهید شد (بسته به پیچیدگی عملکردی که برای جایگزینی تصویر استفاده می شود) و پس از بازیابی، دیگر تصویر واقعی را دریافت نمی کنید، بلکه "جانشین" ریاضی آن را دریافت خواهید کرد. با این حال، بسته به کیفیت نسخه اصلی و میزان فشرده‌سازی، افت کیفیت ممکن است برای بیننده کاملاً نامرئی باشد. اما از همه مهمتر مزیت jpeg-فرمت در مقایسه با GIF این است که در حالی که GIF فقط 8 بیتی (256 رنگی) است، JPEG 24 بیتی است و می تواند تا 16.7 میلیون رنگ را نمایش دهد.

   به همین دلیل، JPEG تمام رنگی به طور طبیعی اطلاعات ویدیویی بسیار بیشتری را نسبت به GIF بازتولید می کند. این فرمت برای تصاویر واقعی - تصاویر اسکن شده یا عکس های دیجیتال، و همچنین فریم های ویدئویی دیجیتالی یا صحنه های گرافیکی کامپیوتری سه بعدی ارائه شده بهترین مناسب است.

   یکی دیگر از مزیت های JPEG این است که برخلاف GIF، به شما اجازه می دهد تا میزان فشرده سازی اعمال شده بر روی تصویر اصلی را تنظیم کنید که باعث می شود تعادل لازم بین اندازه و کیفیت حفظ شود.

   نسبت فشرده سازی برای JPEG ها بسته به برنامه ویرایش تصویری که استفاده می شود بسیار متفاوت است، اما صفحات وب معمولاً از نسبت های 10:1 یا 20:1 (که به صورت نسبت حجم به تصویر اصلی بیان می شود) استفاده می کنند که معمولاً کیفیت قابل قبولی را ارائه می دهند. با این وجود، می توان تصویر را تا مقادیر شدید 100:1 فشرده کرد (البته با کاهش قابل توجه کیفیت).

   بنابراین، هنگام کار با یک عکس در فرمت JPEG، شما این فرصت را دارید که یک تصویر 24 بیتی با 16.7 میلیون سایه رنگ را ذخیره کنید و علیرغم افت کیفیت در هنگام فشرده سازی، هنوز هم بسیار بیشتر از یک GIF 256 رنگی اصلی مطابقت دارد. عملکرد در این حالت، کاهش اجتناب ناپذیر کیفیت به شدت به اندازه، کیفیت و نوع تصویر اصلی بستگی دارد.

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

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

   PNG - تازگی شطرنجی جهانی

   نسل بعدی فرمت‌های بیت مپ، PNG، از بهترین ویژگی‌های JPEG و GIF بهره گرفته و رویکرد منحصر به فرد خود را به ارائه تصویر اضافه کرده است، که امکان جاسازی در یک فایل را فراهم می‌کند. نسخه های مختلفهمان تصویر برای وضوح کم، متوسط ​​و بالا.

   فرمت PNG (Portable Network Graphics) یک فرمت گرافیکی شطرنجی نسبتاً جدید است که به عنوان استاندارد توسط کنسرسیوم W3C تأیید شده است و باید به تدریج جایگزین هر دو فرمت «منسوخ» شود: هم GIF و هم JPEG. PNG هم نمایه سازی رنگ (تا 256 رنگ)، هم از رنگ های 24 و هم 48 بیتی (True-Color) و کار با کانال شفافیت (کانال آلفا) پشتیبانی می کند، علاوه بر این، بسیار کارآمدتر از ذخیره سازی بیت مپ سنتی است. فرمت ها

   الگوریتم فشرده سازی برای یک تصویر تمام رنگی از نظر کیفیت از JPEG پیشی می گیرد و با پشتیبانی از یک پالت نمایه شده محدود (حداکثر ۲۵۶ رنگ)، فرمت جدید فشرده سازی بدون تلفات را ۱۰ تا ۳۰ درصد بهتر از آنچه در فرمت GIF اجرا می شود انجام می دهد. آن را برای استفاده در هر صورت بهینه می کند. متأسفانه، فرمت جدید مانند فرمت JPEG اجازه نمی دهد کیفیت تصویر در ازای نسبت فشرده سازی بالاتر قربانی شود.

   پشتیبانی از شفافیت PNG، بر خلاف GIF، کامل است، یعنی می توانید تصاویر یا حاشیه های شفاف نیز بسازید، بنابراین مشکل حاشیه های "تمیز"، که حل آن در هنگام استفاده از شفافیت در یک فایل GIF بسیار دشوار است، به راحتی برطرف می شود. اینجا.

   با این حال، علی‌رغم همه پیشرفت‌هایی که توسط PNG ارائه شده است، فرمت جدید تنها زمانی آغاز می‌شود که توسط طراحان وب‌سایت و سازندگان نرم‌افزار هم برای ارائه تصاویر در قالب جدید و هم برای آماده‌سازی آنها برای انتشار استفاده شود. در این میان، با وجود پشتیبانی اخیر از این فرمت در هر دو Netscape Navigator و Microsoft Internet Explorer، یافتن تصاویر PNG در هر نقطه از اینترنت بسیار سخت است.

   و اگرچه آنها آخرین نسخه هاو از PNG پشتیبانی می کنند، آنها این کار را به صورت بسیار محدود انجام می دهند. در حال حاضر، تنها راه حل برای کاربرانی که می خواهند یک فایل PNG کامل را ببینند، نصب یک افزونه (مانند PNG Live) خودشان است.

   ظاهراً توسعه دهندگان در حال کند شدن هستند و منتظر انتقال کامل کاربران به فرمت های جدید هستند. خوب، محافظه کاری سالم هرگز ضرری ندارد، اما ما همچنان قویاً توصیه می کنیم که به تدریج به PNG بروید و حداقل همه استفاده های موجود از فرمت GIF را جایگزین کنید.

   نمایش برداری

   هر دو JPEG، GIF و PNG فرمت های شطرنجی بر اساس نمایش گسسته (پیکسل یا نقطه) یک تصویر هستند، در حالی که فرمت های برداری بر اساس فرمول های ریاضی (نمایش هندسی اشکال) هستند. گرافیک برداریمزایای قابل توجهی نسبت به شطرنجی ارائه می دهد، به خصوص در مورد نمودارها، متن ها و گرافیک های صنعتی (و مقرون به صرفه بودن فرمت ها برای اینترنت از اهمیت بالایی برخوردار است).

   بنابراین، اولین مزیت، اندازه قابل توجهی کوچکتر تصاویر برداری در مقایسه با بیت مپ است، زیرا هر پیکسل تصویر توصیف نمی شود، بلکه کل شکل است (به عنوان مثال، برای تنظیم یک دایره، باید 3-4 عدد را منتقل کنید: شعاع، مختصات مرکز و، شاید، نوع یا ضخامت خط و ویژگی های آن). فرمول‌های ریاضی که نمایش برداری را توصیف می‌کنند، فضای بسیار کمتری را نسبت به پیکسل‌ها و ویژگی‌های آنها اشغال می‌کنند.

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

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

   مشکلات نمایش گرافیک های برداری در شبکه جهانی وب به این دلیل به وجود آمد که روش نمایش دیگری غیر از رستر وجود نداشت و افزونه نمایش فایل ها با فرمت PDF انعطاف لازم را نداشت و نیاز به ذخیره همه مطالب در یک فرم - PDF داشت.

   برای اینکه گرافیک های برداری را بدون هیچ نرم افزار اضافی در قالب سنتی HTML جاسازی کنند، دو استاندارد برداری جدید در حال حاضر توسط کمیته استانداردهای W3C در دست بررسی هستند: PGML (زبان نشانه گذاری گرافیکی دقیق) و VML (زبان نشانه گذاری برداری برداری). PGML توسط Adobe Systems، IBM، Netscape و Sun Microsystems پشتیبانی می شود، در حالی که VML توسط Microsoft، Hewlett-Packard، Autodesk، Macromedia و Visio پشتیبانی می شود. هر دو استاندارد مبتنی بر برنامه های افزودنی زبان نشانه گذاری XML هستند که برای استفاده در وب به عنوان جانشین HTML ارتقا یافته و توسط W3C برای استفاده در آینده توصیه می شود.

   اما در حال حاضر، هیچ یک از مرورگرها از استانداردهای گرافیک برداری پشتیبانی نمی کنند، اگرچه پلاگین هایی در حال حاضر در دسترس هستند. امروزه در میان محبوب‌ترین روش‌های نمایش تصاویر وکتور ایستا در وب، می‌توان به فرمت SWF (Shockwave Flash) Macromedia و فرمت Xara Flare اشاره کرد.

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

   انیمیشن، تعامل و تعامل

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

   در ترکیب با جاوا یا جاوا اسکریپت، همچنین می توانید انیمیشن های تعاملی ایجاد کنید که به کاربر پاسخ دهد.

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

   Shockwave که در اصل به عنوان قالبی برای Macromedia Director ایجاد شد، خانواده ای از پروتکل ها است که عمدتاً با هدف تولید محتوای تعاملی و گرافیکی ایجاد شده به طور خاص برای استفاده در اینترنت ساخته شده است. و Shockwave Flash به طور کلی یک ابزار منحصر به فرد و یکی از بهترین ها است راه های بهتربرای ایجاد یک انیمیشن و انتشار آن در یک صفحه وب. Shockwave Flash فایل های بسیار کوچکی تولید می کند (زیرا از فرمت نمایش غالباً برداری استفاده می کند) و در مقایسه با سایر فرمت ها از نظر آماده سازی راحت ترین است.

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

   تصمیم نهایی با شماست

   بنابراین، نگرش به ارائه محتوای وب در حال تغییر است، قالب‌های داده جدید و ابزارهای توسعه پشتیبانی از آنها ظاهر می‌شوند. با این حال، فرمت های قدیمی (برای نمایش گرافیک ها GIF و JPEG هستند) هنوز هم بسیار محبوب هستند. آنها تقریباً توسط همه مرورگرها پشتیبانی می شوند و اکثر توسعه دهندگان تجربه کار با آنها را دارند. برای اطمینان از تعادل بین کیفیت تصویر و اندازه فایل مهم است که از فرمت صحیح برای برنامه خاص خود استفاده کنید. به عنوان مثال، یک تصویر GIF ممکن است فضای بیشتری را اشغال کند و نتیجه ای با کیفیت پایین تر از یک تصویر JPEG ایجاد کند، در حالی که عکس دیگر برعکس خواهد بود.

   با این حال، هنگام نمایش تصاویر بیت مپ، PNG ارجح تر می شود، و اگر از این هم فراتر بروید و سعی کنید از یک تصویر برداری استفاده کنید، فرمت Shockwave Flash از Macromedia در حال حاضر در خدمت شما است.

   فرمت SWF (Shockwave Flash) معمولاً مورد استفاده قرار نمی گیرد، بلکه فرمت برداری داخلی برنامه Macromedia Flash است (به "درس ها مراجعه کنید" ماکرومدیا فلش» بر روی CD-ROM)، بنابراین برای به دست آوردن تصویر یا انیمیشن خود، باید بسته چند رسانه ای مناسب را از Macromedia خریداری کنید و کاربر باید یک ماژول اضافی را برای تجسم نتیجه نصب کند. بنابراین، برای اینکه به سادگی یک نقاشی برداری را در صفحه وب خود قرار دهید، باید بر تعدادی از ناراحتی ها غلبه کنید.

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

   ComputerPress 5 "1999

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

   فرمت های فایل

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

   فرمت PNG-8

   PNG-8 (گرافیک شبکه قابل حمل، گرافیک شبکه قابل حمل) یک فرمت رایگان است که برای جایگزینی GIF ایجاد شده است که در آن برای مدت طولانیالگوریتم های اختصاصی استفاده شد.

   ویژگی های خاص

   • از یک پالت 8 بیتی (256 رنگ) در تصویر استفاده می کند که برای آن عدد هشت را در نام خود دریافت کرده است. در این مورد، می توانید انتخاب کنید که چند رنگ در فایل ذخیره شود - از 2 تا 256.
   • برخلاف GIF، انیمیشن را نمایش نمی دهد.

   منطقه برنامه

   فرمت PNG-24

   PNG-24 فرمتی شبیه PNG-8 است، اما از طیف رنگی 24 بیتی استفاده می کند. مشابه JPEG، روشنایی و رنگ رنگ ها را در عکس ها حفظ می کند. مانند GIF و PNG-8، جزئیات تصویر مانند هنر خط، لوگوها یا تصاویر را حفظ می کند.

   

   ویژگی های خاص

   • تقریباً از 16.7 میلیون رنگ در هر فایل استفاده می کند، به همین دلیل است که این فرمت برای تصاویر تمام رنگی استفاده می شود.
   • از شفافیت چند سطحی پشتیبانی می کند، این به شما امکان می دهد یک انتقال صاف از ناحیه شفاف تصویر به رنگ ایجاد کنید.
   • با توجه به این واقعیت که الگوریتم فشرده سازی استفاده شده همه رنگ ها و پیکسل های تصویر را بدون تغییر نگه می دارد، در مقایسه با فرمت های دیگر، PNG-24 بیشترین اندازه نهایی فایل گرافیکی را دارد.

   منطقه برنامه

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

   فرمت JPEG

   JPEG (گروه مشترک کارشناسان عکاسی) یک فرمت فایل تصویری محبوب است که به طور گسترده برای ایجاد وب سایت ها و ذخیره عکس ها استفاده می شود. JPEG از رنگ 24 بیتی پشتیبانی می کند و روشنایی و رنگ رنگ ها را در عکس ها بدون تغییر نگه می دارد. این فرمت فشرده سازی با اتلاف نامیده می شود زیرا الگوریتم JPEG به طور انتخابی داده ها را رد می کند. روش فشرده سازی می تواند باعث ایجاد اعوجاج در تصویر شود، به خصوص اگر حاوی متن، جزئیات ظریف یا لبه های تیز باشد. فرمت JPEG از شفافیت پشتیبانی نمی کند. هنگامی که عکسی را در این فرمت ذخیره می کنید، پیکسل های شفاف با رنگ مشخص شده پر می شوند.

   

   ویژگی های خاص

   • تعداد رنگ های تصویر تقریباً 16.7 میلیون رنگ است که برای حفظ کیفیت عکاسی تصویر کاملاً کافی است.
   • ویژگی اصلی فرمت "کیفیت" است که به شما امکان می دهد اندازه فایل نهایی را کنترل کنید. کیفیت از 0 تا 100 اندازه گیری می شود، هر چه مقدار بالاتر باشد، تصویر بهتر است، اما اندازه فایل نیز افزایش می یابد.
   • از فناوری به نام پیشرونده JPEG پشتیبانی می کند که در آن یک نسخه با وضوح پایین از یک تصویر قبل از بارگیری کامل خود تصویر در نمای ظاهر می شود.

   منطقه برنامه

   عمدتا برای عکس استفاده می شود. برای نقاشی های حاوی مناطق شفاف، جزئیات کوچک یا متن بسیار مناسب نیست.

   فرمت GIF

   GIF (فرمت تبادل گرافیکی) یک فرمت فایل گرافیکی است که به طور گسترده برای ایجاد تصاویر متحرک استفاده می شود. GIF از رنگ 8 بیتی استفاده می کند و به طور موثر مناطق رنگی ثابت را فشرده می کند و در عین حال جزئیات تصویر را حفظ می کند.

   

   ویژگی های خاص

   • تعداد رنگ های یک تصویر می تواند از 2 تا 256 باشد، اما می تواند هر رنگی از پالت 24 بیتی باشد. فایل GIF ممکن است دارای مناطق شفاف باشد. اگر پس زمینه ای غیر از سفید استفاده شود، از طریق "سوراخ" در تصویر نشان داده می شود.
   • از تغییر فریم به فریم تصاویر پشتیبانی می کند که این فرمت را برای ایجاد انیمیشن های ساده محبوب می کند.
   • از روش فشرده سازی بدون تلفات استفاده می کند

   منطقه برنامه

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

   فرمت SVG

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

   ویژگی های خاص

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

   منطقه برنامه

   متن، آرم، تصاویر با لبه های واضح.

   افزودن تصویر

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

   "alt="(!LANG:<альтернативный текст>!}">

   هر دو ویژگی src و alt مورد نیاز هستند.

   ویژگی src مسیر را مشخص می کند فایل گرافیکی، می توان از یک آدرس مطلق یا نسبی برای تعیین آن استفاده کرد. در مرحله بعد، چند مورد را در نظر بگیرید روش های مختلف، نحوه تعیین مسیر یک تصویر برای قرار دادن آن در یک صفحه وب. به عنوان مثال، فایلی به نام target.png را در نظر بگیرید که در پوشه images ریشه سایت ذخیره می شود.

   http://example.ru/images/target.png
   اگر آدرس با یک پروتکل (http:// یا https://) شروع شود، یک آدرس مطلق است. تصویر همیشه از آدرس اینترنتی مشخص شده دانلود می شود، حتی اگر صفحه وب در رایانه محلی ذخیره شود.

   //example.ru/images/target.png
   این آدرس مطلق تصویر بدون تعیین پروتکل است. مرورگر به طور مستقل پروتکل مورد نیازی را که سایت در حال اجرا است (http:// یا https://) جایگزین می کند. لطفاً توجه داشته باشید که این نوع آدرس ها در صفحات وب محلی کار نمی کنند، بلکه فقط در اینترنت تحت کنترل یک سرور وب کار می کنند.

   /images/target.png
   اگر در ابتدای آدرس یک اسلش (/) وجود داشته باشد، به این معنی است که پوشه تصاویر در ریشه سایت قرار دارد. ممکن است یک پوشه در پوشه دیگری تودرتو باشد، بنابراین مسیر ممکن است افزایش یابد. به عنوان مثال، /assets/images/target.png به این معنی است که پوشه assets در ریشه سایت قرار دارد، این پوشه حاوی پوشه images است که فایل target.png داخل آن قرار دارد.

   ../images/target.png
   دو اسلش رو به جلو (../) نشان می دهد که پوشه تصویر یک سطح بالاتر از سند HTML در ساختار پوشه قرار دارد. روی انجیر شکل 1 فایل source.html را نشان می دهد که تصویر target.png باید در آن درج شود.

   

   برنج. 1. قرار دادن فایل

   images/target.png
   نام پوشه بدون هیچ نقطه ای در ابتدای آدرس نشان می دهد که سند HTML و پوشه با تصویر در یک سطح هستند (شکل 2).

   

   برنج. 2. قرار دادن فایل

   target.png
   نام فایل واحد نشان می دهد که تصویر و صفحه وب در یک مکان قرار دارند (شکل 3).

   

   برنج. 3. قرار دادن فایل

   مثال 1 چندین روش برای افزودن یک تصویر به یک صفحه وب را نشان می دهد.

   مثال 1: افزودن تصاویر

   

   

   

   

   متن جایگزین

   متن جایگزین بخش مهمی از تصاویر است و برای افراد کم بینا در نظر گرفته شده است که نمی توانند تصاویر را ببینند و با استفاده از شنوایی خود اطلاعاتی را از سایت دریافت کنند. صفحه خوان های ویژه متنی را از سایت می خوانند و به جای تصاویر، متن نوشته شده با ویژگی alt را تلفظ می کنند. در مرورگرهای معمولی، محتوای alt تنها زمانی نشان داده می شود که تصاویر به دلایلی در صفحه وب نمایش داده نمی شوند.

   ویژگی alt باید محتوای تصویر را توصیف کند، و اگر تصویر عملکرد تزئینی دارد و معنای معنی‌داری ندارد، alt را خالی بگذارید (مثال 2).

   مثال 2: استفاده از alt

   

   

   اگر تصاویر به یک نشانه قابل مشاهده نیاز دارند، باید از ویژگی عنوان جهانی استفاده کنید، که می تواند به هر عنصری اضافه شود، نه فقط تصاویر. هنگامی که ماوس را روی تصویر نگه می دارید، متنی حاوی مقدار ویژگی عنوان ظاهر می شود (مثال 3).

   مثال 3: استفاده از عنوان

   

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

   

   برنج. 2. نوع راهنمای ابزار

   تغییر اندازه یک عکس

   برای تغییر اندازه تصویر یک عنصر ویژگی های عرض (عرض) و ارتفاع (ارتفاع) ارائه شده است. پیکسل یا درصد به عنوان مقدار استفاده می شود. مثال 4 نحوه افزودن این ویژگی ها را نشان می دهد .

   مثال 4. ترسیم ابعاد

   

   
   

   ویژگی های عرض و ارتفاع اختیاری هستند، پس از بارگذاری تصویر، مرورگر به طور خودکار اندازه اصلی آن را تنظیم می کند. اساساً این ویژگی ها برای اهداف زیر استفاده می شوند:

   • جایی برای عکس رزرو کنید؛
   • کاهش اندازه عکس های بزرگ؛
   • بهبود کیفیت تصویر برای نمایشگرهای رتینا

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

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

   نمایشگرهای رتینا تراکم پیکسلی و جزئیات تصویر بالایی دارند، بنابراین تصاویر معمولی کمی تمیز به نظر می رسند. برای بهبود کیفیت، اندازه تصاویر دو برابر شده است. به عنوان مثال، اگر یک صفحه وب نیاز به عکسی با عرض 400 پیکسل داشته باشد، عکسی با عرض 800 پیکسل می گیریم، اما عرض 400 پیکسل را در مقدار ویژگی width باقی می گذاریم.

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

   

   با توجه به اینکه ما به طور مستقل عرض و ارتفاع تصویر را جایگزین می کنیم، می توانیم عمداً با کشش تصویر به صورت عمودی یا افقی نسبت های آن را تغییر دهیم.

   

   علاوه بر پیکسل، درصدها را می توان به عنوان اندازه استفاده کرد. در این مورد، عرض نسبت به عنصر والد است.

   

   در چنین مواردی قد مشکلاتی وجود دارد، زیرا ارتفاع تصویر به صورت درصد تنها زمانی در نظر گرفته می شود که قد والد آن به صراحت تعریف شده باشد. اگر ارتفاع عنصر والد به هیچ وجه مشخص نشده باشد، ورودی مانند height="100%" نادیده گرفته می شود.

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

   فرمت های فایل های گرافیکی که توسط اکثر مرورگرهای وب محبوب پشتیبانی می شوند عبارتند از: فرمت تبادل گرافیکی (GIF)، گروه مشترک متخصصان عکاسی (JPEG)، گرافیک شبکه قابل حمل (PNG) و گرافیک برداری. برخی از ویژگی های فایل های گرافیکی:

   • شفافیت - این ویژگی اجازه می دهد تا تصویر در درجات مختلف شفافیت از حالت جامد تا کاملا شفاف باشد.
   • فشرده سازی - این ویژگی به یک تصویر اجازه می دهد تا در یک فایل بسیار کوچکتر ذخیره شود، با استفاده از الگوریتم های ریاضی برای استفاده از گروهی از پیکسل ها به عنوان یک عنصر واحد.
   • بافت - اجازه می دهد تا تصویر ابتدا روی خطوط فرد و سپس روی خطوط زوج بارگذاری شود. این به بازدید کننده اجازه می دهد تا تصویر را زودتر ببیند.
   • انیمیشن - ظاهر حرکت را از طریق یک سری عکس های متوالی ایجاد می کند. GIF متحرک نیازی به افزونه مرورگر ندارد و تقریباً روی همه دستگاه‌ها کار می‌کند.
   • بارگذاری پیشرونده شبیه بافندگی است زیرا فقط بخشی از تصویر را در ابتدا بارگذاری می کند، اما نه بر اساس خطوط متناوب.

   GIF در سال 1980 تاسیس شد و در اوایل دهه 1990 توسط طراحان وب به عنوان اصلی ترین مورد استفاده شد. فرمت گرافیکیبرای صفحات وب فایل‌های GIF از یک الگوریتم فشرده‌سازی استفاده می‌کنند که اندازه فایل را برای بارگذاری سریع کوچک نگه می‌دارد. GIF به 256 رنگ (8 بیت) محدود شده است، از شفافیت و گرافیک های درهم آمیخته پشتیبانی می کند. همچنین با استفاده از این فرمت می توان گرافیک متحرک ایجاد کرد. همه مرورگرها می توانند فایل های GIF را بدون مشکل نمایش دهند.

   مزایای GIF:

   • اکثر فرمت های گرافیکی پشتیبانی شده
   • نمودارها در این قالب بهتر به نظر می رسند
   • پشتیبانی از شفافیت

   فایل‌ها فشرده هستند اما از "رنگ‌های واقعی" (24 بیت) پشتیبانی می‌کنند و برای عکس‌هایی که کیفیت بسیار مهم است، فرمت ترجیحی هستند. JPEG از فرمت پیش رونده پشتیبانی می کند که به شما امکان می دهد تقریباً بلافاصله تصویر را مشاهده کنید که پس از اتمام دانلود کیفیت آن بهبود می یابد.

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

   مزایای JPEG:

   • فشرده سازی بیشتر به معنای سرعت دانلود سریعتر است.
   • کیفیت عالی برای عکس ها و نقاشی های پیچیده تولید می کند.
   • پشتیبانی از رنگ 24 بیتی

   PNG یک فرمت نسبتا جدید است که به عنوان جایگزینی برای فایل های GIF معرفی شده است. PNG تا 24 بیت رنگ، شفافیت، بافت را پشتیبانی می کند و می تواند حاوی یک شورت باشد توضیحات متنتصویر مورد استفاده در موتورهای جستجو

   مزایای PNG:

   • بر محدودیت های رنگی 8 بیتی GIF غلبه می کند
   • به شرح متنی تصاویر برای موتورهای جستجو اجازه می دهد
   • از شفافیت پشتیبانی می کند
   • شماتیک ها بهتر از JPEG به نظر می رسند

   گرافیک برداری

   بیشتر گرافیک های وب، نقشه های بیتی یا نقشه هایی هستند که از شبکه ای از پیکسل های رنگی تشکیل شده اند. تصاویر باید در گرافیک برداری ایجاد شوند، که شامل یک توصیف ریاضی از هر عنصر است که شکل خطوط و رنگ های تصویر را تشکیل می دهد. گرافیک های برداری با استفاده از برنامه هایی مانند Adobe Illustratorیا کورل دراو. گرافیک های برداری باید به هر فرمت GIF، JPEG یا PNG برای استفاده در صفحات وب تبدیل شوند.

   از چه فرمتی باید استفاده کرد؟

   یک طراح وب می تواند فرمت GIF یا JPEG را برای اکثر موارد استفاده کند. اما، از آنجایی که فایل‌های GIF در مقایسه با اندازه فایل‌های JPEG کوچک هستند، اکثر طراحان وب از فرمت GIF برای پس‌زمینه، جعبه‌ها، قاب‌ها و هر گرافیک دیگری که با رنگ‌های ۸ بیتی عالی به نظر می‌رسد، استفاده می‌کنند.

   اکثر طراحان فرمت JPEG را برای عکس ها و تصاویری که فشرده سازی کیفیت بصری تصویر را به خطر نمی اندازد انتخاب می کنند.