Pleio

Engels | Nederlands
Afbeelding- en fotobewerking

Afbeelding- en fotobewerking

Tips voor het maken en bewerken van afbeeldingen of foto's met Photoshop of het gratis (online) Pixlr Editor

 0/5 Sterren (0)

TIP 1: Wanneer en waarom precies .jpg, .gif, .bmp of .png?

    Hanjo van Houwelingen
    Door Hanjo van Houwelingen in de groep Afbeelding- en fotobewerking 1568 dagen geleden Reacties (2)

     0/5 Sterren (0)

    Abeeldingsformaten (types) uit de digitale wereld hebben ieder hun eigen kwaliteiten. Feit is, dat als je een afbeelding wilt publiceren via het internet, het zo licht mogelijk (aantal kB's) moet zijn. Het wordt dan immers sneller geladen door de 'kijker'. Ondanks de steeds sneller wordende verbindingen blijft dit toch belangrijk omdat we ook internetten via langzamere (draadloze) verbindingen. Ook ben je efficienter in de webruimte.

    Foto's

    Het (compressie) formaat .jpg (of .jpeg) wordt het meest gebruikt voor foto's. Dat is niet voor niets. Jpg gaat heel slim met de beeldpunten (pixels) uit de foto en de miljoenen kleuren. Immers, als je voor een afbeelding van 300 bij 300 pixels (het paard hieronder) voor ieder van de 90.000 beeldpunten apart de kleur en positie zou moeten opslaan zal dit onnoemelijk veel informatie betekenen. Dit is ook precies de reden waarom de ruwe bestanden van een spiegelreflex in de RAW stand, of TIFF bestanden zo enorm 'zwaar' zijn. Deze zijn 'verliesloos' en daarom weer perfect voor de print-wereld, maar daarover in een latere 'tip' meer.  

    Opslaan voor web 

    Bij het opslaan kies dan

    'bestand > opslaan voor web en apparaten, kies voor JPEG' (Photoshop)
    'bestand > bewaren, kies voor JPEG' (Pixlr, www.pixlr.com)

    Een compresse van 70% genereert scherpe afbeeldingen die toch erg licht zijn.

    image
    afbeelding is maar 30kB groot bij 70% compressie

     

    Een te zware compressie zorgt met name bij sterke kleurovergangen voor zogenaamde 'jpg artifacten' en legt daarmee voor een deel de werking van jpg compressie bloot:

    Lage jpg compressie
    jpg-artifacten bij een te zware compressie

    Meer informatie over de werking van het jpg formaat vindt je hier: 
    Wikipedia pagina over werking jpg 

    Geen gif of png bij opslaan foto's

    Het .gif formaat of het (8-bits) .png format kan maar 256 kleuren weergeven. Een foto ziet er dan 'ministekkig' uit, en is goed zichtbaar bij subtiele kleurovergangen zoals een blauwe lucht:

    Gif effect bij opslaan foto
    ministek-effect bij gif of png

     

    Logo's en Artwork

    Logo's of artwork (lijntjes, knopjes banner's etc.) kan je over het algemeen het beste opslaan in het gif of png formaat. Logo's of artwork kenmerkingen zicht vaak door sterke kleurovergangen. Jpg heeft daar moeite mee en is er weinig compressie mogelijk. Een gif of png geeft aan iedere pixel simpelweg een kleur mee en heeft daar geen last van en is daarom erg 'licht' (aantal kB's):

     

    'bestand > opslaan voor web en apparaten, kies voor GIF' (Photoshop)
    'bestand > bewaren, kies voor GIF' (Pixlr, www.pixlr.com)

     

    Logo in gif formaat
    logo opgeslagen in gif, maar 4kB groot

     

    Transparantie

    Een leuke eigenschap van gif of png (8-bits) is dat je ook transparante pixels mee kunt geven. Echter, het is aan of uit, dus of transparant of een kleur. Dit wordt zichtbaar als je er een achtergrond met een andere kleur onder legt:

    Transparantie bij Gif
    vergroting:pixel is OF transparant, OF heeft een kleur 

    'bestand > opslaan voor web en apparaten, kies voor PNG-8' (Photoshop)

    PNG 24 bits heeft hier een oplossing voor. Dit formaat heeft een Alpha kanaal. Je kunt dus de transparantie varieren ipv alleen aan of uit. Dat ziet er dan als volgt uit (weer met een achtergrondje om het duidelijk te maken):

    Logo als png 24bits
    vergroting: png 24bits heeft wel een variabele transparantie 

    'bestand > opslaan voor web en apparaten, kies voor PNG-24' (Photoshop)
    'bestand > bewaren, kies voor PNG' (Pixlr, www.pixlr.com)

    Toch is het niet raadzaam om foto's in het PNG 24-bits op te slaan. Deze worden onnodig groot (aantal kB's), en het alpha-kanaal maakt het ook een flinke kluif voor de browser om te tonen.

     

    BMP (een afkorting van bitmap) is een bestandsformaat wat veel door Microsoft wordt gebruikt en is niet goed te comprimeren. Het wordt daarom buiten windows / offiice niet heel veel gebruikt en heeft geen voordelen om te gebruiken voor het web.

    Tot zover tip 1, groeten van Hanjo van Houwelingen

     

    Reacties

    Volgorde van reacties: Aantal: Automatisch laden:
      • Saskia Wenniger
        Saskia Wenniger 1540 dagen geleden

        Dank! Door de plaatjes wordt het een stuk helderder.

        • Margreet Noordhof
          Margreet Noordhof 1559 dagen geleden

          bedankt voor de tip: goede uitleg voor niet-ontwerpers, begrijp ik er eindelijk wat meer van!

        Reageren is alleen mogelijk voor aangemelde gebruikers