• photoshop

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

Експортирайте изображения за мрежата

Въпреки че управлението на размера на изображението е основният фактор за оптимизиране на теглото му, има и други относително прости опции за регулиране на теглото на изображението с помощта на инструмента Adobe Photoshop „Save for Web“.

Първо отваряме снимката, върху която се интересуваме, и избираме File> Save for Web.

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

След като дадем „Експортиране ➡️ Запазване за мрежата“, ще се появи поле за опции като това, което ще покажем по-долу.

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

1. Типът файл. Този раздел ни позволява да избираме между JPEG, GIF (на 8 или 24) и PNG. За този конкретен пример ще се занимаем изключително със случая JPEG, тъй като той е най-често срещаният, просто не забравяйте, че GIF файловете се използват преди всичко за запазване на малки анимации и че ще трябва да използваме PNG, ако искаме изображението да запази прозрачността фон, който сме подготвили във Photoshop.

две. Качество на изображението: Тези два раздела са част от магията „Запазване за мрежата“. Позволява ни да избираме между няколко предварително определени качества в левия раздел или да избираме числово вдясно. Колкото по-голям е броят, толкова по-високо е качеството и по-тежко е изображението.

3. Размер на изображението: в това поле с опции е мястото, където ще можем да генерираме повече въздействие, без да губим качеството на изображението си. Обикновено тази стъпка обикновено се прави преди запазване, като се използва Изображение> размер на изображението, но "Запазване за мрежата" ни дава втори шанс да коригираме размера на изображението ни според нужните ни размери. Винаги трябва да използваме изображения с подходящ размер за мястото, което искаме да заемат, не твърде големи, тъй като тежат твърде много и ще направят зареждането на нашия уебсайт твърде бавно, нито твърде малко, тъй като ще загубим качество.

4. Файлова информация: тук ни позволява да оценим промяната в теглото и размера на оригиналното ни изображение (в горното поле, означено като „оригинал“). Четирите раздела точно над изображенията ни позволяват да променим вида на визуализацията, в случая на този пример сме в „2 копия“, което ни позволява да сравним оригиналното изображение с неговото копие, „запазено за мрежата“.

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

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

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

Митът за разделителната способност на изображенията в интернет

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

Както виждаме на това изображение, всички квадратчета имат еднакви размери на височина и ширина, но размерите на пикселите, които ги съставят, са много различни. Само един пиксел се побира в първия квадрат, докато сто може да се побере от всяка страна в последния. Това наричаме пикселна резолюция.

Традиционно изображенията, използвани за висококачествен печат, обикновено използват разделителна способност 300 dpi или „пиксели на инч“, докато изображенията за мрежата традиционно използват разделителна способност 72 dpi, почти четири пъти по-малка плътност на пикселите.

Защо?

Причината е колкото любопитна, толкова и банална: през 1980 г. Apple пусна в продажба първия си компютър Macintosh с 9-инчов екран и разделителна способност 72 dpi, който при работа със своите принтери ImageWriter от 144 dpi, само с два пъти по-голям от разделителна способност, Беше много лесно да мащабирате изображенията, показани на монитора, и потребителите да видят как точно ще изглежда това, което са изпратили на принтера.

Въпреки че беше стандартна разделителна способност, изключителна за Apple, и не беше използвана през годините, много хора все още вярват, че изображенията със 72 dpi ще изглеждат „по-правилни“ в уеб среди и че ще бъдат по-добре оптимизирани, като тежат по-малко.

Но това не е вярно.

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

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

Сега нека видим сравнение на същото изображение, но преизбрано. Това позволява на компютъра да променя размерите на изображението, за да поддържа съотношението между резолюцията и оригиналното изображение. Тоест, поставете го на 300 dpi и пикселите да имат същите пропорции. Както виждаме, тук промяната в размера е очевидна: от 17,6 MB или 18 022,4 KB до само 256,7 KB, почти седемдесет пъти по-малко.

Но какво да кажем за качеството на изображенията? Нека го видим с друг пример: