---
title: "Vše, co potřebujete vědět o obrázcích pro web"
date: 2019-04-16
author: "Michaela Bartáková"
featured_image: "https://www.bartvisions.cz/wp-content/uploads/2019/04/jak-spravne-upravit-obrazky-pro-web.jpg"
categories:
  - name: "Web a eshop"
    url: "/rubrika/web-a-eshop.md"
---

# Vše, co potřebujete vědět o obrázcích pro web

Nahrávání obrázků na web není žádná věda. Přesto je důležité nezapomenout při nahrávání obrázků na jejich velikost. Příliš velké obrázky se totiž návštěvníkům třeba vůbec nenačtou (například z důvodu pomalého internetového připojení.). Což může mít negativní vliv na dohledatelnost vašeho webu ve vyhledávačích. A to ani není ta nejhorší možnost. Velké obrázky mohou totiž návštěvníkům také vyplýtvat mobilní data, čímž si věrného fanouška jistě nezískáte. Na co všechno si tedy dávat u obrázků na web pozor a existuje jejich ideální velikost a formát?

## Co je to datová velikost obrázku?

Datová velikost obrázků je nejspíš nejdůležitějším číslem, se kterým se při nahrávání obrázku na web setkáte. Taková obyčejná fotografie může mít třeba 5 MB, což sice není na první pohled tolik, ale co se stane, když jich na web nahrajete třeba deset? Na počítači se váš web bude návštěvníkům nahrávat celou věčnost a na mobilu přijdou o data. Ani jedna varianta nebude dělat radost jim ani vám. Pomalé načítání webu má významný vliv také na SEO. Pokud si tak budete web zbytečně zpomalovat příliš velkými obrázky, v Googlu a na Seznamu vás mohou významě penalizovat.

## Pár tipů na práci s obrázky

- **Správný formát:** Ideální formát obrázku je .jpg, pokud chcete obrázek s průhledným pozadím, neuděláte chybu ani s .png, v tom případě však počítejte s jeho větší datovou velikostí.
- **Pozor na název obrázku:** Název obrázku by neměl obsahovat diakritiku, dvojtečky, pomlčky atp., zkrátka žádné speciální znaky. Tím si jen zaděláváte na problém do budoucna. Obrázek vždy nahrávejte se správným názvem.
- **Obrázky na Facebook:** [Jaká je správná velikost obrázků na Facebook](https://www.bartvisions.cz/2019/01/jak-si-poradit-s-velikosti-fotek-na-facebooku/) i o tom, jak s obrázky tato sociální síť nakládá jsme si napsali minule. Rozhodně si tento článek nenechte ujít.
- **Obrázek zdarma:** Na internetu můžete najít pár fotobank, ze kterých je možné stahovat a používat obrázky legálně zdarma. Při stahování obrázků z internetu si vždy raději dvakrát ověřte, zda ho můžete pro svůj účel použít.

## Ideální datová velikost obrázku

Pokud se bavíme pouze o datové velikosti, odpověď je snadná. Čím menší datová velikost, tím lépe. Maximální datová velikost obrázku na web by měla být 500 kB, a to jen v případě, že se jedná o obrázek na celé pozadí vaší stránky. Ideální datová velikost obrázků pro blog je kolem 100kB – 200kB, u ikonek a doprovodné grafiky jsou datové velikosti v jednotnách kB. Jak ale takovou fotografii, která má klidně 5 MB zmenšit, abychom ji mohli na web dát bez strachu, že ho zpomalí?

## Jak upravit datovou velikost obrázku

K tomu slouží několik prográmků, které vám se změnou pomohou. Grafici nejčastěji používají **Adobe Photoshop**. Jedná se však o placený program, jehož potenciálu určitě nevyužijete, pokud s grafikou nepracujete pravidelně. Variantou Photoshopu, kterou si můžete stáhnout zdarma je **GIMP**, který nabízí také spoustu možností práce s obrázky, včetně změny jejich velikosti.  
Pokud však budete pracovat opravdu pouze s úpravou velikosti, postačí vám například program Fotky, které Microsoft nabízí v součásti svého Office balíčku. V klasickém Malování si pak můžete snadno upravit velikost obrázku v pixelech, na datovou velikost však úprava v tomto programu nebude mít vliv.  
V případě online nástrojů, které neznáte však vždy existuje nebezpečí, že dojde ke zneužití vašeho e-mailu. Jedná se však o velmi pohodlný a rychlý způsob změny velikosti, pojďme se na něj podívat.

## Online nástroje na úpravu obrázků jsou nejjednodušší, mají však svá rizika

Nejjednodušší variantou je pak použít online nástroj na úpravu velikosti, například [Tinypng.com](https://tinypng.com) nebo [ResizeImage.net](https://resizeimage.net), kam jen obrázek nahrajete, zadáte požadovanou velikost a formát obrázku, který vám přijde obratem e-mailem, nebo si ho stáhnete přímo z webu.

## Ideální velikost obrázků na web

Kromě datové velikosti obrázků na web se budete ještě muset vypořádat s jeho rozměry. Zvolit ideální rozměry obrázku je většinou otázkou experimentů a záleží na řadě faktorů. Jedná se o obrázek, který doprovází váš blogový příspěvek, nebo o záhlaví webu?  
Pokud se jedná o nejčastěji používaný ilustrační obrázek do článku, doporučujeme experimentovat s velikostí kolem čísel 900px (šířka) a 1800px (výška), určitě ale vždy záleží na konkrétním webu a použití obrázku.  
Wordpress umožňuje experimenty přímo ve své administraci poté, co obrázek nahrajete (mimochodem, můžete zde upravovat i jeho datovou velikost).  
Pokud na webu pracujete s profesionálními grafiky a webaři, výsledná velikost může být odlišná, protože je grafika vždy přesně na míru vašim potřebám.

Pokud chcete obrázek do záhlaví webu nebo na celou stránku, opět to bude otázka experimentů – určitě neuděláte chybu, pokud se s žádostí o pomoc obrátíte přímo na nás. Rádi vám poradíme a pomůžeme.