Как да оптимизираме снимките за нашия уебсайт – бързо, лесно и безплатно.

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

Ето разликата в големината на файл на една снимка.

Снимка направена с телефон Samsung Galaxy A8 e с размер 4608 X 3456 px и е 15.93  MB

Размер  1920 х 1440 px   jpg формат – 2142 KB

Размер 1920 х 1440 px  и оптимизирана на 50 % качество в jpg формат – 245 KB

Размер 1920 х 1440 px  и оптимизирана на 50 % качество в webp  формат – 118 KB

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

Основни видове формати на снимки използвани в уеб пространството.

Основните формати на снимки за съхраняване на изображения са JPG, PNG и WebP. Това са формати с различни особености и предимства.

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

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

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

За оптималността на един уебсайт трябва да се вземат предвид няколко фактора, като изискванията за качество на изображенията, бързината на зареждане на страницата и съвместимостта с различни устройства и браузъри. Обикновено, за снимки с много детайли и фотографии, JPG е добър избор поради по-малкия размер на файла. За графични елементи с прозрачност и текст, PNG може да е предпочитан. Ако съвместимостта с по-стари браузъри не е проблем, WebP може да предложи по-добра оптимизация с по-малък размер на файла и запазване на качеството на изображенията.

Промяна на размер и формат на снимка с GIMP.

Ако използвате CMS (примерно WordPress) има платени и безплатни плъгини, които може да използвате за оптимизация на снимки. Тук ще ви покажа как може да си оптимизирате снимките сами преди да ги качите на вашия уебсайт с GIMP.

GIMP (акроним от GNU Image Manipulation Program) e свободен софтуер с отворен код за редактиране на растерна компютърна графика.

Може да си го изтеглите и инсталирате от тук:

https://www.gimp.org/downloads/

Отворете избраната снимка с десния бутон и избор на GIMP.

Изберете Image / Scale Image

В отворения прозорец запишете желания размер и натиснете бутона Scale.

За снимка на цял екран на вашия сайт,  добър вариант е снимка с ширина 1920 px. Ако поставяте снимка в колона, която е 50 % от екрана, добре е да направите и снимката 50 % от пълния размер (1920 px)

Отидете на File / Save As…

В отворения прозорец натиснете на Select File Type (By Extension)

Изберете  формат, в който искате да запазите снимката и запишете новото име в лентата най-отгоре.

Натиснете Export  и това е всичко. Вече имате снимката в желания размер и формат.

При запазване на снимката в формат webp вместо размера на снимката може да изберете процента на компресия според вашите нужди ( 50% е един добър вариант).

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

Вижте още подобни публикации от същата категория