Кога да ги користите JPG, GIF, PNG и SVG формати за вашите веб-слики

Постојат голем број на формати на слики кои можат да се користат на веб-страници. Некои општи примери се GIF , JPG и PNG . SVG датотеките исто така најчесто се користат на веб-страниците денес, давајќи им на веб-дизајнерите уште една опција за онлајн сликата.

GIF слики

Користете GIF датотеки за слики кои имаат мал, фиксен број на бои. GIF датотеките секогаш се сведени на не повеќе од 256 уникатни бои. Алгоритам за компресија за GIF-датотеки е помалку комплексен отколку за JPG-датотеките, но кога се користи на рамни слики во боја и текст создава многу мали фајлови .

Форматот на GIF не е погоден за фотографски слики или слики со бои на градиент. Бидејќи формат на GIF има ограничен број бои, градиентите и фотографиите ќе завршат со групирање и пикселизација кога ќе се зачуваат како датотека со GIF.

Накусо, ќе ги користите GIF само за едноставни слики со само неколку бои, но исто така можете да го користите PNG за тоа (повеќе за тоа накратко).

JPG Слики

Користете JPG слики за фотографии и други слики кои имаат милиони бои. Таа користи комплексен компресивен алгоритам кој ви овозможува да креирате помали графики со губење на некои од квалитетот на сликата. Ова се нарекува "загуба" компресија, бидејќи некои од информациите за сликата се губат кога сликата е компресирана.

JPG формат не е погоден за слики со текст, големи блокови со цврста боја и едноставни форми со остри рабови. Ова е затоа што кога сликата е компресирана, текстот, бојата или линиите може да се замагли, што резултира со слика која не е толку остра, бидејќи би била зачувана во друг формат.

JPG сликите најдобро се користат за фотографии и слики кои имаат многу и многу природни бои.

PNG слики

Формуларот PNG беше развиен како замена за формат на GIF кога се појави дека сликите на GIF би биле предмет на надоместок за авторски хонорари. Графика PNG имаат подобра стапка на компресија од GIF сликите што резултираат со помали слики од истата датотека зачувана како GIF. PNG датотеките нудат алфа транспарентност, што значи дека можете да имате делови од вашите слики кои се целосно транспарентни или дури и користат низа алфа транспарентност. На пример, сенката за капка користи голем број на ефекти на транспарентност и би била погодна за PNG (или можеби само ќе ни стави крај со користење на CSS сенки).

Сликите на PNG, како GIF, не се добро прилагодени за фотографиите. Можно е да се заобиколи проблемот со ленти што влијае на фотографиите зачувани како GIF-датотеки користејќи вистински бои, но ова може да резултира со многу големи слики. Сликите на PNG исто така не се добро поддржани од постарите мобилни телефони и карактеристиките на телефони.

Ние користиме PNG за било која датотека која бара транспарентност. Исто така го користиме PNG-8 за било која датотека која би била погодна како GIF, наместо со користење на овој формат PNG.

SVG Слики

SVG означува Scalable Vector Graphic. За разлика од форматите базирани на растерски формати пронајдени во JPG, GIF и PNG, овие датотеки ги користат векторите за да создадат многу мали датотеки кои може да бидат прикажани во било која големина без губење на квалитетот на зголемување на големината на датотеката. Тие се создадени за илустрации како икони, па дури и логоа.

Подготовка на слики за веб-доставување

Без оглед на кој формат на слика што го користите, а вашата веб-страница е сигурна да користи повеќе различни формати на сите нејзини страници, треба да се осигурате дека сите слики на таа страница се подготвени за испорака на веб-страници . Преголемите слики може да предизвикаат веб-страница да работи бавно и да влијае на севкупните перформанси. За да се бориме со ова, тие слики мора да бидат оптимизирани за да го пронајдат рамнотежата помеѓу висок квалитет и најниска можна големина на датотеката на тоа ниво на квалитет.

Изборот на формат на вистински слики е дел од битката, но исто така и да се осигурате дека сте ги подготвиле овие датотеки е следниот чекор во овој важен процес на доставување на веб.

Авторски напис од Џенифер Крајнин. Уредено од Џереми Жирар.