De juiste afbeeldingsgrootte voor uw website: 10-Minute Monday

Video hieronder laat zien hoe ik de juiste afbeeldingsgrootte vind voor elk websiteproject

Wat? Geen afbeeldingen?

Als u net als de meeste mensen bent, vroeg u zich bij het downloaden van uw eerste WordPress thema af wat er met de afbeeldingen was gebeurd – diezelfde afbeeldingen die ervoor zorgden dat u dat thema wilde kopen.

Toen u eenmaal over uw eerste grote teleurstelling heen was, namelijk dat uw thema GEEN afbeeldingen bevatte, was de volgende vraag die u zich waarschijnlijk stelde: ‘Hoe krijg ik mijn WordPress thema er in hemelsnaam zo uit als de demo?

Als u begint met uit te zoeken welke afbeeldingsgrootte de demo van uw thema heeft gebruikt, zult u al snel een site hebben die beter is dan de demo, omdat hij afbeeldingen heeft die u en uw bedrijf het beste weergeven.

De juiste afbeeldingsgrootte

Wanneer ik een WordPress website voor mijn klanten bouw, heb ik meestal 4 verschillende afbeeldingsformaten nodig:

  1. homepage / Front Page Header Image (a.k.a. Hero image)
  2. page header banners,
  3. blog post images, en
  4. sidebar images.

Hoe vind je de juiste grootte

De MEDIA SETTINGS informatie onder APPEARANCE is een goede plek om te beginnen omdat het je zal geven…

  • de beste afbeeldingsbreedte voor een blog post (1024 is voor het Showcase Pro theme), en
  • welke maat afbeelding het beste werkt in de zijbalk van uw thema (300)

…MAAR het geeft u geen afmetingen voor uw HOME pagina / Front Page Header Image of pagina header banners.

U vindt de afmetingen voor uw HOME page / Front Page Header Image size onder APPEARANCE -> CUSTOMIZE -> FRONT PAGE HEADER IMAGE.

In dit voorbeeld is de grootte 1600 px X 1050 px.

Page Header Banners

Het vinden van deze grootte is een beetje lastiger.

De demo header banner van de TEAM Page van Showcase Pro is bijvoorbeeld een stuk dunner dan de HOME / Front Page Header Image, MAAR de documentatie van het thema vertelt me niet welke grootte ik moet maken van de TEAM Page header banner.

Om de grootte van de headerbanner voor een willekeurige pagina te bepalen

Voer de URL van de demo van uw thema in de Firefox-browser in. Gebruik Firebug om de exacte afmetingen van de gebruikte afbeeldingen te achterhalen.

  1. Right + Click / Control + Click (Mac) op de webpagina
  2. Choose View Page Info
  3. Choose Media
  4. Scroll naar beneden naar Background
  5. Selecteer de afbeelding die hetzelfde is als de header banner
  6. Dimensions: geeft u de exacte afbeeldingsgrootte die in de demo van het thema wordt gebruikt

De afmetingen van de TEAM-headerbanner zijn exact gelijk aan die van de headerbanner van de HOME-pagina (1600 px X 1050 px), ook al wordt deze dunner weergegeven.

Bekijk de video hieronder om te zien hoe ik Firefox gebruik om de juiste afbeeldingsgrootte te vinden.

Wat?!!! Niet elke headerbannerafbeelding heeft dezelfde grootte

Toen ik de headerbanner van BLOG controleerde, was ik verbaasd dat deze niet dezelfde grootte had als de TEAM head banner. In plaats van 1600 x 1050, was het 1800 px X 960px.

De headerbanners van dit thema worden verkleind om het uiterlijk consistent te houden op de hele website.

Jouw ontwerpuitdaging zal zijn om afbeeldingen te vinden die er goed uitzien in lange en smalle ruimtes.

De “juiste” afbeeldingsgrootte voor blogposts

U gebruikt dezelfde stappen om de afbeeldingsgrootte voor de demo-blogposts van uw thema te vinden:

  • Right + Click / Control + Click (Mac) op de webpagina
  • Choose View Page Info
  • Choose Media
  • Scroll down to Background
  • Selecteer de afbeelding die hetzelfde is als de header banner
  • Dimensions: geeft u de exacte afbeeldingsgrootte die in de demo van het thema wordt gebruikt
900 px X 600 px

Eindtip

Beelden voor het web moeten 72 dpi en RGB zijn.

Afbeeldingen voor drukwerk moeten 300 dpi en CMYK zijn.

Kijk hoe ik Firefox gebruik om de juiste afbeeldingsgrootte te vinden in de Themademo

Hulp nodig bij uw afbeeldingen?

Ga met me mee op 10-Minuten-Maandag waar ik tips en trucs deel voor niet-ontwerpers die hun professionele imago willen verbeteren.

Je mag me ook bellen of e-mailen, wanneer je maar wilt. Contact

Doe mee aan mijn volgende 10-Minuten-Maandag

Geef een uitnodiging om LIVE mee te doen aan mijn volgende 10-Minuten-Maandag, en ontvang een lijst van mijn favoriete gratis bronnen voor geweldige fotografie die je kunt gebruiken op je website of in een project.

Het is LIVE en slechts 10 minuten. De sessies zijn kort en gericht op één onderwerp.

En omdat het LIVE is, kun je vragen stellen. Ik probeer de sessies ook kort te houden omdat ik weet dat je het druk hebt en geen tijd te verliezen hebt.

Geef een reactie

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