Ako písať názvy súborov obrázkov, ktoré pomáhajú SEO a prístupnosti

Na názvoch súborov obrázkov záleží, ale nie až tak, ako sa často tvrdí

Názvy súborov obrázkov patria medzi tie drobné webové detaily, okolo ktorých vzniká priveľa istoty. Niektoré tímy ich úplne ignorujú a publikujú IMG_7421.jpg. Iné premenia každú produktovú fotografiu na miniatúrnu esej z kľúčových slov.

Užitočný stred je jednoduchý: píšte názvy súborov, ktoré jasne opisujú obrázok, pomáhajú ľuďom spravovať zdroje a poskytujú vyhľadávačom trochu dodatočného kontextu. Nečakajte, že názvy súborov zachránia slabý obsah, chýbajúci alternatívny text, pomalé obrázky alebo neprehľadnú stránku.

Google výslovne odporúča používať krátke, opisné názvy súborov obrázkov. Je to dobrá rada. Zároveň je to obmedzená rada. Názov súboru je jedna kontextová stopa spomedzi mnohých: okolitý text, názov stránky, štruktúrované dáta, popisky, alternatívny text, odkazy, kvalita obrázka a to, či je obrázok pre stránku skutočne užitočný.

S prístupnosťou je to podobné. Dobrý názov súboru nenahrádza alternatívny text. Môže však znížiť škodu, keď sa niečo pokazí, a uľahčuje život editorom, vývojárom aj používateľom, ktorí si súbor sťahujú, ukladajú alebo zdieľajú.

Krátke pravidlo

Použite názov súboru, ktorý odpovedá na túto otázku:

Ak by niekto videl iba názov súboru, mal by približnú predstavu, čo obrázok obsahuje?

Dobré:

• red-running-shoes-side-view.jpg
• checkout-error-message-mobile.png
• oak-dining-table-120cm-walnut.jpg
• team-planning-workshop-whiteboard.webp

Zlé:

• IMG_7421.jpg
• final-final-v3-new.jpg
• best-cheap-running-shoes-buy-online-discount-sale.jpg
• screenshot.png

Cieľom nie je poézia. Cieľom je užitočná konkrétnosť.

Čo robí dobrý názov súboru obrázka pre SEO

Dobrý názov súboru pomáha vyhľadávačom pochopiť obrázok, najmä v kontexte vyhľadávania obrázkov. Môže podporiť tému stránky a predmet vizuálu.

V porovnaní so základmi je to však slabý signál:

• Obrázok sa nachádza na relevantnej stránke.
• Okolitý text obrázok vysvetľuje alebo podporuje.
• Obrázok má v prípade potreby vhodný alternatívny text.
• Obrázok je prehľadateľný a indexovateľný.
• Súbor nie je zbytočne veľký.
• Stránka sa načítava spoľahlivo.

Ak upravujete obrázky pre organické vyhľadávanie, začnite relevantnosťou a užitočnosťou stránky. Potom upracte názvy súborov. Následne sa pozrite na kompresiu, formáty, rozmery, lazy loading a tam, kde je to vhodné, aj na štruktúrované dáta. Náš sprievodca formátmi obrázkov v roku 2026 je užitočným doplnkom, ak sa úprava pomenovania zmení na širší audit výkonu obrázkov.

Čo robí dobrý názov súboru obrázka pre prístupnosť

Prísne vzaté, názvy súborov nie sú hlavným mechanizmom prístupnosti pri obrázkoch. Tým je alternatívny text.

Ak obrázok sprostredkúva informáciu, atribút alt by mal poskytnúť textovú alternatívu. Ak je obrázok dekoratívny, atribút alt by mal byť zvyčajne prázdny: alt="". Ak je obrázok odkazom alebo tlačidlom, alternatívny text by mal opisovať akciu alebo cieľ, nie iba pixely.

Podrobne sme to rozobrali v pragmatickom sprievodcovi alternatívnym textom obrázkov v roku 2026 a oplatí sa brať alternatívny text ako samostatnú redakčnú úlohu.

Prečo sa teda pri prístupnosti vôbec zaujímať o názvy súborov?

Pretože názvy súborov sa často objavujú na okrajoch používateľskej skúsenosti:

• Niektoré kombinácie asistenčných technológií a prehliadačov môžu zobraziť názov súboru, keď chýba alternatívny text.
• Stiahnuté obrázky potrebujú zrozumiteľné názvy mimo webovej stránky.
• Knižnice médií v CMS sa ľahšie auditujú, keď sú názvy opisné.
• Editori s menšou pravdepodobnosťou pripoja nesprávny obrázok, keď sú súbory jasne pomenované.
• Nefunkčné obrázky a ladiace zobrazenia sa ľahšie interpretujú.

Názov súboru nespraví z neprístupného obrázka prístupný. Zlý názov súboru však môže zlyhania ešte viac zneprehľadniť.

Praktická konvencia pomenúvania

Použite tento predvolený vzor:

subject-detail-context.ext

Príklady:

• espresso-machine-steam-wand-closeup.jpg
• pricing-table-enterprise-plan-desktop.png
• garden-chair-green-metal-front-view.webp
• password-reset-email-example.png

Pri produktoch často lepšie funguje trochu štruktúrovanejšia verzia:

brand-product-model-color-view.ext

Príklady:

• acme-trail-jacket-blue-front.jpg
• northline-desk-lamp-brass-side.webp
• terra-ceramic-mug-white-top-view.jpg

Pri redakčných obrázkoch:

topic-specific-scene.ext

Príklady:

• remote-team-video-call-laptop.jpg
• city-bike-lane-rain-evening.jpg
• developer-debugging-http-headers-terminal.png

Pri snímkach používateľského rozhrania:

feature-state-device.ext

Príklady:

• checkout-validation-error-mobile.png
• account-settings-two-factor-enabled-desktop.png
• analytics-dashboard-empty-state-tablet.png

Nejde o rigidnú taxonómiu. Ide o odstránenie nejednoznačnosti.

Používajte spojovníky, malé písmená a jednoduché slová

Pri verejných webových zdrojoch uprednostnite:

• Malé písmená
• Spojovníky medzi slovami
• Bez medzier
• Bez podčiarkovníkov
• Bez interpunkcie okrem spojovníkov
• Bez špeciálnych znakov, pokiaľ ich váš systém nevyžaduje

Dobré:

blue-cotton-shirt-front.jpg

Vyhnite sa:

Blue Cotton Shirt (Front).jpg

blue_cotton_shirt_front.jpg

bluecottonshirtfront.jpg

Spojovníky sa ľahšie čítajú, ľahšie kopírujú a v URL sa všeobecne chápu ako oddeľovače slov. Malé písmená zároveň pomáhajú predísť otravným chybám s rozlišovaním veľkosti písmen medzi lokálnym vývojom, Linux servermi, CDN a objektovým úložiskom.

Názvy súborov nech sú krátke, ale nie neurčité

Názov súboru by mal byť dosť dlhý na to, aby opísal obrázok, a dosť krátky na to, aby zostal čitateľný.

Užitočný rozsah je zvyčajne 3 až 8 slov pred príponou.

Príliš neurčité:

shoes.jpg

Lepšie:

red-running-shoes-side-view.jpg

Príliš veľa:

best-lightweight-red-running-shoes-for-marathon-training-side-view-discount.jpg

Lepšie:

red-marathon-running-shoes-side-view.jpg

Ak fráza znie ako vyhľadávací dopyt napísaný zúfalým marketérom, pravdepodobne je príliš dlhá.

Neprepĺňajte názvy súborov obrázkov kľúčovými slovami

Preplňovanie názvov súborov kľúčovými slovami je zvyčajne znakom toho, že stránka nerobí svoju prácu.

Zlé:

best-seo-agency-seo-services-seo-consultant-seo-company.jpg

Používateľom to nepomáha. Editorom to nepomáha. Nie je to seriózna prax prístupnosti. Navyše to spôsobuje, že váš web pôsobí menej kvalitne.

Použite prirodzený názov veci zobrazenej na obrázku. Ak sa kľúčové slovo hodí, pretože presne opisuje obrázok, použite ho. Ak nie, vynechajte ho.

Napríklad ak je na obrázku fotografia čiernej koženej pohovky, black-leather-sofa-three-seat.jpg je v poriadku. best-modern-luxury-living-room-furniture-online.jpg nie je názov súboru; je to volanie o pomoc.

Zlaďte názov súboru so skutočným obrázkom

Znie to samozrejme, ale knižnice obrázkov sa časom posúvajú. Súbor s názvom homepage-hero-new.jpg môže napokon zobrazovať iný produkt, inú osobu alebo úplne inú kampaň.

To vytvára dva problémy.

Po prvé, vyhľadávače a používatelia dostávajú nekonzistentné signály. Po druhé, tímy prestávajú dôverovať knižnici médií.

Ak sa význam obrázka zmení, pred publikovaním ho premenujte. Ak váš CMS alebo CDN sťažuje premenovanie, zvážte používanie stabilných interných ID zdrojov a zároveň tam, kde je to možné, generujte opisné verejné názvy súborov.

Dobrý interný pracovný postup môže vyzerať takto:

1. Nahrajte pôvodný zdroj.
2. Odstráňte nepotrebné metadáta, ak záleží na súkromí.
3. Premenujte derivát použitý na webe.
4. Exportujte ho v správnych rozmeroch a formáte.
5. Pridajte alternatívny text a popisky v CMS.

Ak fotografie pochádzajú od používateľov, zamestnancov alebo tímov v teréne, pamätajte, že názvy súborov sú len jednou plochou súkromia. Dáta EXIF môžu obsahovať časové pečiatky, údaje o fotoaparáte a informácie o polohe. Pred publikovaním citlivých obrázkov si pozrite náš návod ako odstrániť metadáta EXIF pred zdieľaním fotografií online.

Oddeľujte názvy súborov od alternatívneho textu

Častou chybou je použiť rovnakú frázu pre názov súboru aj alternatívny text.

Niekedy je to prijateľné. Často je to len lenivosť.

Názov súboru:

red-running-shoes-side-view.jpg

Dobrý alternatívny text na produktovej stránke:

Red running shoe shown from the side, with a white foam sole and black laces.

Dobrý alternatívny text pri miniatúre výberu farby:

Red

Dobrý alternatívny text, ak je obrázok dekoratívny:

alt=""

Názov súboru identifikuje zdroj. Alternatívny text slúži používateľovi v kontexte. Sú to súvisiace úlohy, nie totožné úlohy.

Pomenúvanie obrázkov pre rôzne typy webov

Ecommerce

Uveďte typ produktu, dôležitý variant a pohľad.

Príklady:

• linen-shirt-white-front.jpg
• linen-shirt-white-back.jpg
• linen-shirt-white-collar-detail.jpg

Vyhnite sa pridávaniu cien, akcií alebo dočasného jazyka kampaní. Tie sa menia príliš často.

Blogy a redakčné weby

Opisujte scénu alebo koncept, nie nadpis článku.

Dobré:

designer-reviewing-mobile-layout.jpg

Menej užitočné:

ultimate-guide-to-mobile-ux.jpg

Obrázok môže byť znovu použitý, orezaný alebo syndikovaný. Názov založený na scéne starne lepšie.

SaaS a dokumentácia

Pomenujte snímky obrazovky podľa funkcie, stavu a platformy.

Príklady:

• billing-settings-payment-method-empty-state.png
• project-dashboard-filter-menu-open.png
• api-token-created-confirmation-modal.png

Vďaka tomu sú aktualizácie dokumentácie oveľa menej bolestivé.

Lokálne firmy

Použite službu, objekt alebo lokalitu, keď sú skutočne viditeľné a relevantné.

Príklady:

• bakery-window-display-sourdough-loaves.jpg
• dental-clinic-reception-area-berlin.jpg
• plumber-repairing-kitchen-sink.jpg

Nepridávajte názvy miest do každého súboru, ak to obrázok nepodporuje. Fotografia kľúča nie je zmysluplne wrench-london.jpg.

A čo rozmery a verzie obrázkov?

Nevkladajte rozmery do hlavného opisného názvu, pokiaľ to váš systém nepotrebuje.

Lepšia rodina zdrojov:

• red-running-shoes-side-view.jpg
• red-running-shoes-side-view-800w.jpg
• red-running-shoes-side-view-1600w.jpg

Ak váš build systém automaticky generuje responzívne varianty, nechajte ho pridávať šírky alebo hashe. Neudržiavajte ručne desiatky názvov súborov, pokiaľ vás nebaví budúca archeológia.

Hash obsahu je pri cacheovaní v poriadku:

red-running-shoes-side-view.a8f31c.webp

Opisná časť tam stále je. Hash slúži stroju.

Rýchly kontrolný zoznam pred publikovaním

Pred publikovaním obrázka sa spýtajte:

• Opisuje názov súboru obrázok jednoduchým jazykom?
• Je písaný malými písmenami a slová sú oddelené spojovníkmi?
• Je bez preplnenia kľúčovými slovami?
• Vyhýba sa dočasným slovám ako new, final alebo v2?
• Dáva alternatívny text zmysel v kontexte stránky?
• Je formát a veľkosť súboru vhodná?
• Boli tam, kde je to potrebné, odstránené citlivé metadáta?

Ak na tieto otázky viete odpovedať áno, názov súboru je pravdepodobne dostatočne dobrý. Nestrávte 20 minút pomenúvaním dekoratívneho oddeľovača. Venujte však 20 sekúnd tomu, aby sa z DSC0038.jpg nestala trvalá verejná URL.

<!-- tool-cta:start -->

💡 Vyskúšajte toto: Hromadne normalizujte názvy súborov na lowercase-kebab-case pomocou Case Converter, aby názvy vašich obrázkov zostali konzistentné v celom projekte.

<!-- tool-cta:end -->

Tichý prínos: lepšie tímy

SEO hodnota názvov súborov obrázkov je skromná. Prevádzková hodnota je väčšia.

Dobré názvy súborov robia knižnice médií vyhľadateľnými. Znižujú duplicitné nahrávania. Pomáhajú dizajnérom, vývojárom, marketérom a tímom podpory hovoriť o tom istom zdroji bez otvárania šiestich náhľadov. Zrýchľujú audity.

To je skutočný dôvod, prečo štandardizovať pomenúvanie obrázkov. Z jasnosti profitujú vyhľadávače, ale aj ľudia. A práve pri ľuďoch sa práca zvyčajne pokazí ako prvá.