Systém správy obsahu WordPress ponúka možnosť používať okrem štandardných veľkostí obrázkov aj individuálne formáty obrázkov. Predstavujeme dôležité kroky k prispôsobeniu veľkostí obrázkov na základe WordPress 6.0.3.

Predvolené veľkosti obrázkov v WordPress

Veľkosť súborov obrázkov vložených na webovú stránku má veľký vplyv na jej rýchlosť načítania. Optimálne formáty obrázkov skracujú čas načítania a znižujú zaťaženie pamäte servera. CMS WordPress ponúka pri nahrávaní médií na server súbor štandardizovaných veľkostí obrázkov.

Štandardné veľkosti obrázkov WordPress Veľkosť (Š x V) v pixeloch Pomer strán
Náhľad obrázkov 150 x 150 Možno deaktivovať
Stredná 300 x 300 Zachované
Veľký 1024 x 1024 Zachované
Pôvodný obrázok Ako nahraný Zachované
Tip

Nechajte za seba hovoriť svoje meno. Zaregistrujte si doménu podľa svojich predstáv.

Uložte obrázky WordPress v backende a upravte ich veľkosť

Tieto veľkosti obrázkov sú definované v nastaveniach WordPressu a môžu byť tam v určitých medziach upravené. Na to prejdite v backende do „Nastavenia“ > „Médiá“.

Obrázok: Image size settings in the WordPress backend
You can customise the preset default image sizes in the WordPress dashboard.

Po nahratí médií sa v knižnici médií nachádzajú ďalšie súbory. Adresár pre tento účel je https://mydomain.com/wp-content/uploads/ alebo https://mydomain.com/wp-content/uploads/2022/11/ (ak sú povolené priečinky založené na mesiacoch a rokoch). Napríklad obrázok sa nachádza v nasledujúcich súboroch:

  • vzorový obrázok-1024x683.jpg
  • vzorový obrázok-150x150.jpg
  • vzorový obrázok-1536x1024.jpg
  • vzorový obrázok-2048x1365.jpg
  • vzorový obrázok-300x200.jpg
  • vzorový obrázok-620x413.jpg
  • vzorový obrázok-zmenšený.jpg (2 560 x 1 707 px)
  • sampleimage.jpg (originál)

Toto poskytuje najlepšie veľkosti obrázkov pre väčšinu stránok alebo príspevkov WordPress. Obrázky na nahratie do mediálnej knižnice by nemali byť väčšie ako 1 920 pixelov na dlhej strane obrázku. Pred nahratím ich môžete zmeniť pomocou bezplatných programov na úpravu obrázkov, aby ste sa vyhli nepríjemným prekvapeniam. To platí pre formát obrázkov WebP, ktorý nie je natívne podporovaný všetkými prehliadačmi.

Toto sú odporúčané veľkosti obrázkov pre použitie v témach WordPress:

Veľkosti obrázkov WordPress Veľkosť (Š x V) v pixeloch
Loga 200 x 100
Náhľadové obrázky 150 x 150
Obrázky na pozadí 1920 x 1080
Obrázky príspevkov v portrétnom formáte 900 x 1200
Obrázky v príspevkoch v horizontálnom formáte 1200 x 900
Obrázky v hlavičke (banner) 1048 x 250
Obrázky posuvníka (v závislosti od témy) Až 1920 x cca 600
Obrázok: Common image sizes in WordPress
Commonly used image sizes for WordPress websites at a glance. Photo source: ESB Professional/shutterstock.com

Konkrétne požadované rozmery obrázkov závisia od komponentov a štruktúry témy WordPress. Nájdete ich v dokumentácii príslušnej témy.

Zmena veľkosti obrázkov v mediálnej knižnici WordPress

Veľkosť obrázkov v WordPresse je možné tiež upravovať. Okrem zmeny pôvodných rozmerov obrázku je možné obrázky orezať, otočiť a prevrátiť. Ak chcete napríklad vytvoriť posuvnú fotografiu z obrázku s väčšími rozmermi v mediálnej knižnici, postupujte takto:

Krok 1: Vyberte obrázok v knižnici médií a kliknite na „Upraviť obrázok“.

Obrázok: Image editing in WordPress library
Select an image from the WordPress media library for custom image resizing. Photo source: ESB Professional/shutterstock.com

Krok 2: Nastavte spôsob úpravy a veľkosť

Obrázok: Set new image size in WordPress library
Change the image to the desired size using the crop editing method

Stojí za zmienku, že tlačidlo orezania je potrebné použiť dvakrát: raz na aktiváciu funkcie a druhýkrát po nastavení rozmerov obrázka na vykonanie operácie.

Tip

Chcete ukladať súbory čo najbezpečnejšie? Použite úložisko HiDrive Cloud. Môžete si byť istí, že vaše údaje sú bezpečne uložené v súlade s normami GDPR platnými vo Veľkej Británii.

Krok 3: Uložte obrázok do knižnice médií

Obrázok: Save resized image to WordPress library
‘Save’ will save the resized image to the WordPress library

Po uložení zmenšeného obrázku obsahuje priečinok na nahratie súbor

  • náhľad-obrázok-zmenšený-e1667121439976.jpg

v ďalších piatich formátoch s automaticky prideleným ID …-e1667121439976. Novovytvorené veľkosti obrázkov je možné vybrať z mediálnej knižnice v editore Gutenberg pri ich vkladaní alebo výmene. Tam sú potom k dispozícii aj rozmery obrázku v pixeloch.

Prispôsobte veľkosť obrázku pri vkladaní do obsahu WordPressu

Obrázky z mediálnej knižnice WordPress sa vkladajú do obsahu. To umožňuje dodatočné prispôsobenie veľkosti v širokých medziach. Editor WordPress Gutenberg ponúka oveľa rozsiahlejšie možnosti v porovnaní s klasickým editorom TinyMCE.

Obrázok: Define best image sizes in WordPress post/page
Using the Gutenberg block settings for images and the toolbar, an image can be resized as much as possible when inserted into a post or page. The alt text (!

Ak si chcete svoje vlastné nastavenia uložiť pre neskoršie použitie, môžete použiť sekciu Gutenberg „Pridať do opakovaně použitelných blokov“ a tiež ju uzamknúť, aby nedošlo k náhodnej zmene. Ak často publikujete nové príspevky, ušetrí vám to veľa práce.

V prípade webových stránok zameraných na konkrétne povolania, napríklad webových stránok fotografa, môžu byť potrebné ďalšie formáty obrázkov, aby bolo možné dokonale vyjadriť vašu víziu. Náš sprievodca„komprimovanie obrázkov“poskytuje ďalšiu pomoc pri úprave veľkosti obrázkov, napríklad pre pluginy galérie WordPress.

Zakázať predvolené veľkosti obrázkov v WordPress

Najjednoduchší spôsob, ako deaktivovať predvolené veľkosti obrázkov, je použiť plugin „Disable Media Sizes “. V jeho nastaveniach je uvedených všetkých sedem generovaných formátov obrázkov.

Obrázok: Disable preset image sizes in WordPress using a plugin
The ‘Disable Media Sizes’ plugin allows you to disable the generation of preset WordPress image sizes

Pri zobrazených nastaveniach pluginu sa nevybrané formáty vôbec negenerujú. Nahratie pôvodného obrázku nemožno „vypnúť“. To je výhodné, ak chcete neskôr predsa len generovať iné formáty.

Poznámka

Pridanie ďalších formátov obrázkov alebo ich potlačenie je možné aj pomocou záznamov v základných súboroch WordPressu functions.php a index.php. To by však mali robiť len skúsení programátori. Prvý prehľad programovacieho jazyka nájdete v našom tutoriáli PHP pre začiatočníkov.

Ďalej optimalizujte obrázky pre WordPress pomocou pluginov

V praxi sa obrázky používajú hlavne vo formátoch JPG a PNG. Veľkosť súborov týchto formátov obrázkov je možné ďalej upravovať pomocou programov na úpravu obrázkov. V programe Photoshop sa pri ukladaní alebo exportovaní zobrazuje otázka týkajúca sa kvality. Nevýhodou tejto metódy je, že každý obrázok je potrebné „upravovať“ jednotlivo a potom nahrať. Pluginy sú elegantnejším riešením. Tieto pluginy majú často širokú škálu funkcií, preto je vhodné si pozorne prečítať dokumentáciu k použitéemu pluginu.

Vysoký počet inštalácií a dobré hodnotenia majú napríklad nasledujúce pluginy WordPress na úpravu veľkosti súborov a obrázkov WordPress:

  • EWWW Image Optimizer: Podporuje formáty: JPG, PNG, GIF, PDF, WebP, SVG
  • TinyPNG: Podporuje formáty JPG, PNG, WebP
  • Imagify: Podporuje formáty JPG, PNG, PDF, GIF, WebP
  • Regenerate Thumbnails: už nejaký čas neaktualizované
  • Image Regenerate & Select Crop: podobne

Než vyskúšate pluginy, nezabudnite: Záloha WordPressu chráni pred stratou dát, ak sa niečo naozaj pokazí.

Zhrnutie: Optimalizácia veľkosti obrázkov v WordPress

S pomocou nástrojov WordPressu je možné dosiahnuť mnoho optimálnych veľkostí obrázkov. S pluginmi sú k dispozícii rozsiahlejšie možnosti. Zásahy do PHP kódu WordPressu by mali byť vyhradené pre programátorských profesionálov. A nakoniec: Pri optimalizácii nezabúdajte na SEO obrázkov.

Prejsť na hlavné menu