изображенията

Снимка от Джон Кароро.

Оптимизирането на изображения за мрежата е от съществено значение за бързото зареждане на страниците в браузърите на потребителите.

Изображенията, присъстващи на 99% от уебсайтовете, са един от елементите, които забавят времето за зареждане най-много. И бързата скорост на зареждане е от първостепенно значение по две причини:

  • Осигурява положително потребителско изживяване, особено при достъп до уеб страница от мобилно устройство.
  • Избягвайте санкции, които могат да ограничат SEO позиционирането на уебсайта.

Какво представлява оптимизирането на изображения за мрежата?

Когато оптимизираме изображенията в мрежата, ние вземаме предвид три свойства на файловете:

  • Резолюция - броя на пикселите на инч (dpi) или точки на инч (dpi), които съдържа изображението.
  • Размер - размерите на изображението - височина по ширина -, изразени в пиксели (px) за мрежата.
  • Тегло - пространството, което файл с изображение заема на диска, обикновено в килобайта (kB).

The оптимизация на изображението се състои в получаване на файл с качество на изображението без загуби с възможно най-ниското тегло.

Изберете правилния формат на изображението

По-долу разглеждаме основните формати на изображения в мрежата и за какво се използва всеки от тях.

JPEG формат

Форматът JPG или JPEG (Joint Photographic Experts Group) е метод за компресиране, който поддържа цветни режими CMYK, RGB и Grayscale, но не поддържа прозрачно фолио.

JPG запазва цялата информация за цвета на RGB изображение, но компресира размера на файла чрез селективно изхвърляне на данни.

Високото ниво на компресия създава по-ниско качество на изображението, а ниското ниво на компресия - по-добро качество на изображението.

JPG е чудесна опция за показване на големи компресирани изображения и снимки в мрежата.

GIF формат

Форматът GIF (Graphics Interchange Format) поддържа прозрачност и до 256 цвята както в изображения, така и в анимации.

Експортирането на изображения с повече от 256 цвята във формат GIF води до загуба на качество.

GIF форматът е обичайната опция за показване на анимирани изображения.

PNG формат

Форматът PNG (преносима мрежова графика) се състои от два типа: PNG - 24 и PNG - 8. И двата формата поддържат прозрачни и полупрозрачни фолиа.

PNG - 24 осигурява дълбочина на цветовете от милиони цветове, а PNG - 8 поддържа до 256 цвята.

Форматът PNG е добър избор за показване на малки изображения (като икони), изображения без фонове, лога и изображения, съдържащи текст в мрежата.

WebP формат

Форматът WebP, разработен в момента от Google с отворен код, има за цел да бъде следващият стандарт за графики с милиони цветове.

Този формат поддържа прозрачно фолио, компресия със загуби и без загуби, графични анимации и значително подобрява нивата на компресия на JPG, GIF и PNG формати.

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

Интересът на Google към стандартизацията на формата WebP, за да се ускори все повече скоростта на зареждане, контрастира с пасивността, показана от компании като Apple, Microsoft или Adobe, за да приемат формата.

Понастоящем Adobe Photoshop не позволява износ в WebP формат, за това е необходимо да инсталирате безплатната приставка WebPShop.

SVG формат

За да завършите този раздел, посветен на форматите, трябва да се спомене, че форматът на векторна графика SVG не е файлов формат на изображение, а файлов формат XML (Extensible Markup Language).

Как да оптимизираме изображенията в мрежата с Adobe Photoshop

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

1. Регулирайте разделителната способност на изображението

Първото действие, което трябва да предприемем, е да намалим разделителната способност на нашите изображения до необходимия минимум.

72 dpi е минималната разделителна способност на изображението за мрежата без загуба на качество.

За да променим разделителната способност на файла, трябва да влезем в опцията Image/Image size от горното меню на Photoshop или да натиснем клавишната комбинация «Option + Command + I», на Mac.

Път към размерите и разделителната способност на изображение в Adobe Photoshop.

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

Информационен прозорец с размерите и разделителната способност на изображение в Adobe Photoshop.

2. Адаптирайте размера на изображението до максималния размер за гледане в мрежата

Професионалните уебсайтове предлагат „отзивчив или адаптивен дизайн“ спрямо размера на екрана на устройствата, от които потребителите имат достъп. А размерът, в който изображенията се показват на всяко устройство, зависи само от дизайна на уебсайта.

Следователно е удобно да регулирате размерите (височина по ширина) на изображението до най-големия размер на дисплея, който ще има в браузъра.

В същия прозорец на предишния раздел - в който можем да модифицираме разделителната способност на изображението - можем да намалим размера на изображението до максималния размер на дисплея.

Препоръчително е да запазите функцията «Resample» в режим «Automatic» и да използвате инструмента «Crop», ако трябва да направите същото с изображението.

Ако не знаете размера на дисплея, определен в уеб дизайна, можете да осъществите достъп и преглед на CSS файла чрез FTP или да използвате „инспектора“ на браузъра, за да разберете.

Път към инструмента "Инспектор" в браузъра Chrome.

3. Експортирайте изображението

В Adobe Photoshop файловете с изображения трябва да бъдат получени от опцията "Експортиране".

Как да НЕ получите оптимизирано изображение във Photoshop

Не бива да използваме опциите „Запазване“ или „Запазване като“, защото - дори използвайки идентична конфигурация - тези опции „Запазване“ генерират файлове с по-голямо тегло от тези, получени чрез функцията „Експортиране“. .

Напротив, когато се използва опцията „Експортиране“, всички тези данни се елиминират и размерът на получения файл е по-малък.

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

Пътят за файл/експортиране в горното меню на Photoshop показва „Предпочитания за експортиране“ и различни опции за експортиране на файлове с изображения.

Опциите, свързани с оптимизирането на изображения за мрежата, са:

  • Бърз експорт като ...
  • Експортиране като ...
  • Предпочитания за експортиране ...
  • Запазване за уеб (наследство) ...
Път за опции за експортиране на изображение в Adobe Photoshop.

Започваме с преглед на основната опция „Експортиране като ...“ и след това ще продължим с прегледа на останалите три споменати опции.

3.1. Опция «Експортиране като ...»

След като разделителната способност (72 dpi) и размерите на изображението (височина и ширина, необходими в px) са достатъчни, остава само да се коригират опциите за експортиране, за да се намали теглото на файла.

Информационният прозорец «Експортиране като ...» (виж по-долу) показва преглед на изображението с две колони, по една от всяка страна, в която можем да модифицираме определени свойства, които преглеждаме по-долу.

Изкачете всички

В лявата колона можем да модифицираме «Scale» на изображението. Но след като предварително сте коригирали размера на изображението, препоръчително е да поддържате мащаба на 1x.

Лявата колона също показва текущото тегло на изображението (долното изображение тежи 110,5 kB). Наблюдаването на теглото на изображението е важно, тъй като то варира в зависимост от избора ни на формат и други опции за експортиране.

Информационен прозорец на функцията «Експортиране като ...» в Adobe Photoshop.

Настройки на изображението

В дясната колона избираме файловия формат за експортиране на изображението и някои свързани свойства в случаите на JPG („Качество“) и PNG („Прозрачност“ и „8 битов файл“) формати.

Размер на изображението

Този блок показва размерите на изображението и мащаба. Ако размерите на изображението са коригирани до максималния размер за гледане в мрежата, мащабът трябва да поддържа 100%.

Във функция «Преобразуване» o Преобразуване, препоръчително е да изберете Опция "Автоматичен бикубичен". Тази опция избира подходящия бикубичен метод за вземане на проби за изображението.

Бикубичната опция е прецизен метод за преоразмеряване, който добавя пиксели - въз основа на изследване на стойностите на съседните пиксели - за получаване на по-плавни тонални градации.

Размер на платното за рисуване

Платното е работното пространство в Photoshop, към което добавяме слоеве. Като общо правило в процеса на експортиране размерът на платното не се променя и съответства на размера на изображението.

Метаданни

Добавянето или не на метаданни с информация за „авторско право и информация за контакт“ зависи от всеки автор.

По-голямото количество метаданни създава по-голям файл; въпреки че информационните метаданни обикновено не заемат голямо място във файла.

Цветово пространство

Препоръката е да оставите активирана опцията по подразбиране "Конвертиране в sRGB" (стандартно червено зелено синьо), цветовото пространство, използвано от устройства, които използват светлина за съставяне на цветове като екрани и монитори на компютри, смартфони и таблети.

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

3.2. Опция «Бърз експорт като ...»

Опцията "Бърз експорт" прилага настройките, избрани в опцията "Предпочитания за експортиране".

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

3.3. Опция «Предпочитания за експортиране ...»

«Предпочитанията за експортиране», споменати в предишния раздел, се променят, като се следва пътя на Предпочитания за файл/експортиране/експортиране от горното меню.

Пример за "Предпочитания за бърз експорт" за оптимизирани за уеб изображения в JPG формат.

3.4. Опция «Запазване за уеб (наследство) ...»

Опцията „Запазване за мрежата“ - от остарелия продукт ImageReady - няма да бъде актуализирана с нови функции и поради тази причина Adobe е добавил тага „Legacy“.

Информационен прозорец за функцията „Запазване за уеб (наследство) ...“ в Adobe Photoshop.

И все пак тази опция продължава да работи във Photoshop и Adobe съобщи, че няма да премахне опцията „Запазване за уеб“, без да предоставя тези възможности в нов и подобрен работен процес.

Оптимизирайте изображенията в мрежата, без да губите качество

В обобщение и както видяхме в целия урок, оптимизирането на изображение за мрежата изисква коригиране на резолюция, на размери, на Формат и опции за износ от изображението.

Тези четири свойства - независимо дали използваме или не софтуер Adobe Photoshop - са тези, на които трябва да обърнем внимание, за да намерим правилния перфектен баланс между качество и тегло на изображенията.