Afbeeldingen aanpassen

Om te zorgen dat je afbeeldingen goed worden weergegeven op je pagina is het belangrijk om:

  1. De afbeelding in de juiste grootte te plaatsen;
  2. De afbeelding in de juiste verhouding te plaatsen;
  3. De bestandsgrootte zo klein mogelijk te houden.

In een merendeel van de gevallen is een verhouding van 16:9 optimaal voor GX. Er zijn diverse software programma's om afbeeldingen bij te snijden, in afmeting in centimeters, resolutie en bestandsgrootte.

Wij geven je hier voorbeelden hoe je het formaat kan aanpassen aanpassen en comprimeren met verschillende programma's en tools die binnen Fontys gratis te gebruiken zijn.

Sfeerafbeelding Fontys
  • Afbeelding verkleinen

    Adobe Photoshop

    Stap 1.

    Ga op je laptop naar Start -> Alle programma's -> Fontys -> Adobe Master Collection en start Adobe Photoshop.

    Open je afbeelding via de menubalk bovenin het programma door te gaan naar Bestand -> Open.

    Stap 2.

    Ga naar Afbeelding -> Afbeeldingsgrootte, of gebruik de toetscombinatie CTR+Alt+I.

    Sfeerafbeelding Fontys

    Stap 3.

    Vul de gewenste breedte/hoogte van je afbeelding in en klik op OK.

    TIP: zorg dat de koppeling aanstaat! Deze zorgt ervoor dat je afbeelding altijd de juiste verhouding aanthoudt. Als je de breedte of hoogte wijzigt met de koppeling aan verandert de ander automatisch correct mee.

    Stap 4.

    Sla je wijzigingen op via Bestand -> Opslaan als.


    Paint

    Stap 1.

    Open het programma Paint op je laptop via Start -> Accessoires -> Paint.

    Open je afbeelding vervolgens via Bestand -> Open in het menu linksboven in het programma

    Stap 2.

    Klik in de menubalk onder Start op de knop Formaat wijzigen.

    Sfeerafbeelding Fontys

    Stap 3.

    Vul het gewenste horizontale en/of verticale aantal pixels in. Klik op OK.

    TIP: Vink de optie 'hoogte-breedteverhouding behouden' aan. Deze zorgt ervoor dat je afbeelding de juiste verhouding aanhoudt. Zo verandert de hoogte/breedte automatisch correct mee wanneer je een van de twee aanpast.

    Stap 4.

    Sla het bestand op via Bestand -> Opslaan of Opslaan als.

  • Afbeelding uitsnijden

    Adobe Photoshop

    Stap 1.

    Ga op je laptop naar Start -> Alle programma's -> Fontys -> Adobe Master Collection en start Adobe Photoshop.

    Open je afbeelding via de menubalk bovenin het programma door te gaan naar Bestand -> Open.

    Stap 2.

    Klik aan de linkerkant in het gereedschapsmenu op Uitsnijden.

    Sfeerafbeelding Fontys

    Stap 3.

    Bovenin, direct onder de menubalk, kan je de door jou gewenste verhouding aangeven. Voor GX is dit vaak 16:9.

    Stap 4.

    Heb je de verhouding naar wens ingesteld, maar wil je toch meer uit de afbeelding wegsnijden? Sleep dan de hoeken of de afbeelding zelf om precies aan te geven welk gedeelte jij uitgesneden wilt hebben.

    Klik op Enter of op het vinkje rechtsboven in de menubalk om de selectie te bevestigen.

    Sfeerafbeelding Fontys

    Stap 5.

    Sla je wijzigingen op via Bestand --> Opslaan als.


    Paint

    Stap 1.

    Open het programma Paint via Start -> Accessoires -> Paint.

    Open je afbeelding vervolgens via Bestand -> Open.

    Stap 2.

    Klik in de menubalk onder Start op de knop Selecteren.

    Stap 3.

    Klik en sleep op de afbeelding om de door jou gewenste selectie te maken. Klik vervolgens op Bijsnijden wanneer je tevreden bent met je selectie.Onder in je beeldscherm zie je hoeveel pixels je afbeelding bevat.

    Sfeerafbeelding Fontys

    Stap 4.

    Sla het bestand op via Bestand -> Opslaan of Opslaan als.

  • Afbeeldingen comprimeren

    Optimizilla

    Via http://optimizilla.com/nl/ kan je JPEG- en PNG-afbeeldingen verkleinen tot een minimale grootte terwijl de kwaliteit behouden blijft. Dit komt ten goede van de prestatie van de pagina waar je afbeelding op staat.

    Stappen

    1. Ga naar http://optimizilla.com/nl/.
    2. Klik op upload en kies de afbeelding die je wil comprimeren.
    3. Wacht tot de compressie eindigt.
    4. Klik op download om de gecomprimeerde afbeelding te downloaden.
    Sfeerafbeelding Fontys

    Comprimeren is dat je de bestandsgrootte van de afbeelding optimaliseert.
    Afbeeldingen met een kleinere bestandsgrootte laden sneller en bevorderen de prestatie van de pagina.

  • Beeldkwaliteit vergroten

    1.    Bij Redesign (opleidingen) gebruiken we de volgende afbeeldingsmaten

    • Header = 1920 X 610 (toe te voegen via de metadata van een pagina)
    • Card - Quote = 1600 X 700 (kies Verhouding 16/7 in het element)
    • Card - YouTube = 1920 x 720 (kies Verhouding 16/6 in het element)*

    * NB: het eerder aangegeven formaat voor de YouTube Card (1920 x 1080) is erg hoog.

    Sfeerafbeelding Fontys

    2. Briefing voor aanleveren beelden in verband met het schalen van de foto’s

    Voor het goed presenteren van afbeeldingen op de diverse schermformaten (= de responsive werking) is het belangrijk om bij het maken van foto’s rekening te houden met het volgende:

    • Header: houd bij de inhoud op de foto rekening met het opendagen-blokje aan de rechterkant én met de opleidingstitel en subinformatie.
    • Bij alle foto’s: zorg voor ruimte rondom de personen/het object aan beide zijkanten. Bij het schalen van afbeelding voor de verschillende schermen wordt er altijd iets afgesneden.
    • Plaats nooit logo's op foto's

    Een voorbeeld:

    Full HD groot scherm

    (meest gebruikte formaat desktop)

    Sfeerafbeelding Fontys

    I-pad Landscape

    Sfeerafbeelding Fontys

    iPad portrait

    Sfeerafbeelding Fontys

    Mobiel

    Sfeerafbeelding Fontys

    3. Kwaliteit foto op webpagina én de invloed van de GX-comprimeerfunctie

    Het uploaden van een foto in GX kent géén absolute limiet (max aantal mb’s).

    Reden: specifiek voor de factsheet-foto’s is een hoog aantal mb’s nodig. De facstheets hebben namelijk ook een (pdf) printdoel, waarvoor een hoge fotoresolutie nodig is.

    Maar… om een webpagina snel te kunnen laden voor de bezoeker, worden de foto’s die je toevoegt op een webpagina wél automatisch door GX gecomprimeerd. Dit comprimeren is noodzakelijk:

    • een bezoeker haakt af als de webpagina (door de zware foto) te lang laadt;
    • een lange laadtijd van de webpagina is nadelig voor je google ranking.


    Dat comprimeren door GX werkt als volgt

    Hoe zwaarder het fotobestand (= hoe hoger aantal mb/kb’s) hoe meer GX de afbeelding automatisch comprimeert bij het uploaden.

    In grote lijnen:   

    • Een afbeelding van 10 MB (= erg zwaar) behoudt op de pagina door de comprimeerregel slechts 20% van de oorspronkelijke kwaliteit.
    • Een afbeelding van 1 MB (ook nog te zwaar) behoudt op de pagina 60% van de oorspronkelijke kwaliteit.
    • Een afbeelding van 300 kb behoudt op de pagina 80% van de oorspronkelijke kwaliteit.
    • Een afbeelding van 200 kb behoudt op de pagina 90% van de oorspronkelijke kwaliteit.

    Concreet: als je een (te) zware afbeelding via GX op je webpagina plaatst, is de presentatiekwaliteit van de afbeelding op je webpagina niet goed (b.v. korrelig).  
     

    Advies voor een goede presentatiekwaliteit van de afbeelding  


    Bewerk je afbeelding altijd tot een acceptabele kwaliteit én max aantal kb’s voordat je de afbeelding upload in GX.

    Dus:

    • Blijf onder de 500kb, bij voorkeur rond de 200 á 300 kb.
    • Bewerk je foto eerst met een programma als Photoshop. Dit speciale fotoprogramma kan veel beter comprimeren dan GX. Bovendien zie je daarin direct wat nog een acceptabele kwaliteit is voor de betreffende foto.

    Een uitleg van Photoshop vind je hier.

  • Afbeelding opleidingszoeker aanpassen