Afbeeldingen bewerken voor internet: afmeting en uitsnede

Wat je ook doet met internet, iedereen zal af en toe afbeeldingen moeten bewerken. Of het nu gaat om een foto voor een social media update, een afbeelding in een e-mailing, of een afbeelding voor een webpagina: voor je het weet ben je een afbeelding aan het bewerken. In veel gevallen zal je twee basishandelingen uit moeten kunnen voeren: de breedte of hoogte aanpassen en een deel uitsnijden. Omdat ik hier vaak vragen over krijg, laat ik je zien hoe je dat zelf kan doen met Pixlr, in Mailchimp en in WordPress.

1. Afbeelding bewerken: breedte of hoogte aanpassen / resizen

Een “echte” foto heeft een afmeting in centimeters. Bij digitale afbeeldingen spreken we niet van centimeters maar van een resolutie in pixels. Bijvoorbeeld 470 pixels breed x 246 pixels hoog.

Het is dus belangrijk om te weten wat de breedte en hoogte is van de foto die je wilt gaan gebruiken en welke breedte en hoogte het gebied heeft waar je de foto wilt plaatsen.

Specificaties afbeelding
Windows verkenner: eigenschappen afbeelding.
Je ziet hier de breedte en hoogte in pixels

Wil je bijvoorbeeld een foto van 300 pixels breed x 300 pixels hoog plaatsen in een digitale nieuwsbrief met een breedte van 400 pixels breed, dan wordt je afbeelding niet over de volledige breedte getoond, of hij wordt opgeblazen waardoor de kwaliteit achteruit gaat. Is je foto breder, dan kan het gebeuren dat de foto raar wordt afgesneden, of dat je maar een deel van de foto ziet. Ook is je afbeelding dan onnodig groot qua omvang.

 

Lengte/breedte-verhouding

Elke afbeelding heeft een lengte/breedte-verhouding. Dat wil zeggen: de verhouding tussen de korte en lange kant van de afbeelding. Maak je een foto minder breed, dan zal ook de lengte minder breed worden. Meestal zal dat automatisch gebeuren. Doe je dat niet, dan zal je afbeelding vervormen!

Afbeelding verkleinen
Links: originele afbeelding, midden: verkleinde afbeelding,
rechts: verkleinde afbeelding (alleen hoogte) zonder lengte/breedte-verhouding

 

Breedte en/of hoogte aanpassen met Pixlr X

Met de online fotobewerker Pixlr X kan je heel makkelijk de breedte en hoogte van een foto aanpassen.

  1. Ga naar pixlr.com/x/.
  2. Open je foto via de knop Open Image.
  3. Klik op de Arrange tool. Dit is het eerste verticale icoon (of knop V).
  4. Klik op de knop Resize Image.
  5. Geef de juiste breedte (witdh) of hoogte (height) op en klik op Apply.
  6. Klik op Save om je afbeelding op te slaan.
  7. Selecteer bij foto’s zonder tekst JPG. Bevat de foto veel tekst, gebruik dan PNG.
  8. Verminder eventueel de kwaliteit. Hierdoor wordt de afbeelding minder zwaar qua omvang. Let op dat je afbeelding wel mooi genoeg blijft.
  9. Download de afbeelding naar je computer via de knop Download.

PixlrX: afbeelding verkleinen
PixlrX: afbeelding verkleinen

Breedte en/of hoogte aanpassen in Mailchimp

  1. Voeg een afbeeldingsblok in.
  2. Klik op Browse.
  3. Selecteer de gewenste afbeelding in de mediabibliotheek, of klik op Upload en selecteer de gewenste afbeelding op je computer.
  4. Klik op de knop Edit.
  5. Klik op het eerste knopje uit de verticale knoppenbalk (Crop or resize).
  6. Onder in de balk zie je de breedte (w) en hoogte (h). Pas een van de twee waarden aan. Met het vinkje LOCK DIMENSIONS aan, blijft de lengte/breedte-verhouding in tact.
  7. Klik rechtsboven in het scherm op SAVE.

Afbeeldingen verkleinen in Mailchimp
Afbeeldingen verkleinen in Mailchimp

Breedte en/of hoogte aanpassen in WordPress

  1. Open de mediabibliotheek van WordPress via de knop Media.
  2. Selecteer de gewenste foto, of upload deze eerst.
  3. Klik op de foto.
  4. Klik in de preview op de knop Afbeelding bewerken.
  5. Klik op het eerste icoon uit de horizontale balk met iconen.
  6. Vul rechtsboven bij de optie AFBEELDING SCHALEN de nieuwe breedte, of hoogte in en klik op schalen.
  7. Sluit het venster met het kruisje rechtsboven.
  8. Je kunt nu de afbeelding invoegen.

Afbeelding verkleinen in WordPress
Afbeelding verkleinen in WordPress

2. Afbeelding bewerken: uitsnijden / croppen

Misschien wil je niet de hele afbeelding gebruiken, maar slechts een deel. Of je hebt een aangepaste afmeting nodig, waarbij je de lengte/breedte-verhouding wilt behouden. In die gevallen zal je het gewenste gebied moeten uitsnijden (Engels: croppen). Veel editors hebben hiervoor een crop-tool waarmee je het gebied selecteert dat je uit wilt snijden. Soms kan het door met de muis het gebied aan te geven en/of door de lengte en breedte op te geven in pixels.

Uitsnijden met Pixlr X

  1. Ga naar pixlr.com/x/.
  2. Open je foto via de knop Open Image.
  3. Klik op de Crop-tool. Dit is het tweede icoon op de verticale knoppenbalk (of C).
  4. Selecteer het gebied dat je uit wilt snijden. Dat kan door de breedte en hoogte op te geven in pixels, of door een rechthoek te trekken met je muis. Je kunt de rechthoek verplaatsen en zo de beste uitsnede bepalen.
  5. Klik op Save om je afbeelding op te slaan.
  6. Selecteer bij foto’s zonder tekst JPG, of PNG bij afbeeldingen met veel tekst.
  7. Verminder eventueel de kwaliteit. Hierdoor wordt de afbeelding minder zwaar qua omvang. Let op dat je afbeelding wel mooi genoeg blijft.
  8. Download de afbeelding naar je computer via de knop Download.

PixlrX: afbeelding uitsnijden
PixlrX: afbeelding uitsnijden

Uitsnijden in Mailchimp

  1. Voeg een afbeeldingsblok in.
  2. Klik op Browse.
  3. Selecteer de gewenste afbeelding in de mediabibliotheek, of klik op Upload en selecteer de gewenste afbeelding op je computer.
  4. Klik op de knop Edit.
  5. Klik op het eerste knopje uit de verticale knoppenbalk (Crop or resize).
  6. Haal het vinkje bij LOCK DIMENSIONS weg.
  7. Geef de gewenste breedte (w) en hoogte (h) op.
  8. Sleep het vlak naar de gewenste positie.
  9. Klik rechtsboven in het scherm op SAVE.

Afbeeldingen uitsnijden in Mailchimp
Afbeeldingen uitsnijden in Mailchimp

Uitsnijden in WordPress

  1. Open de mediabibliotheek van WordPress via de knop Media.
  2. Selecteer de gewenste foto, of upload deze eerst.
  3. Klik op de foto.
  4. Klik in de preview op de knop Afbeelding bewerken.
  5. Klik op het eerste icoon uit de horizontale balk met iconen.
  6. Trek in de foto een kader voor de juiste uitsnede. Je kunt het kader ook verplaatsen.
  7. Je ziet rechts onder Selectie de waarden in pixels van het geselecteerde gebied. Je kunt daar desgewenst de waarde exact aanpassen en de selectie opnieuw verschuiven.
  8. Voer de wijziging door, middels een klik op het eerste icoon. Je ziet je uitsnede nu in de preview verschijnen.
  9. Klik op Opslaan om je wijzigingen te bewaren.
  10. Sluit het venster met het kruisje rechtsboven.
  11. Je kunt nu de afbeelding invoegen (soms zie je in de preview nog de originele afbeelding).

Afbeelding uitsnijden in WordPress
Afbeelding uitsnijden in WordPress

 

Tips

  • In veel gevallen is de beste werkwijze om de foto in het juiste formaat voor te bereiden en om deze daarna pas te uploaden.
  • In de praktijk zal je vaak beide bewerkingen (uitsnijden en afmeting aanpassen) gebruiken. Bijvoorbeeld eerst een uitsnede maken en dan verkleinen, of eerst verkleinen en dan een uitsnede maken.
  • Ga je een foto bewerken: maak dan altijd eerst een kopie van de originele foto als back-up!

© Openingsfoto: Pexels

Happy bestandsbeheer met de Total Commander

Regelmatig krijg ik de vraag welke tools ik als online marketeer gebruik. Met het antwoord op die vraag kan ik zeker een aantal blogberichten vullen. Er is echter één programma dat ik al mijn hele digitale leven gebruik. En dat is geen online marketingtool, maar wel een tool die het werk van elke online markteer een stuk eenvoudiger maakt: Total Commander.

Bestandsbeheer

Iedereen die met een computer werkt is vrijwel dagelijks in de weer met bestanden, zoals kopiëren, verwijderen, openen, in- en uitpakken, mappen maken, verwijderen, hernoemen, etc. Onder Windows gebruik je hiervoor standaard de Verkenner. Ik ben een echte Windows-gebruiker en laat bij voorkeur de ingebouwde Verkenner links liggen. Voor het werken met bestanden heb ik de Total Commander. Het is vrijwel het eerste programma dat ik installeer op een nieuwe computer en alle bewerkingen die ik vervolgen maak op bestanden en mappen, doe ik met dat kleine krachtige programma.

Wie nog met MS-DOS heeft gewerkt kent ongetwijfeld de Norton Commander. Moest je eerst vanaf de DOS-prompt met commando’s je bestanden bewerken, met de Norton Commander kon dat via een grafische interface. Revolutionair was de opdeling in twee vensters. In elke venster kon je een andere directory openen en bestanden tussen de directories verplaatsen of kopiëren.

Norton Comander (DOS)
Norton Commander (DOS)

Total Commander

De Total Commander hanteert hetzelfde principe. Hierdoor zijn bewerkingen op bestanden razendsnel uit te voeren tussen de twee vensters. Dat kan natuurlijk met je muis, maar ook met verschillende toetsencombinaties. Zo open je met * een selectietool waarmee je direct alle bestanden (*.*) selecteert of een deelselectie maakt (*.txt). Daarna kopieer je met de toets F5 de volledige selectie naar het andere venster. Je bent trouwens niet beperkt tot mappen, want je kan een van de vensters ook verbinden met een webserver en zo de bestanden en mappen op je server bewerken. Of een zip-bestand openen en direct bestanden toevoegen of verwijderen uit het archief.

Interface van de Total Commander
De interface van de Total Commander

Sinds 1993 wordt het programma ontwikkeld en er zitten inmiddels ontzettend veel slimme opties in en zonder dat de focus op bestandsbeheer is verloren. Als jij iets wilt doen met een bestand of map, dan kan het met de Total Commander! Voor de nerds onder ons… je kunt probleemloos reguliere expressies gebruiken bij het selecteren van bestanden, of zelfs bij het batchgewijs hernoemen van bestanden. Ontzettend krachtig!

Total Commander: inhoud van bestanden bekijken
File-viewer: inhoud van bestanden bekijken

Multi rename tool
Multi rename tool

Plug-ins

Het programma biedt ook ondersteuning voor plug-ins van externe ontwikkelaars, waardoor allerlei extra functionaliteiten zijn toe te voegen. Deze zijn onderverdeeld in de volgende categorieën:

  • Packer plug-ins (bestanden in- en uitpakken in de meest exotische formaten)
  • File system plug-ins (b.v. toegang tot bestandssystemen en clouddiensten)
  • Lister plug-ins (allerlei soorten bestanden bekijken)
  • Content plug-ins (b.v. zoeken in Word- en PDF-bestanden en tonen van Exif-data)

Total Commander is bedacht en ontwikkeld door de Zwitser Christian Ghisler. Hij werkt fulltime aan de software. Ik mail Christiaan een aantal vragen.

Hoe ben je met de ontwikkeling van Total Commander begonnen?

Ik ben in 1993 als hobby met het ontwikkelen van Total Commander begonnen. Dit was tijdens mijn studie natuurkunde aan de universiteit van Bern in Zwitserland. Er was toen geen gebruiksvriendelijk bestandsbeheerprogramma voor Windows. De verkenner van Windows had maar één venster, wat onhandig is omdat je voor de meeste bewerkingen een bron en doel nodig hebt.

Hoeveel mensen gebruiken de Total Commander?

Er zijn momenteel 1.8 miljoen geregistreerde gebruikers (inclusief multi-user licenties). Het aantal ongeregistreerde gebruikers weet ik niet. Ik bespioneer de gebruikers niet.

Wat kunnen we in de toekomst nog verwachten?

Dark mode, nog geavanceerder zoeken en zoeken in zoekresultaten, opnieuw openen van recent gesloten tabs, verbeteringen in de bestandsviewers, bestanden uitwisselen tussen ftp-servers en heel veel kleine verbeteringen.

 

Maak ook je leven een stuk makkelijker!

Het zal even wennen zijn om het principe van Total Commander te doorgronden, maar als je dat eenmaal doorhebt zal je nooit meer iets anders willen. Dat garandeer ik je!

Software: Total Commander
Soort: Bestandsbeheer
Kosten: € 37 excl. BTW (je mag de software eerst 30 dagen proberen)
Website: www.ghisler.com
Onofficiële Nederlandse handleiding: Total Commander DocuWeb
Beschikbaar voor: PC Windows® 95/98/ME/NT/2000/XP/Vista/7/8/8.1/10/Windows® 3.1. Android en Windows Phone/Mobile/CE!

p.s. ik ben op geen enkele manier verbonden met Total Commander en geef je dit advies vanuit mijn enthousiasme en op persoonlijke titel.

© openingsbeeld: Pexels.

Deelt jouw website privacygevoelige data?

In kader van de nieuwe privacywetgeving worden steeds meer bedrijven zich bewust dat ze veel privacygevoelige data (onbewust) delen. Hierbij is de website natuurlijk een belangrijk aandachtspunt. Weet je namelijk welke data jouw website allemaal verzameld en deelt met externe partijen? Ik laat je zien hoe je dit inzichtelijk maakt.

Lees verder >

Is alleen mijn website down? [tip]

Een van de belangrijkste tools van een online marketeer is in veel gevallen nog steeds een goed werkende website. Eerder schreef ik al hoe je met een tool als Uptime Robot binnen 5 minuten een melding krijgt als je site uit de lucht is. Maar wat doe je daarna?

lees verder >