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

най-важните

  1. Какви видове графични формати съществуват?
  2. Формати на изображения за растерни изображения
    1. JPG формат
    2. PNG формат
    3. GIF формат
    4. TIFF формат
    5. PSD формат
    6. BMP формат
  3. Формати на векторни изображения - Все още не са толкова популярни в мрежата
    1. EPS формат
    2. SVG формат
  4. Четирите най-популярни графични формата: таблица за сравнение

Какви видове графични формати съществуват?

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

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

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

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

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

JPG формат

Форматът JPG или JPEG всъщност се отнася до правило (ISO/IEC 10918-1), публикуван през 1992 г., който описва различни процедури за компресиране на изображения. Тъй като стандартът не съдържа разпоредби за това как дадено изображение трябва да бъде запазено, той изисква използването на допълнителен формат, поради което стандартът е установен като JpegФормат за обмен на файлове (JFIF) за всички браузъри. Други по-малко използвани алтернативи са Формат на файла за обмен на неподвижни изображения (SPIFF) и графичен формат JPEG мрежова графика (JNG).

Форматът на JPG компресия модифицира обичайната структура на пикселните изображения, така че всеки 8 x 8 пиксела се групират в блок, който се преизчислява като набор на всяка стъпка. В този процес има например a преобразуване на RGB цветово пространство в цветова схемаYCbCr и т.нар нискочестотен филтър, където по-високите честоти се филтрират, за да се намали размерът на файла. В зависимост от избраната степен на компресия, процесът е свързан със загуба на качество, тъй като цялата информация в изображението не може да бъде поддържана. Според статистиката на W3Techs, около три четвърти от уеб страниците използват JPG формат, който се дължи на ефективността на размера на файла, свързан със компресията.

Препоръчително приложение: съхранение и публикуване на снимки.

PNG формат

Друг от най-популярните формати в мрежата е PNG (Преносима мрежова графика), универсален формат на изображението, признат от консорциума на World Wide Web (W3C), който се появи за първи път в Интернет през 1996 г. Като модерна, безпатентна алтернатива на GIF (Graphic Interchange Format), PNG форматът се откроява с възможността за компресирайте изображения без загуба и да предложи дълбочина на цветовете до 24 бита на пиксел (16,7 милиона цвята) с 32-битов алфа канал. За разлика от GIF, PNG форматът не може да генерира анимации.

PNG поддържа както прозрачност, така и полупрозрачност (благодарение на интегрирания алфа канал), които могат да се прилагат за всички видове изображения, както и поради преплитане, което позволява ускорен състав на файлове с изображения по време на процеса на качване. The механизми за корекция на цвят или гланц те гарантират, че файловете с изображения във формат PNG изглеждат горе-долу еднакво в различните системи. Инструменти като pngcrush могат да се използват за компресиране на графика във формат PNG. Поради процеса на компресиране без загуби, файловете са относително по-големи, така че форматът не е толкова подходящ за показване на снимки, колкото например JPG. Форматът PNG също предлага възможност за намаляване на цветовото пространство (от 1 до 32 бита на пиксел).

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

GIF формат

Онлайн порталът CompuServe създаде Графичен формат за обмен, GIF, през 1987 г. като цветова алтернатива на тогавашния черно-бял формат X BitMap (XBM). За разлика от други съществуващи решения по това време, като PCX или MacPaint, GIF файловете изискват по-малко място за съхранение поради ефективното компресия LZW (компресиране на данни с алгоритъма Lempel-Ziv-Welch), поради което форматът се радваше на голяма популярност в ранните дни на Интернет. JPG и PNG поеха водеща роля като графични и графични формати, въпреки че от версията GIF89a (1989) форматът може да групира множество изображения в един файл, което го е превърнало в любим формат за създаване на малки анимации.

Цялата информация за цвета на GIF се поставя в таблица, цветовата палитра. Тази таблица съдържа до 256 цвята (8 бита), така че този формат на изображението не е подходящ за гледане на снимки. Всяка от данните може също да бъде определена като прозрачна, въпреки че, за разлика от по-модерния PNG формат, полупрозрачността не е възможна, така че показва се пиксел или не.

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

TIFF формат

TIFF (Tagged Image File Format) е графичен формат, използван за предаване на изображения с висока разделителна способност и данни за печат. Той е разработен през 1986 г. от Microsoft в сътрудничество с Aldus, който сега е собственост на Adobe, и е оптимизиран за интегриране на цветоотделяне и цветови профили (ICC профили) на сканирани изображения. TIFF също поддържа Цветен модел CMYK и позволява дълбочина на цветовете до 16 бита за всеки цветен канал (общата дълбочина е 48 бита). От 1992 г. можете компресирайте формат без загуби с помощта на гореспоменатия алгоритъм LZW, който също се използва в GIF.

Благодарение на своите характеристики, TIFF се утвърди като общ стандарт за изображения, в които качеството играе по-важна роля от размера на файла. Поради тази причина се използва от редакции и печатни медии, както и в монохромен графичен файл, както може да бъде случаят с техническите чертежи. За съхранение и представяне на географска информация въз основа на решетки (карти, въздушни изгледи и др.) е създаден форматът GeoTIFF, който е снабден с допълнителни етикети.

Препоръчително приложение- Качествено предаване на изображения с висока разделителна способност за отпечатъци

PSD формат

Adobe предлага, наред с други, собствения формат PSD (Photoshop Document) за съхранение на графични проекти, разработени с Photoshop. Това се откроява с факта, че осигурява информацията, свързана със слоевете, каналите или векторите, което позволява последващото им редактиране. По този начин можете да редактирате слоевете, които са добавени, дублирани, скрити, преместени или изтрити, както и всеки от елементите. Те могат да бъдат записани в един и същ PSD файл както слоеве, така и съответните данни за изображения без загуби. Този формат на изображението е особено практичен за графики с висока стойност на разпознаване, като лога или банери, които трябва да бъдат адаптирани бързо и според нуждите към всяка от платформите и размерите на екрана.

Изображенията в PSD формат могат да се отварят само с Adobe Photoshop без никакви ограничения, така че обменът между приложенията на Windows и macOS работи перфектно. По този начин този графичен формат може да бъде наречен по някакъв начин като a формат, който работи на всяка система. PSD работи предимно като формат за съхранение по време на процеса на редактиране. За да извършите редактирането в Интернет, съответният файл трябва да бъде преобразуван в PNG формат или към JPG преди да го качите на сървъра, Съхранението на данни с изображения на всички нива без загуби позволява да ги модифицирате ефективно, но носи и голям обем данни. За да конвертирате PSD графика е необходимо само да имате уеб инструмент като Zamzar.

Препоръчително приложение: временно съхранение и преиздаване на често използвани графики, модели на оформление

BMP формат

BMP (Растерно изображение на Windows) е разработен за операционни системи Microsoft и IBM и пуснат през 1990 г. с Windows 3.0 като формат за съхранение на растерни изображения с дълбочина на цветовете до 24 бита на пиксел. Некомпресираният формат на изображението присвоява на всеки пиксел цветна стойност, така че файловете обикновено са много големи, поради което форматът не е подходящ за използване на уеб страници.

Препоръчително приложение: съхранение на снимки/графики офлайн

Формати на векторни изображения - Все още не са толкова популярни в мрежата

Векторните изображения са особено подходящи за приложение на уеб страници, тъй като не изискват толкова място за съхранение, колкото растерните изображения. Форматите за това не описват процентите на цвета, които има пиксел във всяко изображение, а по-скоро обектиот които е съставено изображението. Тук са включени кръгли и криви повърхности, текст, прави и огънати линии и др., Както и тяхното положение, размери, цветове и други характеристики. В комбинация с гореспоменатия аспект на мащабиране без загуби, реализация на отзивчиви и безпрепятствени уеб елементи става детска игра. Освен това във файлове с векторни формати могат да се правят промени по всяко време, въпреки че нивото на сложност се увеличава значително с прогресивната трудност на файловете с изображения. Друго предимство пред растерните изображения е възможността за генериране на анимации с JavaScript.

EPS формат

В сътрудничество с производителите на софтуер Aldus и Altsys Adobe разработи и публикува EPS векторния формат на изображението (Инкапсулиран PostScript). Името на този формат е свързано с факта, че файловете се записват в езика за описание на страницата PostScript, което прави възможно редактирането на сложни страници в лазерни принтери и в единици за експозиция. За тези цели PostScript описва елементи на отпечатаната страница като линии, кръгове, изображения и др.., и предоставя информация за вашата позиция. EPS също разширява тази информация за изображенията с точни данни за изходния размер, т.нар ограничителна кутия. По желание EPS файловете съдържат визуализация с по-ниска разделителна способност, която може да служи като заместител. Форматът на изображението на Adobe описва всеки обект независимо от следващите изходни устройства, позволявайки взаимозаменяемост между различни изходни носители.

EPS се използваше предимно в печатни медии, но беше заменен от наследник PDF формат (Portable Document Format), който е по-подходящ за изпращане на имейли поради по-малките размери на файла. За уеб проекти както историческият EPS, така и съвременният PDF са еднакво подходящи, което се използва повече за обмен или представяне на текстови документи.

Препоръчително приложение- Описание на по-сложни разпечатки (форматът е остарял)

SVG формат

Докато много други формати на векторни изображения, като формат Al (Adobe Illustrator Artwork), не са подходящи за уеб средата, SVG (Мащабируема векторна графика), препоръчана от W3C, потвърждава впечатляващите ползи от файлове с векторни изображения. Спецификацията за описание на двумерни векторни изображения, която се основава на XML език, той се превръща в сериозна алтернатива на традиционните растерни графики, тъй като много браузъри поддържат HTML5, особено в случай на мобилни и отзивчиви уеб страници. В този смисъл SVG файловете предлагат, освен a мащабируемост без загуби и при често много малък обем данни, тези предимства:

  • Всички атрибути на презентацията, като цветове, шрифтове и т.н., могат да бъдат манипулирайте с CSS.
  • Скриптовете имат достъп до съдържание чрез интерфейса СЛЪНЦЕ (Модел на обект на документ).
  • The машини могат да четат svg графика.
  • Съответният код може да бъде маркиран и адаптиран като отделен файл или директно в документа HTML.
  • Може да бъде насърчавам по различни начини (SMIL, JavaScript, CSS).

Форматът SVG е отличен избор, особено за графики, които съдържат символи (например лога) или които трябва да реагират на потребителски заявки (динамични диаграми) на уебсайта. Този формат на векторно изображение също е идеален за техническа графика. Посочената по-горе статистика за W3Techs показва, че SVG не се използва в повечето уеб проекти, за разлика от растерните графики. За подробна информация как работи интеграцията на SVG векторни изображения, посетете нашето ръководство.

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