може съдържа
Изображенията, използвани на уеб страница, обикновено се създават от графичен дизайнер или уеб дизайнер, за които качеството е основна грижа (защото това е стандартът, по който те обикновено се оценяват). Ето защо не е изненадващо, че оптимизация на изображението често се пренебрегва. Можем да намалим теглото на изображението с 10KB или 20KB без видима загуба на качество. Размерът на изображенията е фактор, който пряко влияе върху скорост на зареждане на уеб страница, или това, което е същото, това е фактор за позициониране.
Ако графичните дизайнери могат да бъдат виновни за тунелната визия в това отношение, трябва да внимавате да не попаднете в същия капан. Въпреки че размерът е основната ни грижа и загубата на качество вероятно е приемлива, ние трябва да устоим на изкушението да преоптимизираме.

РАЗБИРАНЕ НА РАЗЛИЧНОТО
ФОРМАТИ ЗА ИЗОБРАЖЕНИЕ
Дълго време в мрежата се използваха основно два формата изображения: JPEG и GIF.
Jpeg (което е съкращение от Съвместна фотографска експертна група) се използва за снимки и GIF (съкращение от Графичен формат за обмен) се използва за компютърно генерирани изображения като икони.
Методът на компресия се появява в средата на 90-те години Lempel-Ziv Welch (LZW) използван от GIF и е патентован. През 1996 г. беше публикувана първата спецификация на нов формат: PNG (съкращение от Преносима мрежова графика). По-късно същата година това стана препоръка от Консорциум за световна мрежа (W3C), с подкрепата на основните браузъри до края на това десетилетие. Въпреки че патентът на LZW изтече през 2003 г., PNG се оказа отличен формат и GIF така и не бе възстановен напълно.
Въпреки че функциите на JPEG и GIF са добре дефинирани, целта на PNG е неточна. Форматът PNG може да се използва като заместител на JPEG и GIF.

Ще прегледаме тези три формата.

Jpeg
JPEG е метод за компресиране със загуби (има режим без загуби, но не се поддържа широко) и е подходящ за фотографски изображения, които обикновено имат много различни цветове и градиенти. При JPEG има връзка между размера на файла и качеството на изображението, но дори и при най-ниското ниво на компресия (т.е. най-големият размер на файла), JPEG изображенията все още са значително по-малки от тези в обикновени формати. Загуба като TIFF (което означава Tagged Image File Формат).
JPEG нивата на компресия са посочени като процент (където 0 процента е най-малкият размер на файла, но най-ниското качество и 100 процента е най-доброто качество, но най-големият размер). Стойност от приблизително 60 до 80 процента обикновено се счита за добра средна точка за уеб изображения.

GIF
GIF съществува от 1987 г. и често се използва за лога, спрайтове и графики.
GIF изображенията използват цветна таблица (известна още като палитра), която може да съдържа до 256 цвята. След това всеки пиксел в GIF изображението се заменя с число, което представя кой от тези цветове съдържа. Очевидното ограничение тук е, че GIF може да съдържа най-много 256 цвята. Но изненадващо, това често е достатъчно, особено след като цветната таблица не е предварително дефинирана и е картографирана от цветовете, използвани в изображението (изображението може да съдържа 256 нюанса на червено, например).
Също така е интересно да се отбележи, че GIF компресията се основава на LWZ, преработена версия на алгоритъма LZ78, която се използва в gzip и deflate.
Тъй като компресията се извършва в хоризонтални редове (отляво надясно), изображенията, които съдържат хоризонтален цветен градиент, компресират по-лошо от тези с вертикален градиент.

PNG
PNG е формат без загуби, който е предназначен да замени GIF. PNG използва алгоритъма за дефлация (който от своя страна използва LZ77, който е подобен на LWZ).
PNG поддържа RGB и RGBA (RGB с алфа канал) палитра и изображения без палитра. Различните палитри често се наричат ​​PNG8 (за PNG), PNG24 (за RGB) и PNG32 (за RGBA). Цифрите се отнасят до броя на битовете на пиксел.

  • PNG8 е най-подобен на GIF. Използвайте 8-битова цветова палитра (т.е. 256). В повечето случаи превъзхожда GIF.
  • Режимът RGB (PNG24) също се използва понякога като алтернатива на JPEG без загуби, въпреки че големият размер на файла го прави често използван в мрежата.
  • PNG32 е подобен на RGB режим, но включва алфа канал. Въпреки че този режим не се използва широко, има определени ситуации, при които той е единственият жизнеспособен формат. За изображение с много цветови градиенти, които също изискват прозрачност, нито JPEG, GIF, нито PNG8 са идеални (тъй като JPEG няма подкрепа за прозрачност, докато GIF и PNG8 имат ограничена дълбочина на цветовете). PNG32 се справя добре с тези изображения, но размерът му няма да е малък.

Въпреки че PNG съществува от края на 90-те години, Internet Explorer има множество недостатъци в подкрепата си за този формат, особено за PNG32. Например IE 6.0 и по-ранните версии не успяват да разрешат правилно алфа прозрачността, докато IE 7.0 има проблеми, когато прозрачността се използва върху полупрозрачни HTML елементи. (Вижте: http://support.microsoft.com/kb/265221)

SGV
Обсъдените по-горе формати на изображения вършат цялата работа около подобни принципи: върху цветната информация на всеки пиксел в изображението. Това, което се различава, е начинът на кодиране на тази информация.
Scalable Vector Graphics (SVG) използва съвсем различен подход, използвайки XML, за да опише изображение по отношение на геометрични фигури. Ако някога сте рисували на любимия си език за програмиране, вие сте запознати с идеята да посочите размерите на полигоните, да зададете цвят на запълване, наслагване на текст и т.н. Това е съдържанието на прост SVG файл: