How to Add Images in WordPress in 2022A Tutorial in het toevoegen van afbeeldingen in Classic en Gutenberg Editors (+het verminderen van Bestandsgrootte)

vandaag breken we uit hoe afbeeldingen in WordPress toe te voegen en hun Bestandsgrootte te verkleinen (om uw pagina ‘ s & berichten zo snel mogelijk te laden).

als je net de grondbeginselen van het starten van een blog leert, is er veel om uit te zoeken, Ik snap het. We hebben het gehad over het veranderen van de lettergrootte, het veranderen van de letterkleur, het maken van een klikbare link en nog veel meer hier.

het goede nieuws is dat in 2022, het is heel gemakkelijk om te leren hoe je afbeeldingen in WordPress met alle van de usability updates en verbeteringen die ze hebben gezien in de afgelopen tien jaar.

in deze snelle tutorial, zal ik u laten zien hoe u afbeeldingen in WordPress berichten toe te voegen, zowel in de klassieke Editor (die ik liever gebruik) en via hun nieuwere Gutenberg Editor.

nu, laten we duiken in het toevoegen van afbeeldingen aan uw WordPress berichten—terwijl ook het verminderen van hun bestandsgrootte zo veel mogelijk, om te blijven in lijn met SEO best practices en om uw pagina ‘ s te laden zo snel mogelijk.

afbeeldingen toevoegen WordPress (en bestandsgrootte verkleinen) in 2022

1. afbeeldingen toevoegen aan berichten in de klassieke WordPress Editor
2. afbeeldingen toevoegen aan berichten in de Gutenberg WordPress Editor
3. een Uitgelichte afbeelding toevoegen aan een bericht in WordPress

nu snel, voordat we duiken in deze tutorial over het toevoegen van afbeeldingen aan WordPress, zal ik je laten zien hoe je de bestandsgrootte van een afbeelding te verminderen (helpen uw berichten sneller laden) in 2 eenvoudige stappen.

installeer de (gratis) comprimeer JPEG & PNG-afbeeldingen-Plugin van Tiny PNG

u kunt de gratis comprimeren JPEG & PNG afbeeldingen Plugin voor WordPress hier downloaden van de WordPress plugin bibliotheek.

als alternatief kunt u ook zoeken naar de plugin en installeren van direct in uw plugin menu, toegankelijk aan de linkerkant van uw blog admin sectie hier-of bekijk deze snelle tutorial over het installeren van een WordPress plugin:

zodra u de plug-in Compress JPEG & PNG-afbeeldingen hebt geïnstalleerd, wordt elke nieuwe afbeelding die u uploadt naar uw WordPress-blog automatisch geoptimaliseerd en wordt de bestandsgrootte zo veel mogelijk verkleind zonder de kwaliteit van uw afbeelding in gevaar te brengen.

Opmerking: Dit is veruit de beste compressie-plugin op de markt. Het maakt tot 500 gratis beeldcompressies per maand (dat is veel meer dan je waarschijnlijk nodig hebt) voordat u een upgrade naar een betaald plan op $.009 / afbeelding voorbij je eerste 500 per maand. Het is een serieuze koopje en je zult niet vinden een betere compressie plugin die je meer Gratis credits geeft.

echter, als u beeldcompressie direct op uw eigen computer wilt uitvoeren (Gratis onbeperkt), dan raad ik de ImageOptim-toepassing aan.

Upload uw afbeeldingen

dat is het! Echt, zo makkelijk is het.

zodra u de compressie plugin op uw blog hebt geà nstalleerd—of individuele afbeeldingen eerst op uw computer hebt gecomprimeerd—bent u klaar om ze te uploaden naar uw berichten of pagina ‘ s in WordPress.

nu, laten we graven in precies hoe afbeeldingen toe te voegen aan WordPress.

1. Afbeeldingen toevoegen aan berichten in de klassieke WordPress Editor

als je net als ik en nog steeds de voorkeur aan de klassieke WordPress Editor Lay-out voor het toevoegen/bewerken van uw berichten, volg dan hier.

aan de andere kant, als je de nieuwere Gutenberg Editor gebruikt voor je post inhoud, spring dan naar de volgende sectie voor die walkthrough. Als u niet zeker weet welke editor u gebruikt, neem een kijkje op de afbeelding screenshots hieronder hier en vergelijk ze met hoe uw editor eruit ziet. Wilt u de klassieke Editor te gebruiken, maar niet zeker hoe het te krijgen? Neem 2 minuten te volgen, samen met Yoast ‘ s eenvoudige tutorial over het installeren van de klassieke Editor op uw WordPress blog.

1. Open het bericht waaraan je afbeeldingen toevoegt (en vind de juiste plek)

eerst moet je ervoor zorgen dat je in het bericht zit waaraan je een afbeelding wilt toevoegen.

dan wilt u met uw cursor navigeren naar de exacte plaats binnen uw bericht dat u de afbeelding wilt toevoegen.

2. Klik op de knop” Media toevoegen ” bovenaan je Editor

die knop zal er hier zo uitzien:

zodra u op de knop “Media toevoegen” klikt, krijgt u het scherm te zien waar u uw afbeeldingsbestand kunt uploaden.

3. Klik op “upload Files”

klik op het tabblad voor “Upload Files” en u zult naar het scherm worden gebracht waar u het keuzehulpmiddel kunt gebruiken om een afbeeldingsbestand te kiezen van waar het zich op uw computer bevindt.

als alternatief, als je een afbeeldingsbestand van je bureaublad sleept en het uploadt-je kunt het “Bestanden Uploaden” scherm overslaan en gewoon direct naar het slepen van de afbeelding en het laten vallen (er is een demo van deze in de volgende stap).

4. Upload uw afbeeldingsbestand

ik Sleep liever afbeeldingsbestanden van mijn bureaublad en laat ze vallen in de bestandsuploader (in plaats van de selector te gebruiken om ze op mijn computer te vinden), omdat het veel sneller gaat.

hier is een snelle video/GIF demonstratie van het toevoegen van een afbeelding van uw bureaublad aan WordPress:

zodra u uw afbeelding hebt geüpload, zal de compressie plugin werken het is magisch om te helpen bij het verkleinen van de bestandsgrootte (achter de schermen).

Noot: Voordat u klaar bent met uw afbeelding opties en te klikken op “Invoegen in post,” wilt u een SEO vriendelijke Alt-tekst voor uw afbeelding te schrijven-iets dat de aard van wat er gebeurt in uw afbeelding beschrijft, en idealiter weven in een van de doelgroep zoekwoorden die u hoopt dat het artikel zal uiteindelijk rang voor (in organische zoekresultaten).

5. Selecteer je afbeeldingsopties en klik op “Insert into post”

tenslotte heb je een paar opties om te definiëren voor je afbeelding. Dit omvat:

• controle van de uitlijning van uw afbeelding in uw bericht (Ik selecteer Altijd Centreren)
• uw afbeelding koppelen naar een andere pagina of posten op uw blog (of een Externe link waarnaar u de lezers wilt doorverwijzen)
• schermgrootte (ik raad uploaden altijd aan als volledige grootte om verlies van beeldkwaliteit te voorkomen)

na het selecteren van deze opties, bent u klaar om te klikken op “Insert into post” en u bent klaar om te gaan!

die knop bevindt zich hier in de rechterbenedenhoek van uw scherm:

nu wordt u teruggenomen naar uw editor-venster en ziet u de afbeelding die u zojuist hebt toegevoegd zitten op de plaats waar u het hebt geüpload.

Houd er rekening mee dat u nog steeds enkele snelle & easy editing opties hebt als u besluit iets te veranderen met de weergave van uw nieuwe afbeelding:

• u kunt het formaat handmatig wijzigen door een van de hoeken te pakken en het naar boven of naar beneden te slepen in grootte
• u kunt op het midden van de afbeelding klikken en het binnen uw post slepen om het te verplaatsen
• u kunt de afbeelding altijd verwijderen door op “backspace” of “delete” op uw toetsenbord te klikken en opnieuw te beginnen

en dat is het! Je hebt geleerd hoe je een afbeelding toe te voegen aan WordPress met de klassieke Editor.

2. Afbeeldingen toevoegen aan berichten in de Gutenberg WordPress Editor

In de Gutenberg WordPress Editor, zullen uw post editing opties er heel anders uitzien dan wat u zult zien in de klassieke Editor.Gutenberg gebruikt een benadering van het toevoegen/bewerken van inhoud door middel van een systeem van “blokken” zoals tekstblokken, headerblokken, afbeeldingsblokken enzovoort. Dus laten we eens kijken naar het toevoegen van beelden in Gutenberg.

1. Selecteer het pictogram” Afbeelding toevoegen ”

nadat u er zeker van bent dat u een afbeelding op de juiste locatie in uw bericht toevoegt, selecteert u het pictogram “Afbeelding toevoegen”. Het zal er zo uitzien.:

zodra u op het pictogram “afbeelding toevoegen” klikt, zult u een paar opties hebben voor hoe u een afbeelding aan uw bericht kunt toevoegen.

2. Kies hoe je de afbeelding

toevoegt in Gutenberg, je hebt een paar snelle opties voor het toevoegen van een afbeelding in WordPress. Dat omvat:

• Uploaden (die opent een scherm kiezen, waarmee u om te kiezen de afbeelding van de computer)
• Media Library (welke u bij uw bestaande bibliotheek van beelden—van waaruit u kunt ook slepen & drop in een afbeelding)
• Invoegen van de URL (als er een afbeelding ergens online dat u wilt importeren, kunt u paste in die link hier)

Hier is een momentopname van die opties (persoonlijk, ik klik gewoon op “Uploaden” en grijp snel het beeld dat ik wil van mijn desktop):

3. Upload uw afbeelding

zodra u de afbeelding hebt geselecteerd die u wilt uploaden, klikt u op de “Open” knop en het wordt toegevoegd aan uw bericht.

Nu u de afbeelding hebt toegevoegd, zal een kleinere miniatuur ervan verschijnen als een nieuw blok in uw bericht.

hier is een screenshot van hoe dat eruit zal zien:

4. Afbeeldingsinstellingen & snelle bewerkingsopties

voordat u verder gaat, wilt u uw Afbeeldingsinstellingen inbellen (volgens SEO best practices).

en net als bij de Classic Editor, kunt u veel verschillende instellingen en eigenschappen voor een afbeelding definiëren. Met Gutenberg, het is gewoon een beetje anders gedaan. Uw afbeelding instellingen bevinden zich in plaats daarvan op de rechter zijbalk (na de eerste keer klikken op de afbeelding).

zo zien die Instellingen eruit:

zorg ervoor dat u uw image instellingen voor ten minste deze twee eigenschappen:

• SEO-vriendelijke alternatieve tekst schrijven die de afbeelding beschrijft en weeft in een trefwoordzin
• afbeeldingsgrootte (ik toon afbeeldingen altijd op Volledige grootte om kwaliteitsverlies te voorkomen)

u kunt ook klikken in de” Style ” instellingen om wat meer genuanceerde styling & ingebouwde bijsnijdfuncties toe te voegen met Gutenberg.

5. Afbeeldingen verplaatsen binnen een Post via Gutenberg

een heel cool neveneffect van de focus van de Gutenberg editor rond het gebruik van “blokken” van inhoud, is hoe gemakkelijk je je afbeeldingen (of enige inhoud blokken voor die kwestie) kunt verplaatsen binnen een post.

na één keer klikken op de afbeelding die u wilt herschikken in uw bericht—ziet u de pijlen “omhoog” en “omlaag” vlak naast de afbeelding verschijnen.

klik op de pijlen om je afbeelding omhoog of omlaag te verplaatsen in je bericht, zoals dit:

en dat is het! Je kunt gaan.

u hebt nu ook geleerd hoe u een afbeelding aan WordPress kunt toevoegen in de Gutenberg Editor 🙂

3. Het toevoegen van een Uitgelichte afbeelding aan een bericht in WordPress

uitgelichte afbeeldingen zijn essentieel in een WordPress blog—omdat het de afbeeldingen zijn die bovenaan uw blogberichten worden weergegeven (en in zowel de zoekresultaten als op sociale mediaplatforms wanneer uw content wordt gedeeld).

Last but not least, hier is hoe een aanbevolen afbeelding toe te voegen aan een bericht (of pagina) in WordPress.

in de buurt van de rechterbenedenhoek van uw WordPress Editor venster, ziet u een sectie voor het toevoegen van een aanbevolen afbeelding. Klik op “Set featured image” en u zult worden genomen om de standaard afbeelding uploaden scherm waar u kunt toevoegen in de afbeelding die u wilt worden gekenmerkt aan de bovenkant van uw bericht (ook in de zoekresultaten en op sociale platforms).

nadat je de afbeelding die je wilt gebruiken hebt geüpload en op “Set aanbevolen afbeelding” hebt geklikt, wordt je terug naar je editor scherm gebracht en zie je een kleine miniatuur van de afbeelding rechtsonder (om te bevestigen dat je de juiste afbeelding hebt toegevoegd) zoals zo:

vrij eenvoudig, toch?

als u de verkeerde afbeelding hebt geselecteerd (of later wijzigingen wilt aanbrengen), kunt u gewoon klikken op de tekst “verwijder aanbevolen afbeelding” en u hebt de mogelijkheid om een andere afbeelding te selecteren of uploaden om in uw bericht te worden weergegeven.

laatste gedachten over het toevoegen van een afbeelding in WordPress

het toevoegen van afbeeldingen aan uw berichten in WordPress hoeft niet moeilijk te zijn.

of u nu de klassieke Editor of Gutenberg voor uw blog gebruikt, het team achter WordPress heeft hard gewerkt om het toevoegen van afbeeldingen een zeer eenvoudig proces te maken.

als je nog steeds problemen hebt, laat dan een reactie achter onderaan dit bericht en ik help je graag om problemen op te lossen die je hebt.

dat is alles voor vandaag!

we hebben net besproken hoe u afbeeldingen kunt toevoegen in WordPress 👏

Like what you see? Meld je aan om meer blogging tutorials en advies te krijgen.

Wilt U Meer Tutorials Voor Bloggen?

bekijk mijn ultieme gids om een blog te starten en er geld mee te verdienen dit jaar.