Изображения за уеб - видове, формати и оптимизация

Помощен център

Изображения за уеб - видове, формати и оптимизация

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

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

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

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

image raster format

Векторни изображения

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

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

image vector format

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

Растерни файлови формати

JPG/JPEG (Joint Photographic Experts Group) е най-популярният графичен графичен формат, използващ ефективни алгоритми за компресиране, които ви позволяват да постигнете малък размер на файла без загуба на качество (или с приемлива загуба на качество).

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

GIF (Graphics Interchange Format)

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

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

PNG поддържа изображения, базирани на палитри (24-битови RGB или 32-битови RGBA цветове) с или без алфа канал за прозрачност, както и изображения в сивата скала ( grayscale).

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

TIF/TIFF (Tagged Image File Format)

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

BMP (BitMap)

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

Векторни файлови формати

EPS (Encapsulated PostScript) Универсален формат, поддържан от повечето програми за векторни графики. Визуалните идентификационни елементи, като например лога, са най-подходящи за запазване в този формат.

AI и CDR

Често използвани векторни файлове, създадени за две от най-популярните векторни графични програми, съответно Adobe Illustrator и Corel Draw. Последните версии на програмите могат да импортират файлове на техния конкурент.

SVG (Scalable Vector Graphics)

SVG изображенията се дефинират в XML текстови файлове и могат да бъдат търсени, индексирани, сканирани и компресирани. Като XML файлове, SVG изображенията могат да се създават и редактират с всеки текстов редактор или програма за рисуване.

Всички модерни уеб браузъри - включително Mozilla Firefox, Google Chrome, Opera, Safari и Microsoft Edge - имат поддръжка на SVG изображения.

Почти всички популярни растерни програми създават свой собствен формат като най-често използваният формат от този тип е PSD, който се ползва от най-популярната програма за растерни графики - Adobe Photoshop. Други популярни формати са PSP (Corel Paint Shop Pro) и XCF (Gimp и някои други програми).

PDF (Portable Document Format) - от една страна, това е по-скоро документ, отколкото графичен формат, но от друга страна, той може да включва както векторни, така и растерни елементи и освен това е много гъвкав. Ето защо често се използва за цифров печат.

Оптимизиране на изображения

Някои съвети и техники, които трябва да имате предвид, когато работите по оптимизирането на вашите изображения:

  • Използване на векторни формати: векторните изображения са независими от резолюцията и мащаба, което ги прави идеални за многофункционални сайтове и сайтове с висока разделителна способност (high-resolution).
  • Минимизиране и компресиране на SVG файловете: XML маркировката (кода на файла) често съдържа ненужни метаданни, които могат да бъдат премахнати; уверете се, че вашите сървъри са конфигурирани да прилагат GZIP компресия за SVG файлове.
  • Изберете най-добрия формат на растерните изображения: определете вашите функционални изисквания и изберете този формат, който отговаря на всяко изображение индивидуално.
  • Експериментирайте с оптималните настройки за качество на растерните формати: не се страхувайте да намалявате настройките за качество, тъй като резултатите често са много добри и икономисаният ресурс е значителен.
  • Премахване на ненужните метаданни от изображението: много растерни изображения съдържат ненужни метаданни: географска информация, информация за камерата и т.н. Използвайте подходящи инструменти, за да ги премахнете.
  • Ползвайте мащабирани изображения: преоразмерете изображенията на сървъра и се уверете, че размерът на показаното изображение е възможно най-близо до естествения размер на изображението. Добра практика е да се качат различни размери на едно и също изображение които да се зареждат в зависимост от резолюцията на браузера чрез CSS media queries.
  • Използвайте CSS3 ефекти, където е възможно - CSS ефектите (градиенти, сенки и т.н.) и CSS анимациите са независими от резолюцията и изразходват малко ресурси.
  • Използвайте уеб шрифтове, вместо да вграждате текст в изображения - уеб шрифтовете позволяват използването на красиви шрифтове, като същевременно се запазват възможностите за избиране, търсене и преоразмеряване на текста.

Заключение

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

Reference: developers.google.com/web/fundamentals/