Оптимизирайте изображенията за Muwalk Web

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

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

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

Изображенията, присъстващи на 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, ако е необходимо - така и размера на снимката, която ще разгледаме в следващия раздел.