Succes met je Site

voor coaches • trainers • consultants

  • Blogs
  • WebsiteCoach stopt

8 januari 2014 door Riet 5 Reacties

Even je foto verkleinen: werkt in je voordeel

Voordat je een foto op je website plaatst moet je letten op het formaat. En dan bedoel ik niet in centimeters maar in KB = kilobytes. Klinkt ingewikkeld maar dat is het niet.
Je foto verkleinen is goed voor de snelheid van je website en fijn voor je bezoeker, want die hoeft niet lang te wachten. En Google waardeert snelle websites, dus tel uit je winst 🙂

Een digitale foto betaat uit pixels. Hoe groter en verfijnder je foto, hoe meer pixels = hoe meer bytes. Die moeten allemaal naar de computer (of tablet / smartphone) van je bezoeker overgebracht  worden om je foto te kunnen tonen.

Onder Grootte wordt de bestandsgrootte vermeld, op de Mac.
Onder ‘Grootte’ wordt de bestandsgrootte vermeld (hier op de Mac). 1,7 MB = 1700 KB = niet geschikt voor uploaden.

In de Verkenner (Windows) of Finder (Mac) wordt de grootte van je bestanden vermeld. Zie je dit niet, klik met je rechtermuisknop op de naam van het bestand en kies Eigenschappen (Windows) of Toon Info (Mac).

Ga er maar van uit dat wanneer je foto rechtstreeks van je camera of smartphone komt, deze veel te groot is om op je website te zetten. Zo’n foto bevat teveel data voor schermvertoning.

  • Een bezoeker moet al die data downloaden vooraleer hij je foto kan zien.
    Iemand die op zijn smartphone surft wil graag wat langer plezier hebben van zijn data-abonnement. Daarom wacht een bezoeker meestal niet tot jouw mooie foto geladen is.
  • Daarnaast nemen grote foto’s veel serverruimte in beslag, waardoor je eerder aan je hostinglimiet zit. Grote kans dat je dan moet bijbetalen voor een duurder hostingabonnement voordat je verder kunt werken aan je website.

Dus ga je eerst je foto verkleinen.

Probeer een foto voor in je blog / pagina naar plm. 50 kb te verkleinen
(ook aan te raden voor foto’s in je zijbalk).
Een headerfoto mag tegen de 80 kb zijn.

Foto verkleinen zonder Photoshop

Dankzij de gratis online tool pixlr.com/editor heb je geen duur fotobewerkingspakket nodig.
Je hoeft er niet eens je emailadres achter te laten.

Klik op ‘Open afbeelding van computer’ en upload je foto.
Kies onder Beeld de optie ‘Afbeeldingsgrootte‘.

Foto verkleinen bij pixlr.com
Afb. 1. Foto verkleinen: onder Beeld > Afbeeldingsgrootte

Met ‘Beperk verhoudingen‘ aangevinkt houdt de foto dezelfde verhouding, dwz. wordt niet vervormd.

500pixels breed is meestal genoeg voor een afbeelding in de tekstkolom.
Afb. 2. 500pixels breed is meestal genoeg voor een afbeelding in de tekstkolom.

(Je kunt zelfs een uitsnede maken op een vooraf bepaald pixelformaat.)
Klik OK. De foto wordt nu nogal klein getoond.
Klik onder Weergave op Alles weergeven om je foto groter te zien.

Kies 'Alles Weergeven' om de foto vergroot weer te geven.
Afb. 3. Kies ‘Alles Weergeven’ om de foto vergroot weer te geven.

In dit voorbeeld sla ik de verkleinde foto nu op mijn computer op.

pixlr.com: Opslaan met 'Bestand bewaren', je kunt nu kiezen waar je je foto wil opslaan.
Afb. 4. Onder ‘Bestand’ vind je de optie ‘Bewaren’, je kunt nu kiezen waar je je foto wil opslaan..
Probeer je foto rond de 50kb te houden. Een headerfoto mag tegen de 80kb zijn.
Afb. 5. Probeer je foto rond de 50 kb te houden. Een headerfoto mag tegen de 80 kb zijn.
pixlr.com: Ongedaan maken
Afb. 6. Niet tevreden? Met de optie ‘Ongedaan maken’ onder Bewerken, of in de rechterkolom onder Geschiedenis, kun je altijd één of meerdere stappen terug.
pixlr.com-Geschiedenis

Hierna kun je de foto uploaden naar WordPress, in je blogpost of pagina waar je de foto wil gebruiken.

Om het helemaal af te maken optimaliseer je je afbeelding voor Google, waardoor je website nog beter geïndexeerd wordt, en in Googles afbeeldingsresultaten eerder getoond wordt.


Hoe je tekst plaatst over een foto bijvoorbeeld voor je header, zoals in dit voorbeeld hieronder, lees je hier.

Plaats tekst over je foto in een paar stappen.

Categorie: Afbeeldingen in je blog Tags: afbeeldingen, Foto verkleinen

Reacties

  1. Bastin Hofman zegt

    30 maart 2017 om 17:16

    Dank voor de duidelijke info.

    Scheelt een stuk of een afbeelding van 2500-3000 kb plaatst of van 50 kb. Kwaliteit is wel merkbaar. Maar laden van de website gaat een stuk langzamer met alle grote bestanden.

    Mvg Bastin Hofman

    Beantwoorden
  2. MArio zegt

    25 juni 2015 om 09:19

    Ontzettend bedankt maar ik heb een thema op mijn wordpress waarin ik een topbar kan maken en een header. Ik had daardoor een prachtige header van ongeveer 400 hoog, 1000 breed maar die kwam op elke pagina. Ik besloot toen met sliders te gaan werken per pagina die TEGEN de header aan komt en erzelfs mooi onder valt. Daarvoor moest ik wel mijn header maar 40 hoog maken geen probleem want daarin kon ik mijn menu verplaatsen van de topbar naar de header.Maar!!! nu kan ik op andere paginas waar ik geen slider wil die grote header terug krijgen. Ook weet ik niet op welk formaat ik mijn fotos inde slider moet vergroten verkleinen. zoals je ziet zoomt de header/slider de foto veel te ver in. ik geef op fulsscreen en meer hoef ik daarin niet te doen omdat ik de slider los maak en hem daarin in de pagina als header/slider( mits dus de ruimte van de originele header is aangepast). hoe groot maak ik de originele fotos alvoresn ik ze een full screen opdracht mee geef?!!

    Beantwoorden
    • Riet de Wit zegt

      27 juni 2015 om 10:36

      Hallo Mario, om per pagina/bericht een andere header te tonen gebruik ik meestal de plugin Unique Headers of Custom Headers. Een slider is af te raden zie http://shouldiuseacarousel.com (even uit mijn hoofd, ben nu op vakantie of google even op ‘should I use a caroussel’). Succes!

      Beantwoorden
  3. Patricia Gorissen (@georganiseerd) zegt

    19 maart 2015 om 11:42

    Dankzij jouw tip doe ik dat nu altijd! RT @WebsiteCoachRdW: Even je foto verkleinen: werkt in je voordeel – Blog http://t.co/vrEmnV7CYT

    Beantwoorden
  4. @Noorganiseert zegt

    29 juni 2014 om 14:50

    Even je foto verkleinen voor op je website: werkt in je voordeel http://t.co/SZ0iOl9Csw

    Beantwoorden

Geef een reactie Reactie annuleren

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *

Meest gelezen:

  • Gratis website vergelijken: JouwWeb, Jimdo, Wix, Weebly, WordPress.com. En SquareSpace
  • Online training maken: met LearnDash
  • Foto verkleinen: werkt in je voordeel
  • Eenvoudig tekst toevoegen over een foto
  • Welk lettertype is dat?
  • Linken naar een plek binnen een pagina: met anchorlinks
  • Hoe maak je een email link in WordPress, spam-safe

Onderwerpen:

  • Afbeeldingen in je blog (8)
  • Algemeen (5)
  • Beeldend kunstenaars (1)
  • Bloggen (17)
  • Boeken – aanraders (1)
  • Gevonden worden (17)
  • Grafische vormgeving (6)
  • Handige tools (12)
  • MailChimp (1)
  • Online training (2)
  • Slimmer klanten werven (31)
  • Testimonial (8)
  • Twitter-tips (1)
  • Video (3)
  • Website sneller maken (4)
  • Wordpress (40)

WordPress

  • Website onderhoud
  • Hoe maak je een email link in WordPress, spam-safe
  • Met anchorlinks: linken naar een plek BINNEN een (andere) pagina
  • Helpt jouw 404 pagina je bezoeker, of jaag je hem weg?
  • Stop Spam met Honeypot for ContactForm 7
LEES MEER

Gevonden worden

  • Met anchorlinks: linken naar een plek BINNEN een (andere) pagina
  • Helpt jouw 404 pagina je bezoeker, of jaag je hem weg?
  • Meer bezoekers met een optimale beschrijving van je afbeeldingen
  • SEO booster: kennisbank op je website
  • Genesis 404 pagina
LEES MEER

Bloggen

  • Gratis website vergelijken: JouwWeb, Jimdo, Wix, Weebly, WordPress.com. En SquareSpace
  • Overzicht in je website met Categorieën
  • Meer bezoekers? Gebruik Power Words in je blogtitel
  • Overtuig je lezer: in 4 stappen
  • Moestuintje of Blog?
LEES MEER

Slimmer klanten werven

  • Email funnel maken
  • “Heb jij de oplossing voor mijn probleem?
  • Ontdek jouw ideale klant in 10 minuten
  • Je aanbod Magnetisch maken
  • Messcherpe Teksten en Magnetische Titels
LEES MEER

Handige tools

  • Website onderhoud
  • Backups maken – zo raak je niks kwijt
  • Email funnel maken
  • SEO booster: kennisbank op je website
  • Eenvoudig contactformulier op je wordpress website
LEES MEER

Snelle uitleg over:

Klanten werven | SEO |
WordPress | Websitebouw

Connecten?

linkedintwitterfacebook

Privacy verklaring
Algemene info WebsiteCoach

Algemene Voorwaarden | Privacyverklaring | Log in

Ook deze website gebruikt cookies: om de website goed te laten werken, en anoniem het gebruik van de website te analyseren.
En cookies waardoor jij feedback kunt geven of berichten kunt delen op social media.
OkNeeInfo
Mijn cookie instellingenherzien