Оптимизация на изображения за интернет
Можете ли да познаете кои са използваните формати за трите версии на логото вляво? Ако сте ИТ или маркетинг специалист, най-вероятно ще познаете, че изображението долу вляво има малко цветове и вероятно е GIF, а това вдясно от него е JPG с ниско качество. Двата варианта отдолу не са приемливи, но се срещат все така често из интернет.
В тази статия ще разгледаме различни способи за контрола на три неща – качеството, големината и еднаквата визия навсякъде на дадено изображение.
Видове файлове
Основните файлови формати, които се използват в интернет пространството, са GIF, JPG и PNG. Много хора използват JPG за всичко, което е голяма грешка. В интернет JPG си заслужава да се използва само при снимки и преливащи графики без контрастиращи детайли. При изображение с текст, запазено в JPG формат, например, се появяват артефакти около буквите, освен ако качеството не е оптималното за формата (при такъв случай големината на файла нараства значително). За графики, илюстрации, икони и лога използвайте PNG, когато можете избягвайте GIF. Разликата между GIF и PNG е основно в броя поддържани цветове и в големината. Докато GIF поддържа едва до 256 цвята, PNG поддържа повече от 16 милиона, което е изключително по-добре откъм качество. Най-често, PNG файловете са 5-25% по-малки от същите изображения, запазени в GIF, но не отсъстват и случаи, в които GIF файловете са по-малки. Друго различие между двата файлови формата са поддръжката на анимация, GIF поддържа анимация във всички браузъри, докато PNG няма такава функционалност, освен с неофициалната модификация APNG, която обаче се поддържа единствено от Firefox и Opera.
Цветове и настройки при запазване
Photoshop често се опитва да редактира цветовете, с които работите. Хората в печатната и предпечатната индустрия са запознати с проблемите, които неща като color profiles и color management създават и какви разлики могат да се получат между това, което е на екрана, и това което излезе от принтера (последните използват CMYK система за цветове, вместо използваната в мониторите RGB).
Първо, трябва да отидете в Edit -> Color Settings…
и да настроите Photoshop така, че да използва стандартния RGB профил на монитора, максимално близко до настройките, посочени по-долу.
След това се уверете, че настоящият документ е в режим на Working RGB от менюто Edit -> Assogn Profile…
След като сте нагласили настройките, изберете File -> Save for Web & Devices, откъдето ще можете да настроите опции за запазване на индивидуалния файл.
На следващия диалогов прозорец се убедете, че отметката на Convert to sRGB е махната и изберете None на Metadata, последното може да ви спести до 1KB размер при някои изображения, което има особено значение при малки иконки, които вместо 0.2KB примерно са 1.2KB.
Изглед в браузъра
Избягвайте да оразмерявате изображения в браузъра. Стремете се да използвате картинки с резолюция, съвпадаща с размерите, които искате тя да има във вашата страница. При намаляне на големината на изображенията натоварвате връзката на сърфиращите и в много браузъри картинките се пикселизират и стоят грозно. Ако трябва да използвате едно и също изображение в пълен размер и като thumbnail, пак е по-добре да имате две версии на файла за целта.
Добре е за важните снимки и изображения да попълване име и алтернативна информация в HTML кода (title и alt атрибутите съответно). Това помага не само за по-доброто индексиране на картинките ви в търсачките, но помага и при липсваща картинка и кеширано съдържание, а също така помага и на посетители, които използват специален софтуер за разглеждане на страницата (напр. незрящи).
Мисля, че публикацията ще бъде от полза за специалистите, занимаващи се с обработка на изображения.
За съжаление в ежедневната си многократно съм се сблъсквал с неразбиране на простата истина, че има различни видове монитори, и че предпечатната подготовка и последващият печат върху хартиен носител е едно, а internet и web-технологиите (както и out of browser технологиите) са нещо съвсем различно.
С навлизането на SVG векторната графика за internet претърпя сериозно развитие, но като цяло към момента преобладава растерната. Много добри художници имат съвсем повърхностни представи за мащабиране, филтри и рендеринг (изглаждане на контура) при растерната графика и/или използват неправилно терминологията, което води до сериозни затруднения. В голямата си част познанията им са изградени върху „самотподготовка“ и практически опит. Това отнема много време, а и не винаги резултатите са добри.
Друг интересен аспект на въпроса свързан с познаването на графичните стандарти и тяхното правилно използване са т.н. peopleware-технологии при които графиката е неразделна част от приложението. Макар мнозина погрешно да считат, че нестандартният вид на подобни приложения е поредния „скин“ (обвивка, кожа) на софтуерния продукт, това съвсем не е така. На международната конференция в Москва по въпросите на peopleware-технологиите през 2010 година, водещи докладчици детайлно обясняваха колко различен е този подход в разработката на клиентски приложения и каква е ролята на екранният дизайн. Това за пореден път доказва колко е важно да се познават различните графични стандарти, спецификата на мониторите, както и т.н. „недокументирани“ технически прийоми за подобряване качеството на използваните изображения.
Категорично това не би могло да стане без допълнителна подготовка. И ако за една web-странница, качеството на изображението не би било фатално, то за едно крайно проложение ползващо peopleware ролята на графичните формати, формиращи отделните компоненти е определяща.
Ще се въздържа от коментар за т.н. „обектно-релационно и тахиграфично шифроване“, където всяко едно изображение е потенциален контейнер на огромна по обем и ключова за крайният резултат информация. Там ще се наложи да навлезем в области като абстрактни методи за представяне на информация и неформална алгебра, а това излиза извън темата. 🙂
Като цяло това е много добре написана и структурирана статия. Надявам се да бъде оценена от потребителите и внимателно прочетена.
С уважение към авторите
Г.Т.Герасимов
(Black Screen NGIT)