SVG, PNG и JPG формати на изображения: плюсове и минуси. PNG изображение - как да отворите, редактирате и конвертирате файла Научете повече png

PNG (преносима мрежова графика), произнася се "пинг", е формат за съхранение на растерна графика, който използва компресия без загуби. PNG е създаден, за да подобри и замени GIF формата с графичен формат, който не изисква лиценз за използване. PNG е международен стандарт (ISO IEC 15948:2003) и е официално препоръчан от W3C.

магазини във формат PNG графична информацияв компресиран вид. Освен това тази компресия се извършва без „загуби“, за разлика например от стандартния JPEG (дори с максималния високо нивокачество).

PNG форматът е предназначен да замени по-стария и по-опростен GIF формат и до известна степен да замени много по-сложния TIFF формат.

Ако говорим за уеб дизайн, то в сравнение с GIF той има следните основни предимства:

Подобрена компресия: В повечето случаи размерът PNG изображенияпо-малко от същото във формат GIF.
- Повече цветове в изображението: Почти неограничен брой цветове в изображението, докато ограничението за GIF е 256.
- Допълнителна поддръжка на алфа канал: Докато GIF поддържа само двоична прозрачност, PGN ви позволява да постигнете неограничен брой ефекти на прозрачност чрез поддръжка на алфа канал.

Като недостатък си струва да се отбележи, разбира се, липсата на поддръжка за анимация, като GIF. Въпреки че, разбира се, има подобен стандарт за анимация, наречен Multiple-image Network Graphics (MNG), той не е широко разпространен и съответно не се поддържа широко от съвременните браузъри.

PNG (Portable Network Graphics) е графичен формат от растерен тип, съдържащ 8-битова цветова палитра. Алгоритъмът за компресиране на Deflate, разработен за PNG файлове, намалява размера на запазеното изображение, без да губи качеството на крайното изображение.

В тази статия ще научите също как да отворите PNG файл.

PNG е вторият най-популярен интернет формат след JPG.

Сред другите предимства си струва да се отбележи:

• преплетено оформление;
• вградена софтуерна корекция на цветовата палитра и гама.

Последното ви позволява да вградите всички необходими параметри на дисплея в изображението, така че да изглежда по начина, по който авторът е предвидил на всички екрани.

Форматът има 2 версии:

• PNG-8 (цветовата схема на индекса е подобна на тази на GIF);
• PNG-24 (пълна и пълна цветова палитра, симулираща JPEG).

През 1995 г., в ерата на развитието на безплатния интернет, внезапно възникна въпросът за патентования характер на сложния GIF формат. Необходим е също толкова надежден, но безплатен и безплатен формат за обмен на графични данни световната мрежа. По това време международният консорциум W3C представи спецификациите PNG 1.0, одобрени още през 1996 г.

Форматът е създаден като алтернатива на GIF. Последният беше „затворен“ до 2004 г., т.е. имаше редица ограничения за безплатно използване (изисква се авторско право на собственика при запазване, патентни лицензи при публикуване). PNG беше лишен от такива недостатъци, като същевременно внедри поддръжка за дълбочина на цвета до 48 бита и 8-битов алфа канал за предаване на изображение.

Разработчиците успяха да създадат гладка прозрачност на цветовете, която е невъзможна в GIF. В последния палитрата е ограничена до 8-битов канал (256 цвята) и поддържа само пълна прозрачност.

Днес графичният формат може лесно да се показва в интернет браузър и стандартни средстваза преглед на графики. Казано по-подробно, картината е следната: всяка ОС има свои собствени инструменти за работа с формата. Нека да разгледаме по-отблизо как да отворите PNG формата.

За да разглеждате файлове в интернет, използвайте следния софтуер:

операционна система Семейство Windowsотворете PNG формата по следния начин:

• преглед на снимки;
• MS Paint;
• уеб браузър (само преглед).

Мобилната ОС има следните характеристики:

Мобилната котка за Apple работи с PNG файлове, използвайки такъв софтуер.

Когато става въпрос за създаване на изображения за уеб и други цифрови цели, кои файлови формати ще ви дадат най-добри резултати? Трябва да мислите за скорост спрямо качество и размер на изображението. И така, трябва ли да използвате SVG, PNG или JPG?

Имаше време, когато просто използвахте JPG, за да поберете пространството при 72 dpi, и продължавахте напред. Вече не. Екрани с с висока резолюция, множество прозорци за изглед и необходимостта от бърз уебсайт направиха целия процес много по-сложен. Нека да разгледаме плюсовете и минусите на всеки от тези формати!

SVG, или мащабируема векторна графика, както означава, е невероятно практичен. Ето защо дизайнерите използват този форматпо-често.

Тъй като SVG е векторен формат, той изглежда страхотно при всякакъв размер и работи за почти всеки тип изображение, с изключение на фотографията.

SVG е формат без загуби, което означава, че не губи никакви данни при компресиране, показва неограничен брой цветове и най-често се използва за графики и лога в мрежата, както и за проекти, които ще се гледат на Retina и други екрани с висока разделителна способност.

Плюсове на SVG

• Векторният формат се показва добре във всеки размер
• Възможност за създаване на прости SVG изобразявания в код или текстов редактор
• Проектирайте и експортирайте сложни графики от Adobe Illustratorили Скица
• Наличен SVG текст
• SVG е лесен за стилизиране и писане
• SVG форматите се поддържат от съвременните браузъри и са подходящи за бъдещето
• Форматът е много компресируем и лек
• Добър за търсене поради текстовия формат
• Поддръжка за прозрачност
• Позволява ви да запазвате неподвижни или анимирани изображения

Минуси на SVG

• SVG дизайнът може да се усложни
• Не се показва в някои стари браузъри
• Ограничена поддръжка за имейл клиенти

PNG или Portable Network Graphics е формат, предназначен за мрежата, който предлага това, което JPG не може - прозрачност. Ето защо PNG е толкова популярен за изтегляне на елементи като лога за дизайн на уебсайтове.

Има два вида PNG - PNG-8 и PNG-24. PNG-8 използва по-ограничена цветова палитра само с 256 цвята, има малко по-добра прозрачност и експортира към не голям размер. PNG-24 използва неограничена цветова палитра, поддържа прозрачност, но се експортира в голям размер. И двата вида PNG имат компресия без загуби.

Въпреки че PNG форматите са подобни на GIF, те не поддържат анимация. Този формат най-често се използва за икони, малки неподвижни изображения или всяко изображение, което се нуждае от прозрачност.

Плюсове на PNG

• Поддръжка за прозрачност
• Подходящ за изображения с текст
• PNG форматите показват добре лога
• Включва вградено текстово описание за търсачките
• PNG-8 има малък размер на файла и е най-лекият
• Експортирайте без назъбени ръбове

Минуси на PNG

• Размерите на файловете растат бързо за големи файлове като изображения
• Някои са стари имейл клиентиимат проблеми с визуализирането им
• Без анимация
• PNG-24 файловете могат да бъдат големи, което не е идеално за споделяне в интернет

JPG или JPEG е може би най-известният формат за изображения. Това е опцията по подразбиране за повечето изображения, защото е удобна за снимки благодарение на практически неограничения цветен дисплей.

JPG също така предлага опцията да изберете колко да бъде компресирано изображението, от 0% (силно компресиран) до 100% (без компресия). Повечето дизайнери избират нещо в диапазона от 60 до 70 процента. Изображенията все още изглеждат добре при това ниво на компресия, но размерите на файловете са значително по-малки.

JPG използва компресия със загуби и не поддържа оригиналните данни по време на компресията. Всеки път, когато снимка се запазва отново и се експортира в JPG формат, става по-лошо.

Форматът JPG най-често се използва за изображения, снимки и всичко, което има голям брой цветове.

Плюсове на JPEG

• Страхотен за многоцветни и фотография
• Лесно намаляване на размера на файла
• Показва се последователно в имейл клиенти

Минуси на JPEG

• Никаква прозрачност
• Създава назъбени ръбове за текст
• Без анимация
• Формат със загуба
• Метаданните за автоматично търсене не трябва да съдържат алтернативна информация

Сега, след като знаете какви са някои от разликите между SVG, PNG и JPG, кой трябва да използвате?

Можете да си зададете следните няколко въпроса, за да отговорите на това.

Имате ли нужда от векторен или растерен формат?

Вектор: SVG

Растер: JPG или PNG

Имате ли нужда от прозрачност?

Да: SVG или PNG

Използвате ли многоцветно изображение?

Да: JPG или PNG

Това голяма снимка ли е?

Изображението съдържа ли текст?

Важна ли е за вас компресията без загуби?

Да: SVG или PNG

Трябва ли да актуализирам и преконфигурирам графиката?

Не: PNG или JPG

Използвате ли анимация?

№: JPG или PNG

И трите графични формата - SVG, PNG и JPG - имат практични и широко приложение. Въпреки че SVG е най-новия формати често могат да бъдат запазени до най-малкия размер на файла, това не винаги е най-добрият вариант.

Помислете как използвате изображения във вашия проект, как избирате типа файл, за да намерите този, който ще работи най-добре за това, което се опитвате да постигнете. Може дори да откриете, че някои проекти съдържат изображения, които използват и трите типа файлове. Това всъщност се случва доста често!

Успешна работа и творчество на всички!

Освен това, тъй като е безплатен формат, PNG предлага различни практически предимства пред GIF за уеб дизайнера:

• По-добро компресиране: За повечето изображения PNG постига по-малък размер на файла от GIF
• По-голяма дълбочина на цвета: PNG предлага истински цвят до 48 бита, докато в GIF имаме само 256 цветова палитра
• Прозрачност на алфа канал: Когато GIF предлага само двоична прозрачност, PNG позволява практически неограничени ефекти на прозрачност, като предлага алфа канал за прозрачност

Струва си да се отбележи, че PNG не позволява анимация като GIF. Но има стандарт за мрежова графика с множество изображения (MNG), който позволява това, но не се поддържа толкова широко от уеб браузъри и графични редактори.

Вероятно се чудите защо PNG не е толкова широко използван формат в мрежата, ако е толкова добър, колкото се рекламира. Отговорът е до голяма степен погрешно схващане относно формата и поддръжката на браузъра за него.

Защото Internet Explorer 6 или повече ранни версиине поддържат пълния набор от функции на PNG (включително прозрачност на алфа канал), хората са оставени да вярват (въпреки че това е неправилно), че Internet Explorer изобщо не поддържа PNG или поне не поддържа прозрачност. Всъщност Internet Explorer 5 и 6 поддържат достатъчно PNG спецификации, за да го направят функционално еквивалентен (или по-добър) на неанимирани GIF изображения. Всички други споменати браузъри, включително Firefox, Netscape 6 и по-нови, Mozilla, Opera 6 и по-нови, Safari и Camino напълно поддържат PNG прозрачност.

Освен това погрешно схващане за вградената поддръжка на браузъра GIF анимациябеше (и продължава да бъде) основната причина за неговия успех. Въпреки че с годините използването на GIF става все по-малко популярно в сравнение с други технологии (например Flash), които стават все по-подходящи за анимация.

Прозрачност - ключова характеристика GIF и PNG, което често е причината уеб дизайнерът да избере формат, който да използва. Въпреки че PNG предлага по-изчерпателна поддръжка за прозрачност, уеб дизайнерите често трябва да създадат GIF версия на изображения, за да пасват на по-стари браузъри. С помощта на CSS това е възможно (и донякъде тривиално) чрез изпращане на GIF изображения за по-стари браузъри и висококачествени PNG изображения до браузъри, които ги разбират. Но това е двойна работа за един уеб дизайнер и в резултат на това хората следват пътя на най-малкото съпротивление и продължават да използват GIF изображения.

И така, разгледахме няколко причини, поради които GIF все още е толкова популярен, но повечето от тях се основават на неразбиране на концепциите или използване на познат работен процес. Въоръжени с някои ключови познания за PNG и как може да се използва надеждно в браузъри, можете да се възползвате от всички предимства, които може да предложи.

JPEG е друг повсеместен уеб формат и в повечето случаи, като например снимки (и други подобни), той е дори по-добър от PNG или GIF. PNG не е предназначен да се конкурира с JPEG. JPEG компресията създава значително по-малки файлове от PNG при работа със снимки. От друга страна, PNG създава по-малки файлове, когато в изображенията има текст, артистични линии, лога, „плоски“ цветове и т.н.

Сега нека да разгледаме как да използваме PNG в уеб дизайна. Събрах всички файлове за всеки пример в отделна папка, достъпна при приятели на ED.

През последните няколко години градиентът - плавен преходмежду два или повече цвята се превърна в най-добрия приятел на уеб дизайнера. Особено популярни са фините, фини градиентни запълвания, които, без да се набиват на очи, създават усещане за дълбочина и текстура.
Понякога GIF е най-добрият избор за градиент. Ако градиентът е обикновен двуцветен преход, GIF работи безупречно в него. Въпреки това, ограничението на GIF само до 256 цвята често създава забележими и небрежни „ивици“ сред по-сложни градиентни преходи. JPEG, от друга страна, може да изведе някои доста чисти градиенти, но често с цената на по-голям размер на файла. Докато JPEG градиентите обикновено са доста добри, трябва да запомните, че JPEG използва компресия със загуби, което означава, че полученото изображение никога няма да достигне качеството на некомпресираното изображение.

Въпросният типичен фонов градиентен стил се използва за бутони, блокове или просто навсякъде другаде. Може да изглежда като Фигура 5-1. По посока на часовниковата стрелка от горния ляв ъгъл виждаме оригиналното (некомпресирано) изображение, GIF версия, PNG версия и JPEG. Можете да видите, че полученият PNG е с най-малкия размер (515 байта). Това е четири пъти по-малко от GIF изображение. JPEG е малко по-голям от PNG с 637 байта и също е с по-ниско качество поради компресия със загуби (въпреки че човешкото око не може да открие разликата в качеството в това прост примеростава под въпрос).

Фигура 5-1
Панел на Photoshop - Запази замрежа,
показващи разлики в размера на файла за едно и също изображение в различни формати

Понякога трябва да създадете изображение, което работи еднакво върху различни субстрати. Някои често срещани примери са лога и икони. GIF файловете традиционно доминират в тези ситуации, но има няколко причини, поради които PNG може да е повече най-добър изборв тази ситуация. PNG обикновено печели по отношение на размера на файла за лога или някакво друго просто "изкуство". В допълнение, присъщата прозрачност на PNG прави просто създаванеединични файлове, които работят върху всеки фон. PNG предлага двоична прозрачност като GIF, но също така предоставя много по-желаната опция за алфа канал, в който пикселите могат да бъдат частично прозрачни, вместо просто да бъдат включени или изключени. Използването на последното увеличава размера на файла, понякога дори по-голям от GIF с двоична прозрачност, но позволява антиалиасинг по краищата на вашето изображение и го прави по-елегантно да го поставите върху фона.

Въпреки това преработих концепцията им, използвайки бяло изображение със символи на шаблон. Те използваха белия символ на прозрачен фон, което като цяло може да бъде доста ефективно. В този случай цветът на вашия CSS фон ще се появи в квадратна или правоъгълна област около символа, вместо самия символ.

И Дан, и Пи Джей използваха прозрачен GIF вместо PNG. Това напълно покрива техните нужди и те трябваше да създадат пикселни изображения, които да съответстват на стила на иконите. Използвайки PNG, можете да постигнете подобна техника, но с някои предимства под формата на анти-алиасинг и частична прозрачност за използване в по-подробни икони.

Знам какво си мислите: цялата тази PNG прозрачност изглежда добре, но практично ли е?

Добрата новина е, че всички съвременни браузъри поддържат напълно PNG изображения, включително прозрачност на алфа канал, ползите от която показах в примерите. Safari (всички версии), Firefox (всички версии), Opera (версии 6 и по-нови), Netscape (версии 6 и по-нови) и Mozilla (всички версии) ще направят всичко, което поискам от тях. Но има една лоша новина - единственият браузър, който все още не съм споменал и който повечето от вашите потребители имат: Internet Explorer.

Internet Explorer 6 и по-стари версии не поддържат прозрачността на алфа канала, вградена във формата PNG. Откакто изборът (или липсата на избор) на браузъра е направен за повечето от многото уеб сърфисти, тази зейнала дупка държи уеб дизайнерите далеч от PNG. Но с пускането на Internet Explorer 7 получихме пълна алфа поддръжка PNG прозрачноствъв всички основни браузъри. Какво следва, има ли някакви начини за работа с PNG алфа прозрачност в Internet Explorer 6 и по-нови версии? Така че, ако искате да използвате този ефект, нищо няма да ви спре. Internet Explorer 6 и по-ранните му версии изискват повече внимание от необходимото, но определено е възможно.

Internet Explorer се предлага с различни собствени филтри. Те се използват в CSS, но не са част от официалната CSS спецификация. С други думи, те не са стандартизирани в мрежата. За съжаление, Internet Explorer 6 и по-ниски не поддържат напълно PNG формата (който се препоръчва от W3C), но Microsoft има филтър, който елиминира този недостатък: AlphaImageLoader.

Според раздел на официалния уебсайт на Microsoft, AlphaImageLoader "показва изображение в границите на обект и между фона на обекта и неговото съдържание." С други думи, AlphaImageLoader зарежда PNG изображение с пълната му прозрачност, но го зарежда като свой собствен слой, под който е съдържанието на обекта, върху който е приложено. PNG изображенията, заредени по този начин, действат повече като фонови изображения, отколкото изображения на преден план (въпреки че те всъщност „седят“ върху фона на обекта).

По принцип можете просто да приложите AlphaImageLoader в CSS върху img елементи и да се насладите на резултата. Изображението ще бъде заредено първо, прозрачността ще остане, но след това изображението ще бъде заредено отново - като предното съдържание на обекта - с непрозрачни области (по този начин "засенчвайки" вашата прозрачна версия).

Не можете да използвате прозрачен PNG като фон CSS изображениеза (X)HTML елемент (да речем за ) и очаквайте AlphaImageLoader да свърши правилно работата в Internet Explorer. Не забравяйте, че AlphaImageLoader вмъква вашето изображение между фона и предния план на обекта. Така че, макар да зарежда вашето изображение в цялата му прозрачна слава, то също така ще продължи да го зарежда като CSS фоново изображение и без вашите прекрасни полупрозрачни пиксели.

Нека се върнем към един от предишните примери и се опитаме да го заредим правилно в Internet Explorer. Помните ли Канал 49, телевизионната станция в Топека? Сигурен съм, че да. Фигура 5-21 показва как изглежда сайтът в Internet Explorer 6.

Фигура 5-21
Заглавието 49abcnews.com, изобразено в Internet Explorer 6 за Windows, с непокътната PNG прозрачност.

HTML за горната част за времето изглежда така, както може би вече сте се досетили:

В момента в Топека, Канзас:
82° Облачно
Получете прогнозата и още...

Виждате изображение и определено е PNG; дори Internet Explorer го зарежда безупречно. Тайната съставка за това е JavaScript. Всъщност използвах малко DOM скриптове, за да премахна img елемента в движение и да го заменя с div елемент, който - познахте - използва AlphaImageLoader. JavaScript е описан в условни коментари, друг удобен, но напълно нестандартизиран идиом от Microsoft, вграден в Internet Explorer. Условните коментари ви позволяват да използвате код само за предварително известни Интернет версииИзследовател. Кодът се игнорира от всички други браузъри, така че не ги засяга по никакъв начин. В елемента на сайта www.49abcnews.com ще намерите:

Благодарение на първия ред, ако lte IE6, този скрипт ще бъде включен в изобразения документ само ако е показан във версия на Internet Explorer, по-малка или равна на (това се обозначава с lte) 6. Всички други браузъри, включително новопоявилият се Internet Explorer 7 напълно ще игнорира това .

И така, какво има във файла JavaScript fixWeatherPng.js? Нека да разгледаме:

Window.attachEvent("onload", fixWeatherPng); функция fixWeatherPng() ( var img = document.getElementById("weatherImage"); var src = img.src; img.style.visibility = "hidden"; var div = document.createElement("DIV"); div.style. filter = "progid:DXImageTransform.Microsoft. AlphaImageLoader(+ src + "", sizing="scale")"; // Някои специфични за 49abcnews.com CSS стилове са пропуснати за краткост. img.replaceNode(div); )

Нека анализираме стъпка по стъпка какво прави скриптът. Първо казваме на браузъра, че искаме да изпълним функцията fixWeatherPng, когато страницата се зареди. Останалата част от скрипта е самата функция.

Нека започнем, първо търсим изображението, с което ще работим, по неговия id атрибут и го запазваме в променливата img. Записваме атрибута src (URL към файла с изображение) в променливата src. След това скриваме img елемента чрез излагане CSS свойствовидимост към скрити.

В резултат на това заменяме оригиналния img елемент (който е скрит) с новосъздаден div елемент, към който AlphaImageLoader е успешно прикачен.

Използването на DOM скриптове за вмъкване на вашия AlphaImageLoader - филтриране на битове в движение - има своя грозен, но необходим недостатък - неправилен CSS. Освен това извън вашето (X)HTML маркиране ще има несемантични div елементи. И докато всичко това е описано в условни коментари, няма шанс други браузъри да бъдат повредени от кода на Microsoft. (handyblogger: Тук Джеф се опитва фино да посочи „тромавото“ решение на Microsoft)

Ако трябва да направите нещо неправилно, поне можете да го извлечете и да го държите отделно от всичко останало, където не е необходимо.

PNG, като графичен формат, предлага много технически предимства извън тези, които обикновено се използват в GIF. Всъщност предимствата са толкова големи, че PNG отдавна можеше да заеме доминираща позиция като графичен формат без снимки. Липсата на поддръжка на Internet Explorer за някои от по-значимите характеристики на PNG, като прозрачност на алфа канал, в резултат възпира много уеб разработчици. Но има две много добри причини, поради които не трябва да се страхувате от PNG.

Първо: дори Internet Explorer 6 и по-ранните му версии почти напълно поддържат PNG по начин, по който GIF може (с изключение на анимацията, разбира се). PNG почти винаги създава по-малки файлове, което им позволява да се зареждат по-бързо и да използват по-малко ресурси.

Второ: Internet Explorer 7 предлага пълна поддръжка за PNG алфа прозрачност. Ефектите, които могат да бъдат постигнати с пълната гама от полупрозрачни опции, са практически неограничени. Очаквам, че за дизайнерите, които намерят интересни начини за използване на PNG прозрачност като описаните в тази статия, вратата ще бъде отворена към ново ниво на стилове, невиждани досега. Дадох ви някои полезни идеи какво можете да създадете с PNG прозрачност, но не спирайте дотук. Потърсете себе си!

Извадка от Web Standards Creativity от Камерън Адамс, Марк Бултън, Анди Кларк, Саймън Колисън, Джеф Крофт, Итън Маркот, Дерек Федърстоун, Иън Лойд, Дан Рубин и Роб Уайчерт; публикувано от приятели на ED. Авторско право Jeff Croft 2007. Използва се с разрешение на Apress, Inc.