ЈПЕГ Оптимизација за Веб - Ултимате Гуиде

Компресија слике се налази у свим изворним медијским форматима. Међутим, разлика између ГИФ, ПНГ и ЈПЕГ је како информације се компримују и приказују на екрану. Постоји толико много савета за прављење одличних сликовних медија који су објављени на вебу, а ипак многи дизајнери још увек не разумеју неке од основа.

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

Избегавајте увек штедњу на 100%

Готово никада не би требало да сачувате своје ЈПЕГ слике са 100% квалитета. Ово ће не произвести што је могуће више “оптимизед” слика. Она заправо израчунава преко оптимизацијске граничне формуле која повећава величину датотека прекомјерно. Чак иу поређењу са квалитетом од 90% или 95% видећете значајан пад величине датотеке.

У већини случајева препоручујемо вам да сачувате слике много мање од 90% квалитета. Ако отворите оквир за дијалог Саве фор Веб у Пхотосхопу приметићете да нуде унапред подешене вредности из којих можете да бирате. Додао сам могуће ЈПЕГ вредности испод - приметите конвенционалне конвенције именовања.

• Лов - 10%
• Средње - 30%
• Високо - 60%
• Веома висок - 80%
• Максимално - 100%

Чак иу Адобе Пхотосхоп-у 60% квалитета слике се сматра 'високим'. Многи веб програмери ће гарантовати између 50% - 70% је сигуран опсег за који се треба придржавати.

Колико је ниска?

Вредности које изаберете за оптимизацију су у потпуности зависне од самог пројекта. Морате размотрити које врсте графике ће произвести највеће величине датотека - то су оне које заиста требају компресију.

Рекао бих да испод 30% стварно уситњава основни квалитет слике. Остали дизајнери ће се заклети 50% као “лимит” смањити оптималну вредност. Али најбољи савјет је да испробате различите поставке и видите шта изгледа најбоље! Не можете погријешити с неколико тестова који оптимизирају ЈПЕГ слике за веб.

Опције компресије

Прво треба да разјаснимо два термина 'компресија' и 'квалитет' који су обрнути један од другог. То значи да ако сачувате ЈПЕГ на 40% компресије добићете 60% квалитета (у поређењу са максимално 100% квалитета без компресије).

Ово су најосновније опције које треба искористити - и оне би требале бити довољне приликом спремања за веб. Општи корисници не улазе у дубље прилагођавање. Узорковање се претвара у компликованије ствари у којима конвертујете РГБ слике у ИЦбЦр (Луминанце, Цхрома Блуе, Цхрома Ред).

(Извор слике: Кара Монрое)

Тхе луминанце или подешавање осветљења се увек одржава на највишој могућој вредности у ЈПЕГ компресији. Са овом вредношћу осветљености на одвојеном каналу лакше је оптимизовати појединачне вредности боја Ред и Блуе. Ово је такође познато као цхрома субсамплинг. Дизајнери заинтересовани за прљање својих руку ће волети да читају нешто више о овом алгоритму компресије. Погледајте овај одличан блог пост на узорку цхрома који је посебно фокусиран на ЈПЕГ слике.

(Извор слике: Дерек Хатфиелд)

Као занимљива страна Адобе Пхотосхоп не користи увијек подузорковање за компресију. Све слике сачуване преко “Сачувајте за Веб” дијалог ће користити само узорковање цхрома испод вредности квалитета од 50%.

Различити веб медији

Мрежа је такође пуна различитих врста слика медија. Можете имати фотографије, иконе, дугмад, значке и тона друге графике. Али приметно је да поређење квалитета између дугмета и фотографије нема смисла.

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

Планирање графичког модела

Желите да имате организован систем датотека који је довољно једноставан да бисте га прегледали. Неки вебмастери ће изабрати да хостују своје фотографије негде другде на Вебу - као што су Флицкр или Пицаса. Ипак, ипак ћете желети да користите неки алат за компресију да бисте смањили величину слике, али како ћете их приказати на вашем сајту ће се разликовати. Ово се посебно односи на популарни пораст броја мобилних уређаја са приступом Интернету.

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

Још један фанци алат за провјеру је Иахоо! Смусх.ит. То је веб-апликација базирана на претраживачу, на којој можете учитати слику и Смусх.ит ће уклонити све непотребне додатне бајтове како би оптимизирали величину датотеке. То је 100% без губитака, што значи да се квалитет слике уопште неће деградирати. А још боље можете груписати слике из директних УРЛ-ова ако их имате на вашем веб сајту или серверу треће стране.

Додатни алати

Постоји много софтвера који треба покушати у погледу манипулације сликама. Кључни су сви додатни бајтови које можете обрисати за сваку датотеку. Нема много софтвера тамо, али опције које су доступне су невероватне.

ИрфанВиев

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

Што је још боље, подршка за додатке трећих страна. Један такав пример је РИОТ (алатка за оптимизацију радикалне слике). Овај плугин ради за друге сличне графичке уређаје отвореног кода као што је ГИМП. Нуди приказ двоструке слике где можете ручно да подесите параметре компресије за сваку од ваших слика.

Софтверска подршка је дивна и РИОТ функције су веома једноставне за употребу. Уз компресију слика имате и приступ до уклањања додатних метаподатака као што су ЕКСИФ и Адобе КСМП. Ови додатни битови података могу само додати на вашу укупну величину датотеке и ријетко су потребни.

ИмагеОптим фор Мац

Ако користите ОС Кс и потребна вам је моћна апликација за компресију, не тражите даље. ИмагеОптим је моћан алат за компримирање слика за веб - понекад чак и боље од Пхотосхопа.

Цела апликација подржава драг-анд-дроп функционалност тако да је лако оптимизовати велике скупове слика. На сличан начин можете извршити наредбе из терминала и подесити скрипте љуске. Погледајте Гоогле страницу за више информација и техничку подршку.

Било је неких мањих проблема са најновијим 1.3.3 стабилним издањем у рендеровању ЈПЕГ слика у Опера. Покушајте да проверите све своје оптимизоване слике у четири главна прегледача - Цхроме, Сафари, Фирефок и Опера (а можда и ИЕ). Ако нешто изгледа накошено, можете покушати да преузмете ИмагеОптим 1.3.0 који претвара нешто чистије.

Хелпфул Ресоурцес

• ЈПЕГ 101: Водич за убрзани курс за ЈПЕГ
• Право подешавање компресије за чување ЈПГ слика за ВордПресс
• Паметне технике оптимизације ЈПЕГ-а
• Како да оптимизујете ЈПЕГ слике за веб сајтове
• Све што требате знати о компресији слике

Закључак

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

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