▷ Как да компресирате изображение във ФОТОШОП

Наличието на уебсайт не се основава единствено на неконтролирано качване на съдържание, трябва да се погрижите за структурата на мрежата, включително всеки елемент, който хостваме в нея. Трябва да се има предвид, че достъпът до него става чрез интернет връзки и че, въпреки че на много места има високи скорости, на други те все още са малко изоставащи. Всичко това, без да се отчита важността на мобилната тема и разходите за мегабайта. Ето защо компресирането на изображения без загуба на качеството на Photoshop е силно търсена задача от създателите, които мислят в интерес на потребителите.

Това, което не трябва да правим, е да превърнем нашия уебсайт в бавно пространство, в което хората не искат да влизат отново, нещо, което можем да избегнем, ако вземем предвид различни елементи и се научим да компресираме изображения във Photoshop. Един от тях и много важен е качването на изображения. Ако имате сайт с много визуално съдържание, трябва да се погрижите за него както отвътре, така и отвън, като компресирате изображенията от Photoshop и правите страницата много по -бърза.

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

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

1. Видове формати на изображения във Photoshop

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

JPEG.webp форматЗа общо ползване на фотография това е стандартният формат, използван с качествени резултати. Поддържа 24-битов цвят.

Формат PNG-8Той е алтернатива на GIF.webp, но без анимации и може да показва до 256 цвята. Неговата компресия за мрежата е една от най -подходящите, позволяваща добро качество с намалени размери.

Формат PNG-24Това е добър вариант за експортиране на качествени изображения, точно като JPEG.webp. Този тип разширение е удобно, когато имаме изображение, което съдържа прозрачност. Той също така показва до 16 милиона цвята, тъй като поддържа 24-битов цвят.

GIF.webp форматТова е форматът за анимации par excellence. Представлява до 256 цвята под формата на големи количества плътен цвят, линии или текст.

За този урок ще изберем два от най-полезните и използвани формати за качване на изображения в мрежата: JPEG.webp и PNG-8.

2. Как да компресирате изображение във Photoshop

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

Това, което наричаме разделителна способност, означава броя на частите информация в определено пространство, което се нарича пиксели на инч или dpi. Това означава, че колкото по -голям е броят на пикселите на инч, нашата резолюция ще бъде по -висока.

След като и двата аспекта са разграничени, трябва да се отбележи, че две изображения могат да имат еднакъв размер, но различна разделителна способност и пропорции. Ако те са изображения за мрежата, препоръчително е да се третират размерите в размер на пиксела. За достъп до него отидете на Image / Image size или натиснете следната комбинация.

Ctrl + Alt + I

ЗабележкаОпцията Resample image ни позволява да променяме размера, без да променяме разделителната способност. Изберете най -подходящата опция за това, от което се нуждаете.

3. Променете цветовия профил на Photoshop

Цветовото пространство, в което работим, също ще повлияе на крайния файл. Трябва да се спомене разликата между sRGB и RGB пространство. Системата Adobe RGB е представена от компанията през 1998 г. и съставя много по -широк спектър от цветове от sRGB пространството. Това не означава, че е по -лошо, а че са посветени на различни цели.

RGB системата е по -близо със своя спектър до този на CMYK, който е ориентиран към света на печат. Въпреки че има повече цветове, стандартът, разпределен цифрово в устройства, било то мобилни телефони, монитори или всяко цифрово устройство, е този на sRGB. Когато едно от тези устройства срещне RGB, то се опитва да компресира излишните цветове и създава фалшив sRGB с по -лоши резултати.

Етап 1
Затова се препоръчва да направите снимките, работното пространство във Photoshop или да ги оптимизирате с тази система, за да подобрите цветовата съвместимост. За да промените работния цветен профил, отидете в менюто Редактиране и изберете Преобразуване в профил.

Стъпка 2
В следващия прозорец ще трябва само да изберете необходимия профил, в този случай sRGB.

4. Компресирайте изображението, без да губите качеството на Photoshop

Форматът JPG.webp е най -използваният стандарт и въпреки че позволява компресиране, той не предлага толкова редактируеми параметри, колкото PNG. Можем да променим крайното тегло на нашето изображение, като преоразмерим снимката си или при експортиране.

Етап 1
Когато записваме като JPEG.webp, виждаме, че имаме две възможности, от една страна, да конфигурираме опциите за изображение (качество), а от друга - опциите за формат. За да направите това, отидете в менюто Файл / Запиши като или следната комбинация и изберете формата JPEG.webp.

Shift + Ctrl + S

Стъпка 2
Тези конфигурационни параметри се появяват в следващия прозорец. Нека да видим какво означава всеки от тях.

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

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

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

• Базова линия („Стандартна“). Той използва използването на формат, разпознаваем от по -голямата част от уеб браузърите и програмите. Понастоящем най -новите програми обикновено не дават несъвместимости.

• Оптимизирана базова линия. Този формат ще създаде файл с изображение, който съдържа оптимизирани цветове, като по този начин ще ви даде по -малък размер.

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

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

5. Компресирайте PNG изображения във Photoshop

Етап 1
За да експортираме като PNG, трябва да направим същата първа стъпка, както и при другите формати, отиваме в File File / Save as и в този случай избираме PNG.

Стъпка 2
Сега ще видите в прозореца за запазване, че се появяват различни опции.

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

WeaveТази опция е важна, особено ако говорим за уеб платформи. Нека видим разликата:

• Нито едното. Тази опция позволява да се показва изображение само когато е напълно заредено, тоест ако имаме бавна или проблемна връзка, изображението няма да се появи, докато не се зареди в Интернет прехвърлянето.

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

6. Запазете JPG.webp изображения за Photoshop web

Етап 1
Една от най -изгодните опции, които имаме във Photoshop за оптимизиране на изображението, е Запазено като мрежа, което ни позволява ръчно да регулираме различни параметри. Това запазване е много полезно за изображения, посветени на качване в мрежата, като позволява качествени изображения, но с намален размер. За целта отиваме File / Save for web или правим следната комбинация.

Alt + Shift + Ctrl + S

Стъпка 2
Ако искаме да изберем JPEG.webp, ще имаме тези настройки.

Качество на изображениетоИзберете предпочитаното от вас качество на изображението от Ниско до Максимално или със стойностите вдясно. Можете да видите вариацията на размера под изображението вляво.

ПрогресивноИзображението ще се зарежда малко по малко, тоест ще преминем от гледането му в ниска разделителна способност към истинското.

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

HaloАко изображението е прозрачно, изберете цвят на ореола, еквивалентен на фона на страницата, където ще бъде вграден.

Вграждане на цветен профилИзберете тази опция, за да запазите ICC профила на изображението, някои уеб браузъри го използват за коригиране на цвета.

Конвертиране в sRGBИзползвайте този профил, за да подобрите цветовата съвместимост на устройства и монитори.

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

7. Запазете PNG изображения за уеб Photoshop

Етап 1
Както вече знаем, за да имаме достъп до Запазено за мрежата в PNG, трябва да отидем до Файл / Запазване за мрежата. Не забравяйте, че този формат е много добър за изображения с уеб дестинация, тъй като резултатът му дава много добра връзка между качеството и теглото на файла.

Стъпка 2
За да експортирате като PNG, изберете го от падащото меню. Не забравяйте, че PNG 24 предлага повече количество цвят, така че размерите са много по-високи от тези на PNG-8. Препоръчваме последното за стандартни уеб изображения. Прозорецът, който се появява, е подобен на този в JPEG.webp и в допълнение към опциите, които вече се виждат в предишния раздел, можем също да изберем:

ПрозрачностТук можете да изберете типа прозрачност, който най -добре подхожда на вашето изображение, или да го премахнете и да изберете определен цвят с Halo.

Подходящ за мрежатаТози параметър позволява допълнително компресиране на изображението, колкото по -висок е процентът на настройка, толкова по -висока е компресията, толкова по -ниско е качеството и по -малък е размерът.

8. Запазване на изображения за Photoshop web

Етап 1
За да можем да извършим автоматично компресиране както за PNG, така и за JPEG.webp, отваряме запазването за мрежата във Файл / Запазване за мрежата или следната комбинация от клавиши.

Alt + Shift + Ctrl + S

Стъпка 2
Вдясно от опцията Предварителни настройки щракнете върху раздела на менюто, което се показва, и изберете Оптимизиране до размера на файла.

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

Стъпка 4
Можете също да отидете в прозореца, наречен 4 копия, и да изберете една от версиите, които ви се предоставят от там, и да я запазите.

Стъпка 5
Ако искате да промените размера и скоростта на прехвърляне, щракнете върху стойностите под изображението и ги изберете автоматично.

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