Изображенията са основна част от всеки уебсайт. Но когато работите с тях, трябва да се вземе предвид необходимият баланс между тяхното качество и размера на изтеглянето им. Уебсайт с висококачествени изображения ще консумира много честотна лента и ще бъде бавен за възпроизвеждане в браузърите, което може да накаже поведението: потребителите ще напуснат уебсайта, ако отнеме твърде много време за показване.

Формати на изображения, използвани в мрежата

Следователно е необходимо да се знаят различните формати на изображения, които могат да се използват на уебсайт, и да се знае кога да се избере едното или другото. В момента най-използваните формати са три: JPG или JPEG, GIF Y. PNG. И трите са формати на растерно изображение, те представляват изображение чрез кодиране на стойностите на цвета и прозрачността на всеки пиксел за разлика от векторните формати (като SVG), които съхраняват линии, точки и полигони, за да създадат изображението.

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

Растерното изображение не е нищо повече от a решетка с две пикселни размери (височина и ширина). Като пример изображението с размери 200 x 200 пиксела има общо 40 000 пиксела, всеки от които ще има RGBA стойност (червено, зелено, синьо, алфа канал или прозрачност) и тази информация ще заема общо 4 байта (32 бита) за всеки пиксел. Така че изображението с размери 200 x 200, без никаква оптимизация или компресия, ще бъде с размер 160 000 байта = 156 Kbytes. Можете лесно да видите, че този размер е твърде голям за уеб стандартите в малко изображение. Ето защо се използват формати на изображения, които компресират информацията.

След това ще бъдат описани трите формата на изображенията и след това ще бъдат дадени редица указания за това кога да се използва всеки от тях. Накрая ще видим как можем да оптимизираме изображенията, като използваме софтуер за редактиране на изображения като Адобе Фотошоп или GIMP.

формати

JPG или JPEG (Съвместна експертна група по фотография)

Изображенията обикновено имат разширение .jpg или .jpeg и това е най-използваният формат днес. Това е алгоритъм за компресиране със загуби или загуби (който не позволява възстановяването на оригинала от компресирания файл), който се основава на факта, че човешкото око улавя промените в яркостта по-добре от промените в цвета и че по-добре възприема тези промени в области с хомогенен цвят, отколкото по ръбовете на обектите в изображението. Математическият алгоритъм, на който се основава, премахва цялата информация, която не е от съществено значение за човешкото око.

JPG По принцип той отделя 24 бита на всеки пиксел, за да съхранява неговата информация, с която може да работи с повече от 16 милиона различни цвята. Но когато прилагаме разбиране, можем да изберем редица параметри за контрол на преобразуването, като например степен на компресия, посочено с процент. Като правило се счита, че 80% е висококачествено изображение, 50% със средно качество и 10% с ниско качество. В мрежата е обичайно да се работи със стойности между 70 и 80%.

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

The JPG формат Препоръчва се за работа с изображения с хиляди или милиони цветове: фотографии, изображения с градиенти. Но не е подходящ за изображения с текст, прости форми или които съдържат големи едноцветни блокове, защото генерира ръбове, изпълнени с шум. Също така JPEG изображение не може да поддържа прозрачност.

GIF (графичен формат за обмен)

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

За разлика от JPEG, GIF е формат за компресия без загуби, тоест позволява реконструкция на оригинала, тъй като запазва информацията за цвета и прозрачността на всеки пиксел и не изкривява изображението. Въпреки това, той работи само с 8 бита за всеки пиксел, което ви позволява да имате само 256 различни цвята. Изправен пред това ограничение на цветовете, GIF използва серия от методи за затъмняване, за да симулира цветове, които не съществуват в ограничената цветова палитра, която GIF предлага.

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

Когато правите GIF с редактор на изображения, също могат да бъдат избрани две допълнителни функции. Въпреки че беше казано, че по подразбиране GIF използва 256 цвята, възможно е да се променя тази цветова палитра и дефинирайте, че използва само 32, 16 или 8 цвята, постигайки още по-малки размери на изображението. Можете също да създадете Преплетен GIF което позволява на бавните устройства да зареждат изображение, което се изгражда постепенно на екрана, без да се чака рисуване по ред.

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

PNG (преносима мрежова графика)

Форматът PNG се появи през 1996 г. като алтернатива на GIF, когато този формат не беше лицензиран свободно. Вашите изображения имат разширение .png и ви позволява да съхранявате информация с по-голяма дълбочина на контраста, с по-високо качество.

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

PNG поддържа различни дълбочини на цветовете o канали: скала на сивото (1 канал), скала на сивото с прозрачност (2 канала), червени, зелени и сини канали (RGB) или истински цвят (3 канала) и истински цвят с прозрачност (4 канала). В зависимост от това колко канали се използват, броят на цветовете или степента на прозрачност, които могат да бъдат използвани, ще бъде. The PNG-8 o Индексираният PNG използва само 256 цвята. The PNG-24 използва същия брой цветове като JPEG.

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

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

Какъв формат да изберем във всеки отделен случай?

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

1. Необходима ли е анимация?

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

2. Трябва ли да запазите детайлите на изображението точно и в най-добрата резолюция?

Ако отговорът е да, трябва да се избере формат PNG, тъй като алгоритъмът му за компресиране е без загуби. Следващото решение в този случай е да изберете най-подходящата цветова палитра, тъй като това ще зависи от това дали размерът на файла е повече или по-малък. Ако са необходими по-малко от 256 цвята, ще трябва да бъде избран PNG-8. Ако е за снимка, ще се използва PNG-24, като се знае, че PNG файловете винаги ще бъдат, при равни други условия, по-големи от JPG.

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

Размерът на изображенията

Форматите на изображенията помагат за оптимизиране на изображенията, като се опитват да минимизират информацията за цвета, съхранявана от техните пиксели: колкото по-малко бита са необходими, толкова по-светло ще бъде изображението.

Но другият начин да намалите килобайтовото тегло на изображението е контролирайте неговия размер. Винаги трябва да се уверите, че изображението, качено в мрежата, не е по-голямо от пространството, предвидено за вашето зрение. Преоразмеряването на изображение намалява броя на пикселите в снимката и също така намалява броя на байтовете, необходими за изчертаването му в браузъра. Като илюстрация, ако имате изображение с размери 250x250 пиксела и пространството, предназначено да го покаже, е само 200x200, крайното спестяване е 2500 пиксела, тоест с 10 KB по-малко тегло в некомпресирано изображение.

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

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

Оптимизация с Photoshop и GIMP

Редакторите на изображения като Photoshop или алтернативата в свободния софтуер GIMP ви позволяват да контролирате всички аспекти на оптимизацията на изображението.

И двете могат да променят размера на изображението и също така да гарантират, че изображението не се изкривява при това действие, като заключва пропорциите между височината и ширината. GIMP в менюто Image> Scale Image; във Photoshop под Image> Image Size.

Когато изображението е създадено в някой от тези два инструмента, то работи с естествени формати, по същия начин, по който могат да се добавят слоеве, ефекти и т.н. Има PSD във Photoshop и XCF в GIMP. Но тези видове изображения не могат да се използват в мрежата и е необходимо да ги конвертирате в един от обяснените по-рано формати: JPG, GIF или PNG.

На този етап трябва да се вземе решение кой формат да се използва и кои параметри на преобразуването искат да бъдат контролирани или експериментирани. Ако използвате GIMP, Трябва да отидете в менюто Файл> Експортиране като и да изберете някой от трите формата. В Адобе Фотошоп Това е в менюто Файл> Запазване като. В зависимост от избрания формат ще се появят тези опции:

  • GIF, ако искате преплетен GIF или, ако PSD или XCF имат множество слоеве, ако искате да създадете анимиран GIF, указващ закъснението в милисекунди.
  • JPG. Първото нещо е да изберете качеството на компресията. Освен това има някои разширени опции: ако искате да създадете прогресивно изображение, с колко изглаждане и дори други, променете някои параметри на компресия с подпроби или различни варианти на математическия алгоритъм.
  • PNG. В този случай можете да определите нивото на компресия, ако запазвате информация за цвета на фона, гама или ако искате да създадете преплетено изображение.