Embed Size (px)
Citation preview
Billedfiler
Billedtyper til WEB
Billedfiler
.PNG – Tegnet billede, mange farver.APNG – Animeret .PNG
.JPG – Billeder, mange farver.GIF – 256 farver, også animeret.WEBP – Mindre, bedre, hurtigere
.BMP – ukomprimeret :-(.ICO – Ikon
Til WEB
● DPI Betyder Dots Per Inch● Skal sættes til 72 DPI● Print sættes til 300 DPI● Komprimering, se hvor meget den kan trække…
– Eller bare tag default, og smid dem igennem kraken.io
● Interlace eller ej…● Brug evt PhotoFiltre til redigering / gratis
– Se mere om PhotoFiltre på avirus.dk :-) og nettet :-D
● https://pixlr.com
FLASH
GIF
● Kun 256 farver● Lille format, lille billede fil● Kan animeres● Kan sættes til transparens● Gode til små knapper med få farver● Gode til små animerede knapper
JPG
● Billeder / Fysisk billeder, ikke tegninger● Kan komprimeres● Lossy format, dvs der tabes information
pixelering● Millioner af farver● Dårlige at tekst og solide felter forringes● Bedst til direkte billeder
PNG / APNG
● Kan det hele.● Bedre end GIF, da denne er lossless ved komprimering,
altså uden tab i billedet. Brug denne i stedet for GIF.● Nok bedst til tegnede billeder● Kan animeres - APNG● Kan køre med transparent ● Ikke god til billeder● God til knapper● God til animerede knapper
Forskelle
● 1 JPG er en tabsgivende format, mens PNG er et tabsfrit format
● 2 JPG. er bedre til fotografier, mens PNG er bedre for skabt billeder.
● 3. JPG understøtter integrering af EXIF- data, mens PNG og GIF ikke gør.
● 4. PNG understøtter gennemsigtighed, mens JPG ikke gør.
EXIF- data
● Data der fortæller hvem der er på billedet● Data der fortæller hvor billedet er taget/GPS
– Normalt på smartphones slå til/fra– Fedt at se et billede fra verden, og hvor billeder er
taget.
● Op til dig….● Hvilket format var dette ????
WEBP formatet
● Hvem– https://developers.google.com/speed/webp/
● Kommer fra filmformatet VP8● Som MP3 kommer fra film formatet MP4● Joomla
– Nej● PHP5 ja (1914)● PHP7 ja/nej – installer – webhotellet
ØV DET VIRKER IKKE I PRAKSIS. Det er jeg skide ked af…Se næste side, den er altså ikke dårlig…Forstår ikke hvorfor den ikke er slået igennem.
WEBP – det nye sort
SKIFT MED DET SAMME
● IE, Edge, Chrome, FireFox oma…– Ja og nej…
● Nå… så gider vi sgu da ikke bruge mere tid på det.. !!!
GIF… APNG
Flot og intuitiv, men har ikke set noget der virker ???GIF – prøvet 5 gange uden held
Youtube til GIF jo, men logo i hjørnet :-/
http://gifmaker.me/
Den virker hver gang :-)http://animizer.net/en/gif-apng-converter Konverter fra GIF til APNG (fylder det dobbelte WTF )
Fandt ikke noget der kunne gøre det bedre end GIF
https://developers.google.com/speed/pagespeed/insights
Nemt for GoogleAt sige
Nemt for Google at sige
Flere billede filer ?
● Kender i Udtrykket med ’De lavtsiddende frugter’● Er de nuværende billeder komprimeret?● Hvor meget?● Via FTP hent alle .JPG filer● Upload dem til kraken.io ’Koster ?’ ● Se hvor meget du har sparet i plads/download/speed● Upload dem alle, og overskriv dem● Så har du sparet plads, samt din side loader hurtigere
Jeres opgave er:
● I en browser, load jeres egen forside– Bagefter, ekstrabladet, bt, dr, news… hvem ’vinder’
● Vælg filer, gem hele websiden● Find filen samt mappen med samme navn, med
billeder og .JS● Marker dem begge, og højreklik og vælg egenskaber.● Fortæl din samlede størrelse på din forside● Er det ok, eller kan du gøre noget ?
Vinder er:
● Ja det er jo en smagssag● Til næste gang, få dit site tunet….● Billeder, og måske kompilerede CSS og andet?● Lavthængende frugter?● Hvor mange billeder har du på forsiden?
Spørgsmål jeg kan svare på ?
