Оптимизация на изображения за интернет

photoshop-logo-uglyМожете ли да познаете кои са използваните формати за трите версии на логото вляво? Ако сте ИТ или маркетинг специалист, най-вероятно ще познаете, че изображението долу вляво има малко цветове и вероятно е 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-web-01

и да настроите Photoshop така, че да използва стандартния RGB профил на монитора, максимално близко до настройките, посочени по-долу.
photoshop-web-02

След това се уверете, че настоящият документ е в режим на Working RGB от менюто Edit -> Assogn Profile…
photoshop-web-03

След като сте нагласили настройките, изберете File -> Save for Web & Devices, откъдето ще можете да настроите опции за запазване на индивидуалния файл.
photoshop-web-04

На следващия диалогов прозорец се убедете, че отметката на Convert to sRGB е махната и изберете None на Metadata, последното може да ви спести до 1KB размер при някои изображения, което има особено значение при малки иконки, които вместо 0.2KB примерно са 1.2KB.
photoshop-web-05

Изглед в браузъра

Избягвайте да оразмерявате изображения в браузъра. Стремете се да използвате картинки с резолюция, съвпадаща с размерите, които искате тя да има във вашата страница. При намаляне на големината на изображенията натоварвате връзката на сърфиращите и в много браузъри картинките се пикселизират и стоят грозно. Ако трябва да използвате едно и също изображение в пълен размер и като thumbnail, пак е по-добре да имате две версии на файла за целта.

Добре е за важните снимки и изображения да попълване име и алтернативна информация в HTML кода (title и alt атрибутите съответно). Това помага не само за по-доброто индексиране на картинките ви в търсачките, но помага и при липсваща картинка и кеширано съдържание, а също така помага и на посетители, които използват специален софтуер за разглеждане на страницата (напр. незрящи).

Източници

smashingmagazine.com

Интересувате се от темата? Пишете ни!

Бързо запитване

Вашите имена *

Вашият Email *

Вашето съобщение *

captcha

Подобни публикации

One Comment

Добавете коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *