Blox StudioVisit Website →
← Back to blog

Фотографии за веб: формат, големина и SEO во 2026

October 19, 2026
Фотографии за веб: формат, големина и SEO во 2026

Добрата фотографија за веб-страница е лесна и остра на секој екран. Google ја разбира, а вие имате право да ја користите. Во пракса тоа значи пет работи. WebP е стандардниот формат. Димензиите одговараат на местото каде што се прикажува сликата. Секоја датотека има описно име и alt-текст. Lazy loading се користи само за сликите подолу на страницата. За секоја фотографија што не сте ја снимиле сами имате писмена лиценца. Подолу е целиот процес, чекор по чекор, како го работиме кога изработуваме страници за мали и средни бизниси.

Bloxhost
bloxhost.lol
Веб-страници што изгледаат и функционираат добро
Blox Studio создава функционални, визуелно привлечни веб-страници за мали и средни бизниси, со внимание на видливоста и ангажманот.
Посетете го Blox Studio

TL;DR

  • Формат: WebP за повеќето фотографии и графики, SVG за логоа и икони, PNG само кога ви треба прецизна транспарентност без загуба.
  • Големина: не качувајте фотографија широка 6000 пиксели во кутија широка 600. Подгответе неколку ширини, а прелистувачот нека ја избере вистинската.
  • SEO: описно име на датотеката, природен alt-текст и релевантен текст околу сликата. Google ја разбира сликата преку контекстот, не само преку пикселите.
  • Брзина: главната (hero) слика се вчитува веднаш, сè под првиот екран добива loading="lazy", а секоја слика има width и height.
  • Права: „бесплатно за преземање“ не значи „слободно за комерцијална страница“. Чувајте ја лиценцата и дозволите од луѓето во кадарот.

Содржина

Зошто фотографиите одлучуваат за првиот впечаток

Посетителот на вашата страница прво гледа слика, па дури потоа чита. Најголемиот видлив елемент на првиот екран најчесто е токму фотографија, па таа директно влијае на тоа колку брзо страницата „се појавува“. Addy Osmani во анализата на елементот img и Core Web Vitals објаснува дека сликите влијаат на трите клучни метрики: LCP (колку брзо се прикажува најголемиот елемент), CLS (дали содржината „скока“ додека се вчитува) и интерактивноста на страницата.

Фотографијата значи има две задачи: да продава и да не ја успорува страницата. Убава фотографија од 4 MB на мобилен телефон со слаб сигнал не продава ништо, бидејќи посетителот си заминува пред да ја види. Затоа целиот текст подолу е организиран околу едно прашање: како да добиете максимален визуелен впечаток со минимален товар за страницата.

Кој формат да изберете: WebP, JPEG, PNG, SVG или AVIF

Ако барате кратко правило: користете WebP. Според официјалната документација на Google за WebP, WebP сликите без загуба се 26% помали од споредливи PNG, а сликите со загуба се 25 до 34% помали од споредливи JPEG при еквивалентен квалитет. Форматот поддржува транспарентност и анимација, а Google наведува поддршка во Chrome, Safari, Firefox, Edge и Opera. WebP е формално опишан и во RFC 9649, документот што ја дефинира структурата на форматот и го регистрира неговиот медиумски тип.

ФорматКога го користимеКога го избегнуваме
WebPФотографии на производи, тим, ентериер, позадини, банериРетко: само кога системот на кој работите не го прифаќа
JPEGКако резервна верзија за постари системи, е-пошта, документиКако главен формат на нова страница, ако WebP е достапен
PNGСкриншотови со текст, графики со прецизна транспарентностОбични фотографии: датотеките се непотребно големи
SVGЛого, икони, едноставни илустрации и дијаграмиФотографии: SVG е векторски формат, не е за пиксели
AVIFПроекти каде секој килобајт е важен, со WebP или JPEG како резерваКога немате резервен формат за постари прелистувачи

Како изгледа резервниот формат во пракса

Кога сакате да користите понов формат без ризик, HTML го нуди елементот <picture>. Прелистувачот ја зема првата верзија што ја разбира:

<picture>
  <source srcset="enterier.avif" type="image/avif">
  <source srcset="enterier.webp" type="image/webp">
  <img src="enterier.jpg" width="1200" height="800"
       alt="Ентериер на кафулето со дрвени маси и природна светлина">
</picture>

Најголемиот дел од современите CMS системи и додатоци за оптимизација ова го прават автоматски. Сепак, проверете во кодот на страницата дали навистина се испорачува WebP или AVIF, а не оригиналниот JPEG што сте го качиле.

Фотографии и илустрации: кога што

Дали за веб-страница е подобро да се користат вистински фотографии или илустрации? Одговорот зависи од тоа што треба сликата да докаже.

Фотографијата докажува дека нешто постои. Вашиот локал, вашиот тим, вашиот производ, завршениот проект за клиент. Ако продавате услуга што човек сака да ја види пред да ја купи, фотографијата е незаменлива. Генеричка stock фотографија со насмеани луѓе во канцеларија тука прави повеќе штета отколку корист: посетителот препознава дека тоа не сте вие.

Илустрацијата објаснува нешто што не може да се фотографира. Процес во четири чекори, апстрактна услуга како софтвер или осигурување, иконите покрај листата бенефити. Илустрациите во SVG формат се остри на секој екран и најчесто тежат само неколку килобајти.

Најчесто се комбинираат. На типична бизнис страница, hero делот и страницата „За нас“ користат вистински фотографии, а секциите со услуги и процеси користат икони и илустрации. Важно е стилот да е доследен: исти бои, иста дебелина на линиите кај иконите, сличен тон и светлина кај фотографиите.

Колку големи треба да бидат сликите

Тука најчесто се губат и брзината и квалитетот. Фотографија од современ телефон или фотоапарат лесно има над 4000 пиксели ширина и неколку мегабајти. Веб-страницата ретко прикажува слика поширока од самиот екран.

Нашето работно правило, а не формален стандард, изгледа вака:

  1. Измерете ја кутијата. Проверете колку пиксели е широка областа каде што сликата се прикажува на десктоп и на мобилен.
  2. Подгответе две до четири ширини. На пример, 480, 800, 1200 и 1600 пиксели за слика преку цела ширина. За екрани со висока густина (ретина) ви треба приближно двојно поширока слика од кутијата.
  3. Оставете го прелистувачот да избира. Со атрибутите srcset и sizes прелистувачот ја презема само верзијата што одговара на екранот.
  4. Компресирајте според окото, не според бројката. Споредете ја компресираната и оригиналната верзија на 100% зум. Ако не гледате разлика, компресијата е добра.
  5. Исечете го кадарот за мобилен. Ако во широк пејзажен кадар човекот стои на работ, на мобилен тој станува ситна точка. Понекогаш е подобро да подготвите посебен, поблизок кадар.

Пример со повеќе ширини:

<img src="tim-800.webp"
     srcset="tim-480.webp 480w, tim-800.webp 800w, tim-1200.webp 1200w"
     sizes="(max-width: 700px) 100vw, 50vw"
     width="1200" height="800"
     alt="Тимот на студиото во разговор со клиент над скици на веб-страница"
     loading="lazy">

Колку големи треба да бидат сликите — overview diagram

Како Google ги разбира фотографиите на вашата страница

Пребарувачот не „гледа“ слика како човек. Во објавата 1000 зборови за сликите од Google Search Central се објаснува дека Google се потпира на контекстот: текстот на страницата, насловот, името на датотеката, anchor текстот на линковите, alt-текстот, легендата под сликата и image sitemap. Истиот текст наведува дека Google може да индексира слики во форматите BMP, GIF, JPEG, PNG и WebP. Сликата треба да е вметната во HTML-от така што пребарувачот може да ја пронајде.

Од тоа произлегуваат неколку конкретни практики:

  • Име на датотеката: IMG_4821.jpg не кажува ништо. renovirana-kujna-dabovo-drvo.webp кажува многу. Користете латиница, мали букви и цртички.
  • Alt-текст: во една реченица опишете што навистина се гледа, како да ја опишувате сликата на човек што не ја гледа. Не набројувајте клучни зборови.
  • Локација и услуга само кога се вистинити: ако на фотографијата е вашиот салон во одреден град, напишете го тоа. Ако е stock фотографија, не тврдете дека е вашиот простор.
  • Текст околу сликата: фотографијата на производот треба да стои до описот на тој производ, а не во изолирана галерија без ниту еден збор.
  • Декоративни слики: позадините и шарите што не носат информација добиваат празен alt="", за програмите за читање екран да ги прескокнат.

Важна е мобилната верзија

Google ги индексира страниците првенствено според нивната мобилна верзија. Во објавата за mobile-first индексирање Google препорачува мобилната страница да ги содржи истите квалитетни слики и истиот alt-текст како десктоп верзијата. Ако темата на мобилен ги крие фотографиите или ги заменува со мали, нејасни верзии, губите дел од видливоста во пребарувањето слики.

Брзина: што се вчитува веднаш, а што подоцна

Lazy loading значи дека прелистувачот ги презема сликите дури кога посетителот ќе стигне до нив. Во примерот на Addy Osmani почетното преземање паѓа од околу 1,1 MB слики на околу 90 KB кога сликите надвор од првиот екран се вчитуваат подоцна. За страница со галерија, портфолио или каталог разликата е огромна.

Но истиот извор предупредува на најчестата грешка: lazy loading на главната слика. Hero фотографијата најчесто е LCP елементот, и ако прелистувачот ја одложи, страницата изгледа побавна, а не побрза. Ова е редоследот што го применуваме:

  1. Hero сликата без lazy loading. Таа се вчитува веднаш, а може да добие и fetchpriority="high" за прелистувачот да ја преземе пред другите ресурси.
  2. Сите слики со width и height. Така прелистувачот однапред резервира простор и текстот не скока кога сликата ќе пристигне. Ова директно ја подобрува метриката CLS.
  3. loading="lazy" за сè под првиот екран. Галерии, фотографии во блог-статии, логоа на клиенти на дното на страницата.
  4. Responsive извори. Со srcset и sizes мобилниот телефон не ја презема десктоп верзијата.
  5. Проверка на вистински уред. Пуштете Lighthouse во Chrome и отворете ја страницата на постар телефон преку мобилен интернет, не само на брзиот компјутер во канцеларија.

Права и лиценци: најскапата грешка

Технички совршена фотографија може да стане проблем ако немате право да ја користите. Светската организација за интелектуална сопственост (WIPO) во текстот за авторското право во дигиталниот свет потсетува дека делата објавени на интернет, на веб-страница или социјална мрежа, генерално се заштитени со авторско право. Тоа што сликата се појавува во Google Images не значи дека е слободна.

Често се заборава и друго: лиценцата за самата фотографија не мора да ги покрива луѓето, брендовите, уметничките дела или објектите што се гледаат на неа. WIPO во водичот за проверка и расчистување на правата препорачува проверката на правата да почне рано, дозволите да бидат писмени и сè да се евидентира. Водичот е наменет за филмаџии, но истата логика важи и за веб-страница.

Во пракса, за секоја фотографија на страницата чувајте:

  • изворот (URL или име на фотографот) и датумот на преземање;
  • текстот или скриншот од лиценцата во моментот на преземање;
  • писмена дозвола (model release) од препознатливите луѓе на фотографијата, вклучително и вработените;
  • договор со фотографот кој јасно кажува дали смеете фотографиите да ги користите на веб, во реклами и на социјални мрежи.

Законите за авторско право се разликуваат од држава до држава. Ако планирате кампања со фотографии на трети лица или купувате ексклузивни права, договорот нека го прегледа правник што работи со интелектуална сопственост во вашата земја.

Чеклиста пред да ја објавите страницата

  • Секоја фотографија е во WebP (или AVIF со резервен формат), а логото и иконите се во SVG.
  • Ниту една слика не е значително поширока од двојната ширина на најголемата кутија во која се прикажува.
  • Имињата на датотеките се описни, со латиница и цртички.
  • Alt-текстот опишува што се гледа, а декоративните слики имаат празен alt.
  • Hero сликата се вчитува веднаш, а останатите имаат loading="lazy".
  • Секоја слика има width и height.
  • Мобилната верзија ги прикажува истите важни фотографии.
  • За секоја фотографија имате лиценца или договор во проектната архива.
  • Страницата е проверена со Lighthouse и на вистински телефон.

Нашата перспектива

Кога работиме со мали и средни бизниси, ретко гледаме проблем со „погрешниот формат“. Почесто гледаме добри фотографии на погрешно место: портфолио без ниту една реченица опис, hero слика од неколку мегабајти, фотографија од тимот именувана final_final2.jpg. Секоја од овие грешки поединечно изгледа ситна, а заедно ја прават страницата бавна и невидлива во пребарувањето.

Затоа фотографиите ги планираме заедно со структурата и текстот, а не на крајот. Прво прашуваме што треба да докаже секоја страница. Потоа одлучуваме дали тоа најдобро ќе го покаже вистинска фотографија, илустрација или икона. Дури тогаш се занимаваме со формати и компресија. Современите технологии, како WebP, responsive слики и паметно вчитување, се само алатка. Целта е посетителот веднаш да ве препознае и да остане доволно долго за да ви се јави. Нашиот совет: вложете во едно добро фотографирање на вашиот простор, тим и работа, наместо во уште еден пакет генерички stock слики. Една вистинска фотографија од вашата работа носи повеќе доверба од десет туѓи.

— Peter

Кога сакате ние да се погрижиме за тоа

Ако подготвувате нова страница или редизајн и не сакате сами да се занимавате со формати, alt-текстови и брзина, ние во Blox Studio изработуваме веб-страници по мерка за мали и средни бизниси, претприемачи, маркетинг агенции и организации. Фотографиите ги вклопуваме во дизајнот така што страницата изгледа добро, се вчитува брзо и му помага на Google да разбере што нудите. Испратете ни краток опис на проектот и ќе ви предложиме решение прилагодено на вашите потреби.

Најчести прашања

Што е WebP формат и дали сите прелистувачи го прикажуваат?

WebP е формат за слики развиен од Google кој поддржува компресија со и без загуба, транспарентност и анимација. Според Google, го поддржуваат Chrome, Safari, Firefox, Edge и Opera, а тоа ги покрива речиси сите посетители. За многу стари системи можете да додадете JPEG како резервна верзија преку елементот picture.

Дали да ги претворам сите постоечки JPEG слики во WebP?

За фотографиите што се прикажуваат на страницата, да: добивате помали датотеки со ист визуелен квалитет. Оригиналите чувајте ги во архива, бидејќи секое повторно компресирање губи детали. Многу CMS системи можат автоматски да ги конвертираат сликите при качување.

Колку треба да тежи една фотографија за веб?

Нема универзална бројка, тежината зависи од димензиите и содржината на сликата. Подобро прашајте се дали сликата е поголема отколку што е потребно за кутијата каде се прикажува. Ако сте ја намалиле на вистинската ширина, сте ја зачувале во WebP и не гледате разлика од оригиналот, тежината е најчесто во ред.

Дали смеам да користам слики од Google за мојата бизнис страница?

Не без проверка. Повеќето слики на интернет се заштитени со авторско право, а Google Images само ги прикажува и не ви дава право да ги користите. Користете сопствени фотографии, слики со јасна комерцијална лиценца или ангажирајте фотограф со писмен договор.

Дали alt-текстот навистина помага за SEO?

Да. Google го наведува alt-текстот како еден од сигналите со кои ја разбира содржината на сликата, заедно со името на датотеката и текстот околу неа. Тој е важен и за пристапноста, бидејќи го читаат програмите за читање екран. Пишувајте го за човекот, не за пребарувачот.

Извори

Built with BabyLoveGrowth