HTML & CSS voor beginners (Deel 09): Afbeeldingen voor het web (01)

Als je afbeeldingen opslaat in een grafisch programma, worden verschillende grafische formaten aangeboden. Maar welke moet je kiezen als je de afbeelding op een website wilt plaatsen?



Als je een afbeelding op je website wilt presenteren, heb je de keuze tussen drie formaten.

• GIF

• JPEG

• PNG

Maar welk formaat kies je voor welk doel? Gebruik je liever GIF of PNG voor foto's? Eerst een kort overzicht van de mogelijkheden van de verschillende formaten.

Dit kleine overzicht geeft al de verschillende eigenschappen van de formaten weer. Het is dan ook niet verwonderlijk dat bepaalde formaten zich beter lenen voor specifieke doeleinden dan andere. Dat is precies waar het volgende gedeelte op aansluit. Hier wordt getoond wanneer je het beste welk formaat kunt gebruiken.

Foto's

Zonder twijfel, voor foto's gebruik je JPEG. Hiermee kunnen afbeeldingen zeer goed gecomprimeerd worden, waarbij de kwaliteit variabel kan worden gekozen. Zo vind je de juiste balans tussen kwaliteit en compressiesnelheid.

Screenshots/Diagrammen

Voor dit doeleinde is het PNG-formaat het meest geschikt. PNG is ook interessant voor technische tekeningen, plattegronden, enzovoort. PNG kan ook worden gebruikt voor afbeeldingen waarbij transparante gebieden worden gebruikt.

Lettertypen/Logo's

Als je tekst in je logo hebt staan of überhaupt tekst wilt weergeven, moet je GIF of PNG gebruiken. Vanwege de betere prestaties wordt meestal gekozen voor PNG. JPEG is in ieder geval niet geschikt voor het weergeven van lettertypen, omdat de randen onduidelijk worden weergegeven.

Transparantie

Als het gaat om het weergeven van transparante gebieden, valt JPEG bij voorbaat af. Blijven over GIF en PNG. Maar welk van deze twee formaten gebruik je nu als het op transparantie aankomt? GIF kan in principe wel transparantie verwerken, maar de resultaten zijn meestal onnauwkeurig. Een pixel in het GIF-formaat kan namelijk ofwel volledig zichtbaar zijn ofwel volledig transparant zijn. Dit fenomeen doet zich niet voor bij PNG. Dit formaat heeft een extra alfa-kanaal, waardoor fijnere transparantieresultaten worden behaald.

Afbeeldingen invoegen

Grafieken kunnen worden ingevoegd via het img-element. (Let op, afbeeldingen worden tegenwoordig vaak via CSS ingevoegd. Uitgebreide informatie over CSS volgt nog. De getoonde HTML-methode is echter volledig standaardconform en kan ook onbezorgd in HTML5 worden gebruikt.)

<img src="logo.png" alt="PSD-Tutorials.de" />

Met img heb je te maken met een op zichzelf staand element. Met de juiste attributen kun je de afbeelding verder beschrijven. Het belangrijkste attribuut is zonder twijfel src. Via dit attribuut geef je aan welke afbeelding moet worden ingevoegd. In het getoonde voorbeeld ga ik ervan uit dat de grafische afbeelding logo.png zich in dezelfde map bevindt als het HTML-bestand waarin het img-element is gedefinieerd.

Om ervoor te zorgen dat de afbeeldingen daadwerkelijk worden weergegeven, moet je de paden naar deze afbeeldingen correct aangeven. HTML biedt verschillende mogelijkheden voor referenties.

• Absolute paden

• Absolute padverwijzingen relatief ten opzichte van het basisadres

• Relatieve padverwijzingen relatief ten opzichte van het basisadres

Laten we beginnen met absolute paden. Deze variant gebruik je meestal wanneer de afbeelding zich niet op je eigen server bevindt. Stel dat je de bekende vlinder van PSD-Tutorials.de op je website wilt invoegen. Dan zou je deze theoretisch rechtstreeks van de server kunnen laden waarop het zich bevindt. Zoek eerst het pad van de afbeelding op. Dit is het gemakkelijkst door met de rechter muisknop op de afbeelding te klikken en vervolgens URL van afbeelding kopiëren te selecteren.

Wat uiteindelijk in het klembord wordt geladen, moet er ongeveer zo uitzien:

http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg

Dit is dus het volledige adres van de afbeelding. Deze informatie volstaat om de afbeelding in te voegen.

<img src=" http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg" alt="PSD-Tutorials.de" />

Men wijst dus het src-attribuut de volledige pad naar de afbeelding toe.

Het probleem met deze absolute paden is uiteindelijk dat men geen echte controle heeft over de ingesloten inhoud. Als de door u gerefereerde afbeelding dus van de server wordt verwijderd of naar een andere map wordt verplaatst, kan er een weergavefout optreden.





Daarom zou dit absolute refereren eigenlijk de uitzondering moeten zijn.

Absoluut pad in verhouding tot het basisadres

Deze optie is altijd geschikt wanneer de afbeelding op dezelfde computer/server als het HTML-bestand staat en via het huidige protocol bereikbaar is. Dat klinkt ingewikkeld, maar dat is het niet.

Een voorbeeld:

http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg

Dit is het volledige adres. Het volgende deel is het absolute pad.

wp-content/uploads/2013/01/logo-psd-tutorials.jpg

Dit absolute pad is relatief ten opzichte van het basisadres http://4eck-media.de.

Relatieve paden in verhouding tot het basisadres

Deze optie die nu wordt gepresenteerd is zeker het meest gebruikelijk. Hierbij wordt altijd het huidige pad als referentiepunt genomen vanwaar uiteindelijk wordt toegesproken. Ook hier enkele voorbeelden. Stel dat er het bestand index.htm is waarin u een afbeelding wilt opnemen. Daarnaast bestaat op hetzelfde niveau de map images met daarin de genoemde afbeelding.

index.htm
images
--logo.png

De oproep in het src-attribuut zou er in dit geval zo uitzien:

src="images/logo.png"

project
--images
-----logo.png
--archief
-----index.htm

In dat geval ligt de index.htm een map onder de afbeelding die moet worden ingevoegd logo.png.

src="../images/logo.png"

images en laat de logo.png zien.

project
--images
----logo.png
----2013
------januari
--------index.htm

src="../../images/logo.png"

logo.png ligt in dit geval twee niveaus boven de index.htm in de map images.

Het voordeel van de relatieve paden is hun flexibiliteit. U kunt bijvoorbeeld het project lokaal ontwikkelen en vervolgens kopiëren naar een "echte" server. De paden kloppen daarna ongewijzigd.