Почетна » Веб дизајн » Комплетан водич за коришћење ВебП формата слике

    Комплетан водич за коришћење ВебП формата слике

    ВебП, или незванично проглашен као веппи, је формат слике који је представио Гоогле Девелоперс прије око 5 година. ако сте веб дизајнер или програмер који настоји да смањи и оптимизује величину ваше слике, оно на шта је ВебП способан да стави осмех на ваше лице.

    Укратко, ево неких важних ствари које требате знати о овом не тако новом, али још увијек хладном формату слике:

    • ВебП иде уз датотечни наставак .вебп.
    • ВебП усваја и компресију губитака и губитака.
    • ВебП слике губитака су потенцијално 25-34% мањи од ЈПЕГ.
    • ВебП снимци без губитака су потенцијално 25% мањи у односу на ПНГ.
    • ВебП подржава транспарентност без губитака, тј. ПНГ са алфа каналом.
    • ВебП подржава анимацију. тј. анимирани ГИФ-ови.

    Укратко, ВебП може значајно смањити величину ЈПЕГ, ГИФ, ПНГ датотеке слике. Ево освежења на ВебП-у који би требало да проверите пре него што одемо у забавне ствари.

    Експеримент

    Најбоље ствари у вези са тврдњама на Вебу су да увек можемо покренути експерименте да бисмо проверили истинитост и аутентичност. Ево неких експеримената које сам урадио да сазнам како мала слика може добити након што се конвертују из различитих формата слика (ЈПЕГ, ПНГ и ГИФ) у ВебП.

    1. ЈПЕГ - Лосси Имаге

    Ево случајне ЈПЕГ слике коју сам ухватио од Пекелс-а. Оригинал филесизе - 165кб. ↓

    Слика је оптимизована са ЈпегМини. Нев филесизе - 101кб.

    Коначно, иста слика се конвертује у ВебП формат. Финал филесизе - 70кб.

    Са стране: Ево различитих фајлова ако је иста слика конвертована у следеће формате:

    • ГИФ - 285кб
    • ПНГ 8 - 241.2кб
    • ПНГ 24 - 657.6кб
    2. ПНГ - Лосслесс Имаге

    Покушајмо са ПНГ-ом са транспарентношћу. (Извор). Оригинал филесизе - 587кб.

    Ево слике оптимизоване са тинипнг. Нев филесизе - 278кб.

    И на крају, слика конвертована у ВебП формат. Финал филесизе - 112кб.

    3. Анимирани ГИФ

    Када се конвертује у ВебП, ЈПЕГ слика иде од 165кб до 70кб, док ПНГ слика иде од 587кб до 112кб.

    Да видимо како се крећу анимирани ГИФ-ови:

    • Оригинална величина фајла - 6.8мб
    • ВебП фајлови - 6.3мб

    Резиме:

    Ево табеле за сумирање целог експеримента:

    Лосси (ЈПГ) Лосслесс (ПНГ) Анимирани ГИФ
    Оригинал 165кб 587кб 6.8мб
    Оптимизовано алаткама 101кб 278кб -
    ВебП формат 70кб 112кб 6.3мб

    Без много задржавања у математичким прорачунима, те бројке указују на значајно смањење величине датотека, а судећи према сликама, не можете заиста рећи разлику у смислу јасноће и резолуције. Мањи, лакши фајлови са истим нивоом квалитета слике, ВебП дефинитивно вреди погледати.

    Претварање у ВебП помоћу алата

    Ако сте већ на броду и желите да почнете да објављујете слике у ВебП формату, хајде да уђемо и погледамо како можете лако да претворите ваше слике у овај формат. Све методе наведене у наставку разликују се у смислу контроле, једноставности употребе и практичности. Изабери отров.

    ВебПонизе за Мац

    ВебПонизе је вероватно најједноставнији и најбржи начин за конвертовање слика у ВебП формат на Мац-у. Све што треба да урадите је да превуците и испустите слике у ВебПонизе и то ће извршити конверзију. Примићете излаз, пре-сизе, афтер-сизе и% смањења оригиналне датотеке. [Довнлоад ВебПонизе]

    Вебпцонв за Виндовс

    Ако користите Виндовс, Вебпцонв је апликација коју треба да инсталирате. Такође се испоручује у преносивој верзији тако да је можете самостално покренути на вашем фласх дриве-у. [Довнлоад Вебцонв]

    Претварање са командним линијама

    Ако се осећате гееки, вероватно ћете желети да изузмете конверзију користећи командне линије. цвебп претвара ваше ЈПЕГ, ПНГ или ТИФФ слике у ВебП формат и двебп конвертује их у ПНГ формат. Да видимо како ово функционише.

    Белешка: У наставку су наведени подаци за Мац ОС Кс. За кориснике Виндовса и Линука кликните овде.

    Постављање МацПортс на Мац ОСКС

    Прво, проверите да ли сте инсталирали Ксцоде, а затим следите ове кораке:

    1. Преузмите и инсталирајте МацПортс. Ако већ имате инсталиран МацПортс на вашем Мац рачунару, пређите на корак 2.
    2. Лансирање Терминал.
    3. Тип "судо порт селфупдате"и притисните ентер. Ово ће ажурирати ваш МацПортс на најновију верзију.
    4. Следеће, откуцајте "судо порт инсталл вебп"и притисните ентер. Ово ће се инсталирати либвебп (ВебП библиотека).

    То је то. Погледајмо сада како претворити слике у ВебП помоћу командне линије.

    Наредбе за конвертовање / поврат

    Ево наредби за:

    И - Конвертујте ЈПЕГ / ПНГ сликовне датотеке у ВебП формат

    Формат: цвебп -к [имаге_куалити] [ЈПЕГ / ПНГ_филенаме] -о [ВебП_филенаме]

    Пример:

    цвебп -к 80 екампле.пнг -о екампле.вебп 

    ИИ - Вратити ВебП сликовне датотеке натраг у ПНГ

    Формат: двебп [ВебП_филенаме] -о [ПНГ_филенаме]

    Пример:

    двебп имаге.вебп -о имаге.пнг 

    Више: Ако перферирате конверзије преко других средстава, ево упутстава за коришћење Грунт и Гулп задатака за конверзију ЈПГ / ПНГ датотека у ВебП.

    Претвори са алаткама на мрежи

    Ако не желите да инсталирате апликације на оперативном систему да бисте извршили овај задатак, уместо тога изаберите ове онлине алате. Ево неколико које сам сазнала:

    • Онлине-цонвертер.цом
    • Вебп-цонвертор.цом
    • Замзар

    Савет: Ако гоогле цонверт вебп онлине , вероватно ћете наћи више опција.

    Пхотосхоп Плугин

    Можда ће вам бити драго да знате да постоји и Пхотосхоп Плугин који вам омогућава да снимите слике у ВебП формат преко Пхотосхоп-а. Овај додатак подржава Мац ОС Кс (ЦС 2- ЦС 6) и Виндовс (32-битни и 64-битни). [Преузмите овде додатак.]

    Белешка: Само сам помислио да би требао знати да сам га пробао на Пхотосхоп ЦЦ. Није радио тамо.

    Подршка за ВебП претраживач

    На крају, хајде да причамо о компатибилности. Тренутно можете да видите слике ВебП формата на следећим прегледачима (реф):

    • Цхроме / Цхроме за иОС
    • Опера / Опера Мини

    Не толико среће ФиреФок и Сафари, који још увек не подржавају ВебП формат. Међутим, можете користити ВебПЈС Јавасцрипт библиотеку претворити ВебП слике у датаУРИ низ на клијентској страници.

    Вратите се на друге формате слика

    Увек је добра идеја да користите замену да бисте избегли приказивање грешака у сликама због неподржаних претраживача. У овом случају, резервна слика ће бити на слици у ЈПГ или ПНГ формату. Ево како то радите.

      извор срцсет = "екампле.вебп 1к" типе = "имаге / вебп">   

    За овај код, имагес / цомплете-гуиде-то-усинг-веб-имаге-формат_13.јпг ће се учитати ако корисник користи Фирефок или Сафари.

    Прегледање ВебП слика

    Можете прегледати ВебП слике на Цхроме и Опера прегледачима. Али ако желите да то урадите локално на вашој машини, биће вам потребно неколико алата.

    Корисници Мац рачунара могу да користе ВебПКуицкЛоок да би прегледали слике у ВебП формату помоћу функције Куицк Лоок (приказ слике или означене слике, притисните размакницу).

    За кориснике Виндовса, ВебПЦодец ће приказати умањени приказ ВебП слика у Филе Екплорер-у. Биће приказани и ВебП и ЈПЕГ еквиваленти. У неким подржаним Виндовс ОС (Виста, 7, 8), ВебП слика се може приказати и на Виндовс Пхото Виевер-у.

    Више: РеСЦР.ит аутоматски испоручује слике у ВеБП формату и доступан је ако похраните слике помоћу МакЦДН. (Опширније)

    Даље референце

    • Конвертовање анимираног ГИФ-а у ВебП
    • Како ВебП ради
    • Имплементација ВебП-а преко Аццепт Цонтент Неготиатион
    • Бржи, мањи и лепши веб са ВебП
    • Примена нових формата слика на Вебу
    • ВебП АПИ документација