По-добри формати на изображения за вашия уебсайт
Изображенията са основна част от всеки уебсайт. Но когато работите с тях, трябва да се вземе предвид необходимият баланс между тяхното качество и размера на изтеглянето им. Уебсайт с висококачествени изображения ще консумира много честотна лента и ще бъде бавен за възпроизвеждане в браузърите, което може да накаже поведението: потребителите ще напуснат уебсайта, ако отнеме твърде много време за показване.
Формати на изображения, използвани в мрежата
Следователно е необходимо да се знаят различните формати на изображения, които могат да се използват на уебсайт, и да се знае кога да се избере едното или другото. В момента най-използваните формати са три: 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 може да има няколко изображения или кадри, които са рисувани в различни периоди от време, симулиращи видеоклип. Поради тази причина използването му в момента се увеличава в мрежата. Възможно е и изпълнение изображения с прозрачен фон макар и в малко ограничено изпълнение, тъй като може да има само две стойности: всички пиксели са прозрачни или непрозрачни, не можете да посочите стойност на прозрачност за всеки от тях.