JPEG оптимизация за уеб - най-добрият наръчник

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

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

Избягвайте винаги да запазвате 100%

Почти никога не трябва да запазвате вашите JPEG изображения със 100% качество. Това ще не произвеждат възможно най-много “оптимизирана” изображение. Той всъщност изчислява чрез формула за ограничаване на оптимизацията, която увеличава размерите на файловете ви извънредно. Дори в сравнение с 90% или 95% качество ще видите значителен спад в размера на файла.

Най-често ще ви се препоръчва да запазвате изображения, които са много по-ниски от 90% качество. Ако отворите диалоговия прозорец Save for Web в Photoshop, ще забележите, че предлагат предварително зададени стойности, от които можете да избирате. Добавих възможните JPEG стойности по-долу - забележете присъщите правила за именуване.

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

Дори в Adobe Photoshop качеството на изображението от 60% се счита за „високо“. Много уеб разработчици ще гарантират между 50% - 70% е безопасен диапазон, с който да се придържате.

Колко ниско е твърде ниското?

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

Бих твърдял, че под 30% вие наистина премахвате основното качество на картината. Други дизайнери ще се закълнат 50% като “лимит” намаляване на оптималната стойност. Но най-добрият съвет тук е да опитате различни настройки и да видите какво изглежда най-добре! Не можете да се объркате с няколко тестови проучвания, оптимизиращи JPEG изображенията в мрежата.

Опции за компресиране

Първо трябва да изясним двата термина „компресия“ и „качество“, които са обратни един на друг. Това означава, че ако запишете JPEG при 40% компресия, ще получите качество 60% (в сравнение с максимум 100% качество без компресия).

Това са най-основните опции, които трябва да се използват - и те трябва да бъдат достатъчни, когато се съхранява в мрежата. Общите потребители не влизат в много по-дълбоки персонализации. Вземането на проби се превръща в по-сложни въпроси, в които конвертирате RGB изображения в YCbCr (Luminance, Chroma Blue, Chroma Red).

(Източник на изображението: Кара Монро)

Най- яркост или настройката за яркост винаги се поддържа при възможно най-висока стойност в JPEG компресия. С тази стойност на яркостта на отделен канал е по-лесно да се оптимизират индивидуалните цветови стойности на червено и синьо. Това е известно още като подбрана цветност. Дизайнерите, които се интересуват от замърсяване на ръцете си, ще обичат да четат малко повече за този алгоритъм на компресия. Разгледайте този голям блог пост за вземане на цветови извадки, специално фокусирани върху JPEG изображения.

(Източник на изображението: Дерек Хетфийлд)

Като интересна странична бележка Adobe Photoshop не винаги използва поддискретизация за компресия. Всички изображения, запазени чрез “Запазване за уеб” диалоговият прозорец ще използва само подбрани цветове под 50% стойност на качеството.

Различни уеб медии

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

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

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

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

Намерих интересна статия, в която се обсъжда JavaScript JPEG кодирането, което ще се случи във вашия фронтенд код. Няма много ползи за висококачествените галерии с изображения, но може да изблъска време за зареждане на мобилните ви посетители. Също така би било полезна техника, когато се свързват изображения или динамично се изрязват миниатюри.

Друг фантастичен инструмент за проверка е Yahoo! Smush.it. Това е уеб-базирано уеб-приложение, където можете да качите изображение и Smush.it ще премахне всички ненужни допълнителни байтове, за да оптимизира размера на файла. Това е 100% без загуби, което означава, че качеството на изображението изобщо няма да се влоши. И още по-добре можете да качвате изображения от директни URL адреси, ако ги хоствате на уебсайта ви или на сървър на трета страна.

Допълнителни инструменти

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

IrfanView

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

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

Софтуерната поддръжка е чудесна и функциите на RIOT са много лесни за използване. Заедно с компресирането на изображенията имате достъп и до премахване на допълнителни метаданни като EXIF и Adobe XMP. Тези допълнителни битове на данни могат да се добавят само към общия ви размер на файловете и те рядко са необходими.

ImageOptim за Mac

Ако използвате OS X и се нуждаете от мощно приложение за компресиране, не търсете повече. ImageOptim е мощен инструмент за компресиране на изображения за уеб - понякога дори по-добре от Photoshop.

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

Има някои незначителни проблеми с най-новата стабилна версия на 1.3.3 при изобразяването на пикселизирани JPEG изображения в Opera. Опитайте да проверите всичките си оптимизирани изображения в четирите основни браузъра - Chrome, Safari, Firefox и Opera (и може би IE). Ако нещо изглежда изкривено, можете да опитате да изтеглите ImageOptim 1.3.0, който превръща малко по-чист.

Полезни ресурси

JPEG 101: Пътеводител за кратки курсове на JPEG
Право настройки за компресиране, за да записвате JPG изображения за WordPress
Интелигентни техники за оптимизация на JPEG
Как да оптимизирате JPEG изображенията за уебсайтове
Всичко, което трябва да знаете за компресирането на изображения

заключение

JPEG компресията е трудна задача, тъй като трябва да намерите подходящия баланс между качество и съдържание. Въпреки че съвременните скорости на интернет връзката се увеличават, все още има нужда от намаляване на размера на уеб страниците. Нови рамки като jQuery и Typekit могат да поставят стотици допълнителни килобайти, дори и при добре оптимизиран дизайн.

Все още трябва да препоръчам Adobe Photoshop като премиерен софтуер за редактиране на изображения. Има и други примери, които са по-добри за процеса на оптимизиране на JPEG. Но уеб дизайнерите могат да се справят с още по-малко известни решения с отворен код. Ако имате подобни трикове или идеи за JPEG компресиране, моля споделете с нас в пост-дискусионната област по-долу.