Grafika na webu Cvičení 3 Webová kartografie – úvod Podzim 2024 Filip Leitner [typ média] [...podmienka...] [.....podmienka.....] @media screen @media screen and (max-width: 800px) @media screen and (min-width: 840px) and (max-width: 1270px) https://www.vzhurudolu.cz/prirucka/css3-media-queries .post { container-type: inline-size; container-name: sidebar; } @container sidebar (min-width: 700px) PROč? Pomocí grafiky vykomunikujete mnoho informací jednoduše a srozumitelně. Weby jsou interaktivní! Viz příklady. SVG, CSS transformace, D3.js, … Je důležité používat pro různé účely správné formáty – web bude lépe vypadat a bude se rychleji načítat. https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types Rozdíly ve velikosti správně a špatně připravené grafiky mohou být opravdu markantní. Filip Leitner Grafika na webu Webová kartografie 2 / 22 https://mourner.github.io/road-orientation-map/ https://www.jasondavies.com/maps/transition/ RASTROVÉ FORMÁTY PNG, GIF, JPEG, TIFF, … Základním prvkem jsou obrazové body → rozlišení obrázku. Různé obrazovky mají různou hustotu obrazových bodů → jeden z největších problémů rastrové grafiky na webu. Filip Leitner Grafika na webu Webová kartografie 6 / 22 Filip Leitner Grafika na webu 1.Správny formát 2.Rozlíšenie – DPI,PPI ? 3.Rozlíšenie (Veľkosť) 4.Kompresia Ako správne pripraviť rastrový obrázok Filip Leitner Grafika na webu PNG Portable Network Graphics 16.7M barevných odstínů podporuje průhlednost přípona .png world file (.pnw, .pgw) bezztrátová komprese vhodný formát pro grafiku (mapy!) a vysoce kontrastní fotografie Filip Leitner Grafika na webu Webová kartografie 8 / 22 Velikost 13 KB Filip Leitner Grafika na webu JPEG Joint Photographic Experts Group 16.7M barevných odstínů nepodporuje průhlednost přípona .jpg (.jpeg, .jif, …) ztrátová (ale efektivnější) komprese vhodný formát pro fotografie (ne mapy!) EXIF – metadata fotografie (souřadnice!) Filip Leitner Grafika na webu Webová kartografie 10 / 22 Velikost 13 KB, komprese 35 % Filip Leitner Grafika na webu GIF Graphics Interchange Format 256 barevných odstínů z 24-bit RGB palety podporuje průhlednost přípona .gif vhodný formát pro loga, jednolité plochy, animace Filip Leitner Grafika na webu DPI/PPI – Dots per inch, Pixel per inch -Dots have space in between them, and pixels don’t. - - - - - - - - -DPI/PPI sú inštrukcie pre tlač. Ovplyvnia aký veľký bude obrázok po vytlačení. Pri prezeraní na webe rozhodujú vlastnosti monitora (a počet počet pixelov) -PPI veľkosť súboru neovplyvní. Kompresia . -https://www.photografica.com.au/image-size-resolution-and-resizing-images-for-the-web/ - - Rozlíšenie DPI/PPI -> Filip Leitner Grafika na webu Filip Leitner Grafika na webu PIXEL nie je nemenný. PPI na monitore (nie na obrázku) ovplvní veľkosť. Telefon vs Billboard Rozlíšenie-Veľkosť (v pixeloch!) •One of the biggest difficulties for web designers over the last decade or so was always what size images should be • There’s no point putting a 5000 px wide image in awebpage if 90% of the population are using screen swith a maximum 2048px resolution Veľkosti obrazoviek https://www.w3schools.com/browsers/browsers_display.asp https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive. html Filip Leitner Grafika na webu Na akej obrazovke bude moja stránka zobrazená?? •veľký obrázok zbytočný pre malé obrazovky (sťahovanie, stačí menší), malý obrázok zlý pre veľké obrazovky •Na malej obrazovke nevidím detail, na veľkej príliš detailné ? • VEĽKOSŤ (v pixeloch!) ART DIRECTION - akú časť obrázku sa rozhodnete zobraziť Whenever you need to make changes to content or aspect ratio of an image based on the size of the i mage in the Page RESOLUTION SWITICH -Any scenario where you all you want to do is provide different sizes of an imag e and you’re not making any modifications to the content or aspect ratio of the image. Filip Leitner Grafika na webu Filip Leitner Grafika na webu Cropped version of the image which displays the important details of the image https://cloudfour.com/thinks/responsive-images-101-definitions/#artdirection Filip Leitner Grafika na webu KOMPRESIA https://www.photo.gallery/blog/image-size-quality-photo-gallery-websites/ Filip Leitner Grafika na webu VEKTOROVÉ FORMÁTY SVG GeoJSON, TopoJSON, GML, KML, WKT, Shapefile, … Základním prvkem jsou souřadnice definičních bodů a jejich vztahy Vykreslení na obrazovce zajišťuje samotné zařízení → výpočetně (může být) náročnější, vždy je ale výsledek ostrý. Filip Leitner Grafika na webu SVG Scalable Vector Graphics založeno na XML přípona .svg, dá se ale vložit i přímo do kódu webové stránky! strojově čitelný textový grafický formát Běžně menší velikost souboru oproti rastru Dá se animovat! V SVG je možné uchovávat atributy prvků a ve webové stránce je číst. Lze aplikovat styly pomocí CSS! Často se používá pro kreslení grafiky a následný export do rastrů v různém rozlišení (ikony, loga, apod.). Filip Leitner Grafika na webu Velikost 4,4 KB Příklad jednoduché interaktivní mapky využívající SVG, CSS a JavaScript: https://bl.ocks.org/SLeitgeb/raw/9dcc1b0729a3e93387cfa147d51b4262/ Filip Leitner Grafika na webu POUžITí OBRÁZKŮ Sorry, your browser does not support inline SVG. Filip Leitner Grafika na webu Kočka v košíku ‹→ na pletení. Ukládejte obrázky skutečně v takovém rozlišení v jakém se mají zobrazovat. Nicméně, drobné odchylky v zobrazené velikosti se tolerují (řádově ale jednotky procent!). Dobrá praxe je napsat rozlišení souboru přímo do jeho názvu (kitten_100x100.jpg) Filip Leitner Grafika na webu Ako na responzívne obrázky -Definovať width a height atribúty HTML elementu* -Cumulative layout shift -ASPECT RATIO -Správna verzia obrázku - Pridať css deklarácie - -Scale up + down - - - -Scale down - - -+ @media queries - - - Filip Leitner Grafika na webu Ako na responzívne obrázky Filip Leitner Grafika na webu https://jakearchibald.com/2015/anatomy-of-responsive-images/ Pro zajímavost Existuje element picture, se kterým je možné podle velikosti obrazovky měnit zobrazený obrázek. V praxi se používá pro zobrazení různě ořízlých obrázků na různých obrazovkách. Flowers Filip Leitner Grafika na webu NÁSTROJE Inkscape, GIMP × Adobe Photoshop, Illustrator, Corel Draw komprese obrázků – https://compressor.io https://www.jotform.com/blog/ everything-you-need-to-know-about-image-compression/ kódy EPSG (pro různé souřadnicové systémy): https://epsg.io/ např. S-JTSK má EPSG kód 5514 → epsg.io/5514, pokud nevíte kód, na stránce je vyhledávání Filip Leitner Grafika na webu srcsetsizes Responzívny obrážťok [USEMAP] ÚKOL dokončete základní strukturu stránky (pokud možno už žádné Lorem Ipsum, apod.) validní HTML, flex/grid layout stránku doplňte o obrázky, které budou vhodně upravené pro použití na webu ) komprese ) alespoň tři rastrové obrázky (minimálne jeden pomocou srcset/sizes) ) alespoň jeden vektorový obrázek ) nakreslete si vlastní vektorový obrázek (logo?) nemusíte nutně na webu použít jako vektor, stačí např. GIF / PNG (v tom případě odevzdejte také .svg soubor) odevzdat do 20.10 včetne (max 10b.) odevzdávat v archivu (web.zip) Filip Leitner Grafika na webu JAK DÁL? Přečtěte si víc a procvičujte https://medium.com/ https://css-tricks.com/ https://bost.ocks.org/mike/ Filip Leitner Grafika na webu Ptejte se Filip Leitner Grafika na webu kdykoliv kdekoliv jakkoliv co nejdřív … e-mail: 451242@mail.muni.cz