Когато повечето хора говорят за съдържанието на уебсайта си, те обикновено имат предвид текста. Дали той е достатъчно добър? Дали съдържа правилните ключови думи? Съдържанието на даден уебсайт обаче, включва и изображения. Много рядко ще попаднете на сайт, който няма никакви картинки, а ако все пак попаднете на такъв, той вероятно е бил създаден преди повече от десетилетие. Изображенията са важни за цялостното потребителско изживяване, тъй като те спомагат за по-бързото и по-лесно възприемане на информация от страна на хората. Те могат да направят даден сайт да изглежда уникален, затова трябва да обърнете внимание на изображенията, които добавяте на сайта си.
Изображенията могат също да повлияят на скоростта и на производителността на сайта. В тази статия ще разгледаме няколко популярни файлови формата за изображения и ще видим кои са най-подходящи за употреба на уебсайт. Ще Ви дадем и няколко полезни съвета как да подобрите изображенията на сайта си.
Файлови формати за изображения
Ще се концентрираме основно върху два формата - WEBP, който стана много популярен в последно време, и PNG, който вече е широко използван на много сайтове. Ще разгледаме и няколко други формата, които се използват в мрежата, но не много подробно, тъй като те не са толкова популярни (и с право).
WEBP
Това е формат за изображения, разработен от Google през 2010 г. Той използва същата технология, която стои зад видео кодека VP8. WEBP предлага компресия както със загуба на качеството (премахва се част от информацията в изображението), така и без загуба на качеството (премахва се само ненужна информация), а така размерът на изображението се намалява значително. Форматът е уникален, тъй като е разработен специално за изображения на уебсайтове.
Може да не сте чували за WEBP, тъй като допреди няколко години форматът нямаше широка поддръжка. Въпреки масираната рекламна кампания от страна на Google, дълго време Chrome беше единственият уеб браузър, поддържащ формата. Firefox добави поддръжка през 2019 г., а Safari предлага само частична поддръжка дори днес. Internet Explorer изобщо не поддържа WEBP изображения (но той така или иначе е много стар, така че ако все още го използвате, е препоръчително да се насочите към по-модерен браузър). В днешно време, браузърите, които поддържат формата, имат около 95% пазарен дял.
Поддържа изображения с високо качество. Изображенията Ви ще имат високо качество, независимо от размера им. Това определено ще остави добро впечатление у посетителите на сайта Ви.
Повишава производителността на сайта. По-малките изображения се зареждат по-бързо, а това от своя страна ще намали времето за зареждане на целия Ви уебсайт.
Пести трафик. По-малкият размер на изображенията означава, че те ще генерират по-малко трафик, когато хората зареждат сайта Ви. Макар че Вие може да използвате хостинг план с висока трафик квота или дори с неограничен трафик, някои от посетителите на сайта Ви може да имат ограничения на интернет връзката си. Те със сигурност ще оценят, че разглеждайки сайта Ви, няма да изразходват прекалено много от трафика си. Това е особено важно, ако сайтът Ви съдържа голям брой изображения, като например блог за пътувания или фотографски сайт.
Пести дисково пространство. Повечето хостинг планове в днешно време предлагат значително дисково пространство, но ако то все пак е ограничено, използването на WEBP може да Ви спести пространство в сравнение с други формати.
Поддържа различни видове изображения. WEBP е универсален формат, който е създаден с идеята да е единственият формат, от който имате нужда. Ето защо, той поддържа не само стандартни изображения, но и анимирани, и такива с прозрачен фон. Това е единственият формат, който поддържа и двете неща.
Не се поддържа от някои приложения. Не всички уеб браузъри го поддържат. WordPress 5.8+ поддържа WEBP по подразбиране, но ако използвате по-ранна версия, ще Ви трябва плъгин. Това важи и за други приложения, включително такива за редактиране на изображения. Photoshop, например, започва да поддържа WEBP без допълнителен плъгин едва през 2022 г.
Не се поддържа от някои платформи. Макар че можете да добавите плъгин към някоя платформа за управление на съдържание, не можете да направите това с облачен сайт билдър. Някои популярни платформи като Squarespace просто не поддържат WEBP, така че ако ги използвате, няма да можете да се възползвате от преимуществата на този формат.
PNG
PNG, или Portable Network Graphics, е формат, предлагащ компресия без загуба на информация, който е създаден през 1994 г., и утвърден като един от основните файлови формати за медийни файлове в интернет през 1997 г. PNG е разработен, за да поправи някои от недостатъците на GIF формата (повече за него ще прочетете по-надолу).
Компресия без загуба на информация. Качеството не се губи независимо колко оразмерявате изображението.
Поддържа истински цветове. Посетителите на сайта ще виждат изображения с до 16 милиона цвята.
Поддържа прозрачен фон. Преди появата на WEBP формата, PNG е единственият формат, който поддържа прозрачен и полупрозрачен фон. Тъй като този формат се поддържа почти навсякъде, няма да е лесно да намерите по-добро решение, ако искате да използвате изображения с прозрачен фон.
Приет е за стандарт в индустрията. Много приложения използват PNG като формат по подразбиране за различни цели. Лого, например, почти винаги се създава като PNG изображение.
Поддържа т.нар. image interlacing. Това е бързо сваляне на цялото изображение с цел да може то да се прегледа с ниско качество, докато се свали изцяло.
По-подходящ е за текст и графики. По-високото качество прави по-лесно четенето на графики, текст и т.н.
Не поддържа анимации. Ако това е нещо, от което имате нужда, ще трябва да изберете друг формат за изображения.
По-голям от някои формати. PNG поддържа компресия без загуба на информация, но това си има цена - изображенията са малко по-големи отколкото ако използваха някои други формати, които можете да изберете. Въпреки това, PNG изображенията са по-малки от други формати, а понякога си струва да използвате малко по-големи изображения заради по-доброто качество.
GIF
Този формат е популярен с две неща - анимираните изображения и непрекъснатия спор относно произношението (Гиф или Джиф), който може да сте виждали някъде в мрежата. GIF е съкращение за Graphics Interchange Format. Създаден през 1987 г. от компютърния специалист Стивън Уилхайт, GIF е първият цветен формат за сваляне на изображения, който замества черно-белите формати, използвани дотогава. Възможността за повтарящи се анимации е добавена през 1995 г., което увеличава популярността на формата още повече. В днешно време GIF файлове се използват основно за графики и миймове, но можете да намерите и голям брой други видове изображения в този формат на различни сайтове.
Поддържа анимации.
Малък размер на файла.
Без загуба на качеството.
Поддържа се от всички браузъри.
Ограничен брой цветове. Форматът поддържа 256 цвята, така че изображенията може да не изглеждат много добре.
Не може да се редактира. Веднъж създадено, изображението не може да се редактира. Ако искате да направите промяна, ще трябва да създадете изображението отначало.
Може да е по-голям от други формати.
JPEG
JPEG, или JPG, е съкращение на Joint Photographic Experts Group – организацията, която създава формата през 80-те години. Форматът е много популярен, тъй като се използва по подразбиране от много цифрови фотоапарати и принтери. Популярен е и за сайтове, тъй като поддържа богата палитра от цветове, което го прави подходящ за фотографи, създаващи онлайн портфолио. Тъй като много хора качват снимки директно, без да ги конвертират, JPEG е един от най-използваните формати в мрежата.
Недостатъкът при използването на JPEG e, че компресията на формата е със загуба на информация, така че ако намалите размера на някое изображение, резултатът ще е с по-ниско качество. JPEG изображенията с добро качество обикновено са значително по-големи по размер от други формати.
BMP
Битмап форматът (BMP) се използва за черно-бели и цветни изображения с различен брой цветове. Форматът е подходящ за запазването на снимки с много високо качество. Това обаче, си има цена. BMP изображенията са много големи, което ги прави неподходящи за сайтове. Освен ако нямате много основателна причина да го правите, не трябва да използвате BMP изображения на сайта си в никакъв случай. Една единствена картинка в този формат може да е по-голяма по размер от цялата страница, на която е добавена.
SVG
SVG, или Scalable Vector Graphics, се появява през 1999 г. Векторните формати позволяват неограничено оразмеряване на цялото изображение или само на част от него, без никаква загуба на качеството. Те се базират на математически формули, а не на пиксели.
SVG изображенията се поддържат от всички уеб браузъри и могат да се увеличават без да се компрометира тяхното качество. Колкото повече елементи добавите към дадено изображение, толкова по-голямо по размер ще стане то. Използването на SVG изображения може да забави сайта Ви, тъй като те трябва да се заредят изцяло преди да бъдат изобразени на екрана. Ето защо, форматът се използва за малки изображения като иконки на меню или лого на сайт, но не и за изображения на страниците на сайта.
Съществуват и други формати, но те не са създадени за уебсайтове, затова браузърите няма да ги зареждат като изображения. Тях можете да използвате в приложения за обработка на изображения или за други цели, затова няма да ги споменаваме в статията ни.
И така, изводът е…
С оглед на горната информация, трябва да използвате или WEBP, или PNG за изображенията на сайта си. И двата формата предлагат отлично качество независимо от размера на изображенията, като и двата поддържат безцветен фон. Както WEBP, така и PNG може да Ви спести дисково пространство и трафик, което пък може да подобри производителността на сайта Ви.
Разбира се, в зависимост от целта, за която са Ви нужни изображенията, можете да използвате и друг формат. JPEG, GIF и SVG изображенията все още са често срещани. Помислете за какво ще използвате изображенията на сайта и по колко ще имате на всяка страница. Дали искате да добавите лого или Ви трябва анимирана картинка? Дали ще добавите няколко снимки с текст, или планирате да добавите цяла галерия от снимки на една страница? Очевидно някои формати са по-добри от други за конкретни неща. Ако цялата Ви страница е с размер 2 MB, например, не трябва да добавяте изображение, което е 4 MB. Който и формат да изберете, винаги трябва да поставяте потребителското изживяване и удовлетвореността на посетителите на сайта на първо място.
Няколко съвета за изображенията на уебсайта Ви
- Подобрете оптимизацията за търсачки с правилните имена. Оптимизацията за търсачки не се изчерпва само с текста на сайта Ви. Можете да докарате допълнителен трафик, ако използвате подходящи имена и alt тагове. Използвайте описателни имена за изображенията си, като например large_pink_flower.png или chervena_kola.png вместо image001.png. Така е много по-вероятно това изображение да излиза в резултатите при търсене, а оттам хората ще стигнат до Вашия уебсайт.
Подходящите имена често се пренебрегват от собствениците на сайтове, а това е една пропусната възможност. Същото важи и за alt (alternative) таговете - това е HTML атрибут, който се показва, когато изображението не може да се зареди по някаква причина. Това обикновено е кратко описание, за да знаят хората какво трябва да се показва вместо празното поле за изображение. Някои търсачки гледат и alt таговете, така че можете да помогнете в някаква степен на сайта си да излиза при търсене, ако отделите малко време да добавите правилното заглавие на всяко изображение.
- Компресирайте изображенията (но не прекалено много). Когато става дума за компресия, някои формати очевидно са по-добри от други. Можете да изберете най-подходящия формат на базата на ясни критерии. Трябва обаче, да имате предвид и реалния размер на изображението. Ако имате голямо изображение, смалете го възможно най-много, запазвайки качеството му. Не го добавяйте в оригиналния му размер разчитайки, че браузърът на посетителите на сайта ще го оразмери, когато те отворят страницата. Макар че това всъщност ще се случи и хората ще видят изображението както трябва, браузърът ще трябва първо да го зареди в пълния му размер. Това ще обезсмисли всякакво преимущество, което би Ви донесла употребата на добър файлов формат.
Ето защо трябва да обмислите да компресирате изображенията си до известна степен - уверете се, че изглеждат добре както на сайта, така и ако някой отвори само тях в отделен таб. Всяко самостоятелно изображение може да е малко по-голямо, отколкото е изобразено на сайта, на който се зарежда.
- Използвайте “мързеливо зареждане”. Това е т.нар. lazy loading. Ако използвате тази техника на сайта си, изображенията ще се зареждат едва когато посетителите стигнат до тях, но не и преди това. Ако имате повече от няколко изображения на някоя страница или няколко много големи изображения, ще отнеме повече време да се зареди цялата страница, тъй като всички изображения ще трябва да се заредят накуп. С “мързеливото зареждане” ще се заредят единствено изображенията във видимата част на страницата. Останалите изображения ще се заредят, когато посетителят скролира до тях. Използвайки тази техника, ще забързате сайта си, ще намалите общото време за зареждане и ще спестите малко трафик както на себе си, така и на посетителите на сайта.
- Използвайте подходящи изображения. Цялото съдържание, което добавяте на сайта, трябва да е там с причина. Едва ли бихте добавили произволен текст, така че не трябва да го правите и с изображенията. Когато добавите ново изображение, се запитайте дали това е правилното място за него и дали то е най-подходящото изображение. Правилните изображения ще привлекат вниманието на посетителите на сайта, а описанието им може да помогне в някаква степен на сайта да се показва на по-предна позиция в резултатите на търсачките.
- Използвайте уникални изображения, ако е възможно. Понякога е в реда на нещата да използвате стокови изображения, ако те ще се впишат в останалата част от съдържанието на сайта Ви. Ако Ви трябва изображение за фон, например, стоково изображение е идеален избор. Във всички останали случаи обаче, трябва да се опитате да използвате уникални изображения. Хората лесно могат да разпознаят стоковите изображения, така че ако използвате уникални изображения, ще промените начина, по който хората виждат сайта Ви. Уникалните изображения означават уникално съдържание; стоковите изображения може да породят съмнения у хората дали и текстовете на сайта Ви са оригинални или не.
Полезни инструменти
Ще намерите голям брой полезни инструменти, които можете да използвате, за да намирате и редактирате изображения за сайта си. Ще намерите някои от тях по-долу. Нито един от тези инструменти не изисква да инсталирате допълнителен софтуер на компютъра си.
Търсене на изображения
В зависимост от това за какво са Ви нужни изображенията, има различни начини да ги получите.
Най-добрият вариант е да ги направите сами или да наемете фотограф. Така ще имате уникални снимки, които са направени точно по начина, по който Ви трябват. Те ще са направени от правилния ъгъл и ще включват съдържанието, което желаете - ястие в ресторант или забележителност за блог за пътувания, например. Уникалните изображения могат да добавят стойност към съдържанието Ви.
Ако не Ви трябва уникално изображение, може да използвате някоя онлайн библиотека. Ще намерите както платени, така и безплатни изображения онлайн. Ето няколко такива библиотеки:
Нашият Сайт билдър включва вградена библиотека за изображения и илюстрации. Можете да избирате измежду хиляди безплатни и професионални снимки и графики, и да добавите всяка от тях към сайта си с няколко клика. Всяко изображение, което добавите/закупите, ще бъде добавено към галерията Ви на момента, така че ще можете да го използвате на всяка страница, която искате.
Ако искате да създадете инфографика, можете да използвате инструменти като например:
Компресиране на изображения
Има различни начини да компресирате изображение. Ако използвате WordPress, например, най-лесният начин е да добавите плъгин като Smush, EWWW Image Optimizer, или TinyPNG. Ако създавате сайт ръчно или приложението, което използвате, не поддържа модули за компресиране, можете да използвате онлайн инструмент като:
Конвертиране на изображения
Можете лесно да конвертирате изображенията си от един формат към друг. Вероятно ще е по-лесно да използвате софтуер на компютъра си, но ако не можете да инсталирате приложения, можете да намерите всичко, от което имате нужда, онлайн. Имайте предвид, че в зависимост от оригиналния и изходния формати, изображенията може да изгубят част от качеството си.
https://convertio.co/image-converter/
В заключение
Трябва да обърнете внимание на изображенията на сайта си. Те могат да са също толкова важни, колкото останалото съдържание на сайта, а понякога дори по-важни, ако съставляват по-голямата част от съдържанието. Има различни формати, от които можете да избирате, а кой ще изберете зависи от целта, за която са Ви нужни изображенията. Един формат може да е по-подходящ за лого с прозрачен фон; друг може да е по-добрият избор за висококачествени снимки или икони на меню. Ако два или повече формата са подходящи за дадена цел, може да сравните техните предимства и недостатъци.
Уверете се, че използвате подходящи изображения и ако е възможно, нека те да са уникални. Ако искате да подобрите производителността на сайта, компресирайте изображенията до приемлив размер и използвайте мързеливо зареждане. С цел по-добра оптимизация за търсачки, не забравяйте да зададете подходящи имена на изображенията си. В крайна сметка, трябва да използвате всяка възможност, за да изпреварите конкурентите си.
