Plaatjes bewaren voor Web

Op een website zijn originele foto’s veel te groot en daarom te traag. Maak ze dus kleiner, bijvoorbeeld in Photoshop: maximaal 1500 pixel, in JPG medium. Of gebruik een online image resizer. Of mail ze naar jezelf en kies daarbij “Normale grootte”.

  • Zet deze plaatjes in een nieuwe map ima in je website map
  • In de pagina portfolio.html zet je nog kleinere versies van deze plaatjes (low res), waar je dan op kan klikken voor de grote plaatjes, die in een nieuw venster openen.
  • Maak ook een favicon, zie onderaan.

Grote plaatjes voor web: high res

Open een goede grote foto in Photoshop en kies Bestand > Exporteren Als 
– of tik Cmd-Alt-Shift-W.
Kies rechtsboven “JPG, kwaliteit medium” en maximaal 1500 px bij het hoogste getal bij Breedte / Hooogte. Bewaar ze als hr1.jpg, hr2.jpg etc.

Kleine thumbnail plaatjes: low res

Maak van diezelfde plaatjes dan kleine versies (thumbnails), die je straks klikbaar maakt naar de grote plaatjes. Zet die thumbnails ook in de map ima.

Bijvoorbeeld kleine vierkante plaatjes: met de Crop-tool (tik c), die je linksboven afstelt op B x H op 400px x 400px. Elk vakje wat je nu trekt is altijd 400×400 pixels.

Bewaar met Cmd-Alt-Shift-W als JPG, bewaar in de map ima en noem ze lr1.jpg etc

Je kan van een PDF ook een lowres jpg maken, die je straks laat linken naar de volledige PDF die uit meerdere pagina’s kan bestaan.

jpg, png, gif of webp?

Kies jpg voor foto’s.
Kies png als er transparantie in moet.
Kies gif als het een animatie is, of een lijntekening.
Het nieuwe formaat webp kan alles.

Maak de plaatjes klikbaar in Dreamweaver

  • Open een pagina zoals portfolio.html
  • Plaats de kleine plaatjes (via Invoegen > Image bijvoorbeeld)
  • Laat ze linken naar de high res plaatjes (via link bij de Properties > klik het mapikoon daarnaast).
  • Kies daar ook bij target voor _blank om een nieuw venster/tab te openen.
  • Check alles in een echte browser en pas eventueel aan.

Galerie in HTML/CSS met Animatie

Plaats de kleine plaatjes in een div met class=galerie:

<div class="galerie">

Na het laatste plaatje zet je </div> om de div (het blokje) te eindigen.
Nu kan je in de css de plaatjes stileren (bijvoorbeeld rond maken via border-radius),
en ook laten animeren bij een mouse over:

.galerie img {
     border: 5px solid white;
     transition: all 0.2s;
     border-radius: 140px;
}
.galerie img:hover {
     border:5px solid yellow;
     border-radius: 0px;
     transform: scale(1.4);
}

Favicon

Een favicon is dat kleine plaatje bovenaan in de browser, en soms zie je ‘m ook veel groter, bijvoorbeeld als bookmark of op je telefoon. Heel belangrijk voor je website, om een goede betrouwbare indruk te maken.

Ontwerp een favicon.png van 250 x 250 pixels in PS, kies Cmd-alt-shift-W > png 24 en zet in het in je website-map. Maak je favicon werkend met deze code in de head van de HTML, in elke pagina:

<link rel="shortcut icon" type="image/png" href="favicon.png" />

Meer over Dreamweaver

 

 

 

 

 

—————-

OPTIONEEL: Voeg nu een Lightbox toe.

Extra effecten met CSS

Op de kleine plaatjes kun je ook effecten toepassen met CSS:

.gallery img {
   border-radius: 100px;
   border:3px solid #ddd;
   transition:all 1s;
   filter: grayscale(1);
   opacity: 0.5; 
} 
.gallery img:hover { 
   border: 3px solid #69f; 
   filter: grayscale(0);
   opacity: 1; 
   transform:scale(1.1) rotate(5deg);
}

Om alle plaatjes moet dan een <div class=gallery>

<div class="gallery">

<a href="hr/1.jpg">
   <img src="lr/1.jpg" width="200" height="200">
</a>

<!-- Hier de rest van de plaatjes -->

</div>

Meer CSS effecten en animaties staan hier.

Bekijk ook dit overzicht met alle CSS die je op plaatjes kan gebruiken.