Afbeeldingen verbeteren in WordPress

Afbeeldingen verbeteren in WordPress


Het is lang geleden dat afbeeldingen iets te groot waren om via internet te laden. Tegenwoordig kunnen websites niet bestaan ​​zonder deze. Hoewel de internetsnelheden in de loop van de jaren dramatisch zijn gestegen, is het van essentieel belang dat u voor de foto’s op uw blog zorgt.

Alleen omdat het eenvoudig is om afbeeldingen naar uw site te uploaden, betekent dat niet dat u dat zonder enige voorbereiding moet doen. Niet-geoptimaliseerde afbeeldingen kunnen uw site in feite op vele manieren beschadigen; van het beïnvloeden van de manier waarop bezoekers over u denken tot de snelheid van uw website en SEO-rankings. Als je daar nog niet aan hebt gedacht, zijn we hier om je verschillende manieren te laten zien om afbeeldingen in WordPress te verbeteren.

In deze gids gaan we u laten zien:

  • Hoe u afbeeldingen voor WordPress kunt optimaliseren om uw site te versnellen en SEO te verbeteren
  • Verander de manier waarop WordPress JPEG-afbeeldingen comprimeert
  • De meest populaire plug-ins voor beeldoptimalisatie voor WordPress
  • Voeg lui laden toe voor uw video’s en afbeeldingen
  • Geef beelden voor en na afbeeldingen op een aantrekkelijke manier weer
  • Interactieve afbeeldingen maken – tekenen, beschrijvingen en links toevoegen
  • Hoe extra afbeeldingsformaten opnieuw te genereren
  • Verwijder de afbeeldingskenmerken voor breedte en hoogte met jQuery
  • Aangepaste afbeeldingsformaten maken in Media Uploader
  • Maak automatisch een screenshot van elke website en publiceer deze als afbeelding in uw bericht

Contents

Hoe u afbeeldingen voor WordPress kunt optimaliseren, zodat u uw site versnelt en SEO verbetert

Waarom zou u afbeeldingen voor WordPress optimaliseren? Als je moeite doet, kun je het volgende verwachten:

  • Snellere site
  • Betere SEO
  • Kleinere back-ups
  • Minder bandbreedtegebruik
  • Tevreden gebruikers

U moet ook weten dat er verschillende fasen zijn waarin u de afbeeldingen kunt optimaliseren. Je kunt de foto’s al verzorgen voordat je ze upload naar een blog of je kunt dat doen na het uploaden.

Test snel afbeeldingen op uw site

Voordat u aan de optimalisatie gaat werken, kunt u snel uw site controleren op snelheid en prestaties. Door een van de tools uit de lijst te gebruiken, weet u snel in welke vorm de afbeeldingen op uw site staan.

We gebruiken graag GTmetrix die u zelfs de exacte afbeeldingen laat zien die ervoor zorgen dat uw site langzamer laadt.

Optimaliseer afbeeldingen voor WordPress voordat u ze uploadt

Tijdens het bloggen nemen de meeste mensen niet alle noodzakelijke stappen om hun afbeeldingen te optimaliseren. Meestal namen mensen gewoon een foto van hun camera of smartphone, downloadden ze een foto van internet of maakten ze er een met behulp van computersoftware.

Ze denken niet aan formaten, afbeeldingsafmetingen of bestandsnamen. Als de foto er goed uitziet, gaan ze ervan uit dat deze klaar is voor internet. Als u uw afbeeldingen niet controleert, bouwt u aan een ramp.

Formaat van afbeeldingen wijzigen

Formaat van afbeeldingen wijzigen

Upload geen afbeeldingen naar uw WordPress-website voordat u de breedte en hoogte van elke afbeelding hebt gecontroleerd. Als je bijvoorbeeld afbeeldingen met een maximum van 700px weergeeft, is het echt niet nodig om een ​​bredere afbeelding te uploaden. Als u dit doet, heeft u een groter bestand waardoor uw site langzamer wordt, terwijl de uitvoer hetzelfde is. WordPress zal extra grootte creëren, maar dat is niet het excuus om de afbeeldingen niet voor te bereiden voordat ze worden geüpload.

Het formaat van afbeeldingen wijzigen is snel en eenvoudig. Er zijn veel gratis tools zoals Microsoft Paint die je daarbij kunnen helpen. U kunt zelfs gratis online tools vinden voor het vergroten of verkleinen van afbeeldingen zoals Eenvoudig formaat wijzigen.

Afbeeldingsafmetingen variëren van thema tot thema. Als u niet zeker weet welke u moet gebruiken, bekijk dan uw WordPress-thema van naderbij en inspecteer afbeeldingen, zoek naar documentatie of vraag ondersteuning voor hulp.

Verander de kwaliteit

Nadat u de afmetingen hebt gewijzigd, moet u overwegen de kwaliteit van afbeeldingen te wijzigen. Afhankelijk van de software zijn er verschillende manieren om de kwaliteit van afbeeldingen te wijzigen. Met de altijd populaire Photoshop kunt u bijvoorbeeld afbeeldingen opslaan voor internet. Met deze optie kunt u afbeeldingen met een lagere kwaliteit opslaan, maar ze worden geoptimaliseerd voor uw site.

Als u ervoor kiest om een ​​afbeelding als JPEG op te slaan, vraagt ​​Photoshop u om het kwaliteitsniveau te kiezen. In dit geval zal het verlagen van de kwaliteit van 12 naar slechts 8 de grootte van een afbeelding drastisch verminderen, terwijl het kwaliteitsverschil niet zo groot zal zijn.

Als u nog steeds geen software gebruikt om de kwaliteit van uw foto’s te veranderen, kunt u gratis online proberen Kleine PNG gereedschap. Upload gewoon een foto en kijk wat voor verschil het kan maken.

Kies het juiste formaat

Zelfs na de wijzigingen in grootte en kwaliteit moet u overwegen het formaat te wijzigen. Om te beginnen, door gewoon het juiste formaat te selecteren, kunt u een paar kilobytes van een afbeelding verwijderen, zo niet meer.

Afbeeldingsindelingen

De algemene regel is heel eenvoudig. Als je een foto hebt, maak deze dan JPEG. Als u een logo, vectorafbeelding of een zeer eenvoudige door een computer gegenereerde afbeelding heeft, ga dan met PNG. Als je een heel kleine afbeelding hebt zonder verlopen of als je een eenvoudige animatie wilt weergeven zoals hierboven, kun je GIF gebruiken. Over het algemeen zijn PNG-afbeeldingen behoorlijk groter dan de JPEG-afbeeldingen en kunt u profiteren van het wijzigen van het formaat.

In veel gevallen levert het opnieuw formatteren van afbeeldingen geen significante kwaliteitsverschillen op, terwijl u het verschil in grootte kunt verwachten. Geef de volgende keer voordat u een PNG-foto uploadt een foto en probeer deze op te slaan als JPEG om het verschil te zien. Voor meer gedetailleerde uitleg, kijk dan op de verschil tussen PNG, JPEG, GIF en SVG.

Zorg voor bestandsnamen

Hoewel de bestandsnaam misschien onbelangrijk klinkt, is het eigenlijk iets waar u zich zeer bewust van moet zijn. De naam van uw afbeeldingsbestand bevat waardevolle informatie voor SEO. Als u wilt dat anderen uw afbeelding kunnen vinden op Google en andere zoekmachines, moet u deze een goede naam geven.

We raden u aan afbeeldingen een naam te geven zonder spaties te gebruiken. Vergeet niet zoekwoorden op te nemen als u wilt dat de pagina en de afbeelding een rangorde krijgen. Als u bijvoorbeeld een afbeelding van Ferrari California uploadt, moet de bestandsnaam ‘ferrari-california.jpg’ zijn. Als u een SEO-plug-in voor WordPress gebruikt, weet u al dat deze uw alt-tags op zoekwoorden controleert. Ja, het is echt zo belangrijk om een ​​goede afbeeldingsnaam te hebben.

Optimaliseer afbeeldingen voor WordPress na het uploaden

Nadat u afbeeldingen op uw computer hebt voorbereid, kunt u doorgaan met uploaden. Hopelijk hebben je afbeeldingen precies de juiste maat en kwaliteit. Je hebt ervoor gezorgd dat het formaat en de bestandsnaam correct zijn. Na het uploaden vraagt ​​WordPress je om aanvullende informatie. Sla de meta-informatie niet over; vul de details over uw afbeeldingen in zodat u ze gemakkelijk kunt ordenen en u kunt voorbereiden op SEO.

Titel, beschrijving, alt-tekst en bijschrift

Terwijl u voor de technische zaken zorgt, mag u de SEO niet vergeten. Voeg altijd de titel en beschrijving toe aan uw media. Dit zal je helpen met WordPress mediabeheer en het zal ook werken aan betere SEO. Vergeet ook niet de alt-tag die wordt weergegeven voor bezoekers die uw afbeelding niet goed kunnen zien. Dit is niet alleen nuttig voor uw gebruikers, maar het helpt u ook bij SEO. Uw pagina zal beter scoren en gebruikers zullen uw nieuwe afbeeldingen gemakkelijker kunnen vinden.

Hoewel u niet altijd ondertiteling nodig heeft, moet u er wel een toevoegen voor afbeeldingen die aanvullende uitleg nodig hebben (bijvoorbeeld schermafbeeldingen).

Bewerk afbeeldingen met WordPress

Als je je realiseert dat een foto nog verder moet worden bewerkt, moet je weten dat WordPress je dit toestaat, zelfs nadat je het bestand hebt geüpload. Wijzig de afbeeldingen voor rotatie, bijsnijden en schalen je hebt al geüpload. U kunt zelfs alleen een miniatuur of alle andere formaten bewerken. De eigen editor van WordPress is heel eenvoudig, maar het kan je van tijd tot tijd besparen.

Regenereer alle miniaturen

De meeste van de vorige technieken helpen je met nieuwe afbeeldingsbestanden die je nog gaat uploaden. Maar wat als u al honderden, zo niet duizenden bestanden hebt geüpload naar uw WordPress-site? Maak je geen zorgen; u kunt die afbeeldingen nog steeds optimaliseren en hun afmetingen wijzigen.

Voor een snelle oplossing bent u mogelijk geïnteresseerd in een gratis plug-in Regenerate Thumbnails die door meer dan een miljoen gebruikers is gebruikt. Als je meer controle over afbeeldingen wilt, bekijk dan enkele van de beste WordPress-plug-ins voor beeldoptimalisatie die we je in de volgende regels van dit artikel laten zien.

Hoe extra afbeeldingsformaten opnieuw te genereren

Gebruik WordPress-plug-ins

Natuurlijk zijn er tientallen WordPress-plug-ins die u kunnen helpen bij het optimaliseren van afbeeldingen op uw site. Scroll naar beneden om de beste WordPress-plug-ins te zien voor het optimaliseren van afbeeldingen.

Lazy Laad afbeeldingen indien nodig

Soms is de kwaliteit van de foto’s veel belangrijker dan hun formaat. Dit geldt vooral voor fotografen die willen dat hun foto’s van topkwaliteit zijn. Ze kunnen niet het risico lopen de grootte of kwaliteit van bestanden te verminderen. Maar dat betekent niet dat u de optimalisatie moet vergeten. Om in dit geval afbeeldingen voor WordPress te optimaliseren, moet u lui laden overwegen.

Lazy load is een techniek die afbeeldingen alleen laadt wanneer gebruikers ze nodig hebben (scroll naar hen). Als u bijvoorbeeld twintig hoogwaardige foto’s in één artikel heeft geüpload, zouden ze uw site enorm vertragen. Maar als u lui de afbeeldingen laadt, zou het artikel razendsnel zijn en zouden foto’s alleen worden geladen wanneer dat nodig is – op het moment dat een gebruiker ze bereikt.

Zorg voor responsieve afbeeldingen

Hoewel de meeste WordPress-thema’s responsief zijn, betekent dat niet per se dat uw afbeeldingen ook responsief zijn. Aangezien u niet wilt dat een grote afbeelding op een klein scherm wordt geladen, moet u extra afbeeldingsformaten voor uw site registreren. Als uw thema geen responsieve afbeeldingen gebruikt, overweeg dan om een ​​professional in te huren voor de klus – het is niet zo eenvoudig als het misschien klinkt.

Optimaliseer afbeeldingen voor sociale media

Als je ervoor wilt zorgen dat je afbeeldingen er goed uitzien op sociale media, moet je een extra stap zetten en metatags en schema-opmaak optimaliseren.

Als je een SEO-plug-in zoals Yoast gebruikt, vergeet dan niet om de instellingen te controleren. Yoast laat je bijvoorbeeld een paar dingen instellen met betrekking tot sociale media. Navigeer dus naar SEO -> Sociaal en voer de informatie in op Facebook, Twitter, Google+ en Pinterest.

Als je meer wilt, en je wilt afbeeldingen optimaliseren voor extra social media websites, ga dan naar WPSSO – Nauwkeurige metatags + schema-opmaak voor optimalisatie van sociaal delen en SEO-plug-in.

Verander de manier waarop WordPress JPEG-afbeeldingen comprimeert

Als je een heleboel JPEG-afbeeldingen uploadt naar je WordPress-website, heb je misschien gemerkt dat ze hun oorspronkelijke kwaliteit verliezen. Als je je hebt afgevraagd of WordPress de schuldige is, dan heb je nu je antwoord – ja, dat is het!

Zodra u een afbeelding in JPEG-indeling uploadt, WordPress verandert automatisch de compressie en besluit dat u wilt dat de afbeelding kwaliteit verliest. Om specifieker te zijn, gebruikt WP 90% compressie op uw JPGE’s. Dat is geweldig als je afbeeldingen er alleen zijn om als thumbnails te gebruiken of om in een post te laten zien, maar als je je foto’s uploadt, wil je dat ze zo goed mogelijk zijn, toch?

Gelukkig heb je maar één regel code nodig om dit te veranderen.

Stop de compressie van JPEG-afbeeldingen:

Als u niet wilt dat uw JPEG-afbeeldingen worden gecomprimeerd, kopieert en plakt u eenvoudig de volgende code in uw functies.php-bestand:

add_filter ('jpeg_quality', function ($ arg) {return 100;});

Vergeet de wijzigingen niet op te slaan en je bent klaar om nieuwe afbeeldingen te uploaden.

Aan de andere kant zijn afbeeldingen misschien niet zo belangrijk voor u. U wilt dus misschien dat ze nog meer worden gecomprimeerd en u tijd bespaart bij het laden van uw site. Als u het laatste nummer in die coderegel wijzigt, wijzigt u de kwaliteit van nieuw geüploade afbeeldingen.

Comprimeer JPEG-afbeeldingen nog meer:

Hoe lager het nummer, hoe meer afbeeldingen worden gecomprimeerd. Om die JPEG’s bijvoorbeeld nog meer te comprimeren, heb je deze code nodig:

add_filter ('jpeg_quality', function ($ arg) {return 80;});

Vergeet niet; standaard compressieniveau is 90.

Belangrijk: Dit heeft alleen invloed op afbeeldingen die u uploadt nadat u de code in de functies.php hebt geplakt. Om de grootte en kwaliteit van de afbeeldingen die je al in de bibliotheek hebt te wijzigen, heb je een plug-in nodig. Bekijk hoe u extra afbeeldingsformaten opnieuw kunt genereren.

De meest populaire plug-ins voor beeldoptimalisatie voor WordPress

Aan het begin van dit artikel bespraken we hoe u afbeeldingen voor WordPress kunt optimaliseren, zodat u uw site versnelt en SEO verbetert. Zoals je had kunnen zien, zijn er een paar verschillende methoden die je kunt gebruiken. Het is belangrijk om voor afbeeldingen te zorgen voordat je ze uploadt naar je blog. Maar als er al foto’s op de site staan, kan het onmogelijk worden om elke afbeelding afzonderlijk opnieuw te optimaliseren en ze vervolgens opnieuw te uploaden.

Maak je geen zorgen; niemand verwacht dat je dat in de eerste plaats doet. Blijf de volgende minuten bij ons, want we gaan u de populairste plug-ins voor beeldoptimalisatie voor WordPress laten zien.

Om afbeeldingen te optimaliseren, hoeft u alleen de plug-in uit de lijst te selecteren. U moet het configureren en de dingen kiezen die de plug-in voor u zal doen. Daarna kunt u ontspannen en het werk delegeren aan de plug-in van uw keuze, terwijl u kunt beginnen met het organiseren van uw mediabestanden.

De volgende plug-ins helpen je om de afbeeldingen op elke WordPress-site die je hebt te comprimeren. Ze zorgen ervoor dat de site sneller wordt geladen en helpen u uiteindelijk de SEO te verbeteren.

WP Smush

PRIJS: gratis

Met meer dan 700.000 actieve installaties moet WP Smush een van de beste plug-ins voor beeldoptimalisatie voor WordPress zijn. Het kan afbeeldingen snel optimaliseren door verschillende compressietechnieken te gebruiken. Het mooie van het comprimeren van afbeeldingen met WP Smush is dat afbeeldingen niet in kwaliteit verliezen. Geloof je ons niet? Test de plug-in.

Toen we het hadden over het voorbereiden van afbeeldingen voor WordPress, vermeldden we dat het formaat wijzigen een cruciaal onderdeel is van het optimalisatieproces. Met deze plug-in hoeft u zich daar geen zorgen over te maken, aangezien WP Smush u maximale afmetingen laat instellen. Daarna worden alle grotere afbeeldingen automatisch verkleind voordat u ze aan de bibliotheek toevoegt.

Deze fantastische plug-in kan werken met JPEG-, GIF- en PNG-bestanden. Het werkt met al uw mappen, zorgt automatisch voor de bijlagen en werkt zelfs op meerdere locaties. U kunt handmatig op elke afbeelding werken of er vijftig in bulk bewerken. Als je nog betere resultaten en meer opties wilt, ga dan naar WP Smush PRO.

EWWW Image Optimizer

PRIJS: gratis

Achter de grappige naam staat een van de meest populaire plug-ins voor beeldoptimalisatie voor WordPress. Net als de eerder genoemde kan EWWW Image Optimizer uw afbeeldingen comprimeren zonder de kwaliteit ervan aan te tasten. Als je bedenkt dat de plug-in je site binnen enkele seconden kan versnellen, ben je al op weg om het te downloaden. Zodra u dat doet, kunt u afbeeldingen in bulk optimaliseren en galerijen zoals GRAND FlaGallery, NextCellent en NextGEN krijgen zelfs hun eigen Bulk Optimize-pagina’s.

Alle afbeeldingen die de klasse WP_Image_Editor in WordPress gebruiken, zijn dat automatisch geoptimaliseerd, terwijl je de magie op alle anderen handmatig kunt bewerken. We vinden het leuk dat je mappen kunt selecteren die je wilt optimaliseren. Voor meer informatie hierover en welke plug-ins de klasse gebruiken, opent u de officiële EWWW Image Optimizer-pagina op WordPress repository.

Comprimeer JPEG- en PNG-afbeeldingen

PRIJS: gratis

Kleine afbeeldingen comprimeren

Als schattige kleine panda met het WordPress-logo je niet meer wilt leren over deze plug-in, weten we niet wat het wel zal doen. En als de panda er bekend uitziet, komt dat omdat het dezelfde is waarmee je afbeeldingen op de TinyPNG-website kunt comprimeren. Ja, het lijkt erop dat het dier veelzijdiger is dan we aanvankelijk dachten. Maar laten we ons concentreren op de plug-in.

Als je voor deze plug-in kiest, zal de Panda je afbeeldingen automatisch optimaliseren. Elke keer dat u een nieuwe uploadt, zal de plug-in het overnemen en zijn werk doen. Toch kunt u individuele afbeeldingen optimaliseren of dat in bulk doen door naar de mediabibliotheek te gaan.

Comprimeer JPEG- en PNG-afbeeldingen ondersteunt zelfs geanimeerde PNG’s, werkt perfect op meerdere locaties, het is WooComerce-compatibel en zal geen problemen hebben met WP Offload S3.

Het mooie van de plug-in is dat u hiermee de maximale breedte- en hoogtekenmerken voor alle afbeeldingen kunt instellen. Maak je geen zorgen als je je zorgen maakt over wat de metadata zal doen; de panda houdt alle info intact.

Er zijn geen limieten voor de bestandsgrootte, u kunt een dashboardwidget instellen en het werkt zelfs met de mobiele WordPress-app. Daarom heeft Compress JPEG & PNG-afbeeldingen meer dan 100.000 actieve installaties en verdient het een plek op de lijst met beste plug-ins voor beeldoptimalisatie voor WordPress.

Onzin

PRIJS: gratis

Onzin

Hoewel de omslagafbeelding voor deze plug-in je misschien wegjaagt, neem even de tijd en bekijk alle functies van Imsanity. Oh, zelfs de naam van de plug-in klinkt gek, toch? Als je eenmaal akkoord bent met de naam van de plug-in, zul je zien dat deze veel te bieden heeft.

Imsanity kan afbeeldingen automatisch schalen, stelt u in staat maximale afmetingen in te stellen en heeft zelfs een optie voor groot formaat wijzigen. Dit is belangrijk als je al honderden foto’s op je blog hebt die moeten worden geoptimaliseerd.

Deze gratis plug-in is een geweldige optie als je niet veel met de instellingen van de plug-in wilt worstelen. Het enige dat nodig is, is Imsanity installeren en activeren, een paar opties instellen en je kunt het vergeten; het zal zijn eigen weg naar beeldoptimalisatie beheren.

We hielden van de optie waarmee je BMP-afbeeldingen naar JPG kunt converteren. Voor het geval je veel BMP-bestanden hebt die je enige tijd geleden per ongeluk hebt geüpload, zal dit een redder in nood zijn.

ShortPixel Image Optimizer

PRIJS: gratis

ShortPixel Image Optimizer

Met meer dan 30.000 actieve installaties is ShortPixel Image nog steeds een van de meest populaire plug-ins voor beeldoptimalisatie voor WordPress. De plug-in zit boordevol functies en het zal een must-have zijn voor sites die veel afbeeldingen moeten optimaliseren.

ShortPixel Image Optimizer optimaliseert niet alleen JPG-, PNG-, GIF- en PDF-documenten voor u, maar laat u ook converteer elke JPEG-, PNG- of GIF-afbeelding naar WebP. De plug-in werkt goed met andere galerie-plug-ins en het maakt niet uit of uw site HTTP of HTTPS gebruikt. Hiermee kunt u EXIF-gegevens uit afbeeldingen verwijderen (iets dat fotografen graag willen hebben).

De plug-in herkent afbeeldingen die al zijn geoptimaliseerd, zodat ze deze indien nodig zullen overslaan. U kunt automatische optimalisatie toestaan ​​of niet toestaan ​​en nog veel meer met deze fantastische plug-in. Bekijk de officiële pagina in de repository om alle functies te zien.

Optimus – WordPress Image Optimizer

PRIJS: gratis

Optimus

Net als de eerder genoemde plug-in, optimaliseert Optimus uw afbeeldingen voor WordPress en doet dat zonder de kwaliteit van uw afbeeldingen te beïnvloeden. U kunt de plug-in dingen automatisch laten oplossen, of u kunt de optie uitschakelen en alleen afbeeldingen optimaliseren wanneer dat nodig is.

Optimus werkt op meerdere locaties, het is geen onbekende voor WordPress e-commercesites en het is volledig geoptimaliseerd voor WordPress Mobile Apps en Windows Live Writer. Het versnelt uw site zonder dat u een coderegel hoeft aan te raken. De plug-in biedt veel meer, maar u moet wel kiezen voor de premium-versie. Ga voor meer informatie naar de officiële pagina in de repository van WordPress-plug-ins.

Voeg lui laden toe voor uw video’s en afbeeldingen in WordPress

Zodra u veel video- en beeldmateriaal aan uw website toevoegt, is het duidelijk dat het langzamer begint te laden. Het maakt niet uit waar ze vandaan komen, video’s en grote afbeeldingen zullen een zwaar gewicht op uw site hebben en uw bezoekers veel langer laten wachten dan nodig is om alle inhoud te laden. Met WordPress hoeft dat geen probleem te zijn en hier is hoe u de situatie eenvoudig kunt oplossen.

Als je je weg kent in PHP, is er een geweldig artikel over het toevoegen van lui laden voor afbeeldingen en de oneindige scroll geschreven door onze collega’s op Elegante thema’s.

Zo niet, dan zullen we in de volgende paar regels enkele van de meest populaire luie laadplug-ins noemen die dat wel zullen doen laat uw site sneller laden. En u hoeft niet veel meer te doen dan een plug-in te installeren en deze in een paar snelle stappen in te stellen.

Lazy Load voor video’s

PRIJS: gratis

Lazy Load voor video's

Als je veel YouTube- en Vimeo-video’s hebt, kun je overwegen om deze plug-in te installeren. Zodra je het hebt ingesteld, plaatst de plug-in een afbeelding op je video en daardoor laadt je website veel sneller. Zodra een bezoeker naar een video scrolt, wordt deze afbeelding weergegeven met een afspeelknop erop. Na een klik wordt de video geladen en afgespeeld. Een eenvoudige demo is te zien op de site van de ontwikkelaar.

WP YouTube Lyte

PRIJS: gratis

WP YouTube Lyte

Deze plug-in doet zijn werk op een snelle en gemakkelijke manier. Nadat je het hebt geïnstalleerd, voeg je gewoon een link toe aan je YouTube-video of gebruik je een shortcode om er een toe te voegen. Je kunt kiezen tussen het toevoegen van een normale video, afspeellijst of alleen audio van geselecteerde video. Daarna krijgen je YouTube-video’s een afbeelding erover die lui laden mogelijk maakt. Klik gewoon op de afbeelding om uw video of audio te starten.
Bekijk een demo op de site van de ontwikkelaar.

a3 Lazy Load

PRIJS: gratis
DEMO 1
DEMO 2

a3 Lazy Load

Deze is gewijd aan uw mobiele site. Als je veel afbeeldingen en / of video’s hebt die je aan je bezoekers op mobiele apparaten wilt laten zien, kijk dan eens naar a3 Lazy Load. Hiermee kunt u lui laden toevoegen aan uw afbeeldingen en video’s en met de plug-in kunt u zelfs overgangseffecten kiezen die voor gebruikers zullen verschijnen terwijl ze door de inhoud scrollen die wordt geladen.

In het admin-gebied kunt u gemakkelijk de inhoud die u wilt luieren laden in- en uitschakelen. Voor degenen die zijn ingeschakeld, wordt inhoud alleen geladen op het moment dat een bezoeker naar dat deel van de inhoud scrolt.
Er is een mooi getoonde demo met 1000 afbeeldingen – elk wordt pas geladen als je ernaartoe bladert. Omdat deze plug-in ook lui video’s laadt, is er een videodemo die u kunt zien door op de bovenstaande link te klikken.

BJ Lazy Load

PRIJS: gratis

BJ Lazy Load

Als je geen ondersteuning voor video’s nodig hebt en alleen wilt dat je afbeeldingen lui laden, moet je deze WP-plug-in bekijken. Eenmaal geïnstalleerd en ingesteld, zal het uw afbeeldingen, miniaturen, Gravatar-afbeeldingen en zelfs iframes vervangen door een tijdelijke aanduiding. Net als bij een eerder genoemde plug-in, wordt de inhoud alleen geladen zodra een gebruiker ernaar komt.

Of het nu gaat om afbeeldingen of video’s die u lui wilt laden, een van de bovengenoemde plug-ins helpt u binnen een paar seconden. Ze zijn allemaal gratis, dus er is geen excuus om niet ten minste een van de plug-ins te proberen en te zien hoeveel gewicht van je schouders het zal kosten. Natuurlijk zijn er veel andere plug-ins met dezelfde functie en u bent vrij om te bladeren en ze allemaal te proberen.

Geef beelden voor en na afbeeldingen op een aantrekkelijke manier weer

We zijn er zeker van dat je al veel voorbeelden van voor / na afbeeldingen hebt gezien. Ik weet niet hoe het met u zit, maar het eerste dat we in gedachten hebben als we de zin ‘voor en na’ zien, is een fitnesstraining waarbij mensen hun lichaam laten zien voor en na een training.

Als je erover nadenkt, gebruiken de meeste websites een eenvoudige aanpak om de verschillen te laten zien – ze nemen beide afbeeldingen en plaatsen ze naast elkaar of zelfs boven elkaar. Als je hetzelfde resultaat wilt, zou je dit artikel niet lezen omdat je al weet hoe je dat moet doen.

Wat als we je vertelden dat er een visueel verbluffende manier is om dit voor / na probleem op te lossen en het binnen handbereik is? Welnu, er is en na een installatie zul je de ontwikkelaars prijzen omdat het eindresultaat echt heel cool is.

Twintig Twintig

PRIJS: gratis

Twintig Twintig

Twenty Twenty is de naam van deze geweldige plug-in die u gratis kunt downloaden in de WordPress-plug-in-repository.

Met de plug-in kunt u de ene afbeelding over de andere plaatsen en kunt u spelen met een schuifregelaar, zodat u de afbeelding kunt verbergen / onthullen. Bekijk de demo en u zult zien waar we het over hebben.

Oké, laten we, nu je verslaafd bent aan deze kleine plug-in, zien hoe je dit verbluffende effect kunt creëren. Hoewel het relatief eenvoudig is om het demo-effect na te bootsen, moet u nog steeds uw weg kennen in eenvoudige HTML. Laten we gaan:

  1. Maak een nieuw bericht of open het bestaande bericht
  2. Voeg twee afbeeldingen in de post in. Als u in een visuele editor werkt, zou u de afbeelding boven de andere moeten zien. Als u in een teksteditor werkt, ziet u een code die er ongeveer als volgt uitziet:
  3. 
    
    
    
  4. Voer de [twentytwenty] -tag in vóór de eerste afbeelding
  5. Voer na de tweede de [/ twentytwenty] tag in
  6. Je zou zoiets als dit in je teksteditor moeten krijgen:

    [twintigentwintig]
    
    
    
    [/ twentytwenty]
    
  7. Zorg ervoor dat uw foto’s dezelfde grootte hebben om de beste resultaten te bereiken
  8. Bekijk of publiceer uw bericht en geniet van uw visueel verbluffende foto’s voor en na

Interactieve afbeeldingen maken – tekenen, beschrijvingen en links toevoegen

Tegenwoordig is het moeilijk om een ​​website te draaien zonder multimedia. Afbeeldingen, video’s en muziek maken deel uit van vrijwel elke website. Een gemiddelde internetgebruiker is sterk afhankelijk van visuele prikkels, dus je moet zorgen voor de visuele en de interactieve delen van je site. Artikelen met afbeeldingen ontvangen 94% meer weergaven dan degenen zonder een. Het is ook al bekend dat multimedia op websites de ROI van contentmarketing kan stimuleren.

We hopen dat u niet hoeft te worden overgehaald om voor de afbeeldingen op uw site te zorgen. Zelfs als je geen afbeeldingen in artikelen gebruikt (wat je wel zou moeten doen), gebruik je toch uitgelichte afbeeldingen, toch? Er zijn vrij veel galerij-plug-ins die u kunnen helpen bij het beheren van afbeeldingen op uw WordPress-site, u kunt fotografie-gerelateerde thema’s hebben, Instagram verbinden met uw WordPress-site en nog veel meer. Maar wat als u meer interactieve inhoud wilt maken?

Om te beginnen bent u misschien geïnteresseerd in het toevoegen van een voor-na-afbeeldingseffect waar uw gebruikers dol op zullen zijn. Vergeet Virtual Reality in WordPress niet, dat populairder wordt nadat Automattic VR op WordPress.com heeft geïntroduceerd. Toch ontbreekt er iets. Is het mogelijk om interactieve afbeeldingen te maken met klikbare delen? Ja, dat is mogelijk en we gaan u laten zien hoe leuk en gemakkelijk dat is.

Aandacht trekken

PRIJS: gratis
DEMO

Het eerste dat u leuk vindt aan deze plug-in, is dat deze helemaal gratis is! Net als bij elke andere plug-in uit de WordPress-repository, kunt u deze binnen enkele minuten downloaden, installeren en activeren. Met de gratis versie kun je met één interactieve afbeelding werken. Als je meer wilt, moet je je aanmelden voor de PRO-versie, maar daar zullen we later over praten.

De plug-in reageert en u hoeft zich geen zorgen te maken dat de interactieve afbeeldingen op elk apparaat correct worden weergegeven. Niet alleen dat de afbeelding wordt geschaald volgens de schermgrootte, maar ook in de meeste moderne en oudere browsers (desktop en mobiel). Draw Attention gebruikt canvaselementen wanneer deze in nieuwe browsers worden weergegeven, terwijl het terugvalt op afbeeldingskaarten als je het in een oudere laadt.

Kenmerken

Voordat we bij een voorbeeld komen dat u laat zien hoe krachtig deze eenvoudige plug-in is, laten we eens kijken wat u kunt verwachten van Draw Attention:

  • Trek – Nadat je een afbeelding hebt geüpload, krijg je de kans om er vormen op te tekenen. Selecteer een deel van uw afbeelding dat selecteerbaar / klikbaar wordt
  • Kleuren – Pas kleuren aan zodat u hotspots kunt laten passen bij het ontwerp van uw site
  • Markeer bij zweven – Laat een ander deel van de afbeelding zien als een gebruiker over het geselecteerde deel zweeft
  • Toon meer info – Toon meer informatie over het geselecteerde deel van de afbeelding
  • Ga naar URL – Leid gebruikers om naar elke URL als ze op de selectie klikken

Teken aandacht instellingen

Voorbeeld – Interactieve kaart van Hawaï

We zullen het voorbeeld van de demosite gebruiken om u te laten zien wat u precies kunt doen met Draw Attention. Laten we dus eens kijken hoe een interactieve kaart van Hawaï eruit ziet wanneer deze is gemaakt met de plug-in.

Het eerste dat u zou moeten doen, is een afbeelding van Hawaï-eilanden vinden. Nadat u naar bent genavigeerd Trek de aandacht -> Afbeelding bewerken, je moet de foto uploaden naar het gebied in de rechterzijbalk. Zodra de afbeelding is geladen, kan het plezier beginnen.

Hier kunt u kleuren kiezen voor highlights (kleur, rand, dekking, etc.), het “meer infovak” (afbeelding, titel, tekstkleur, etc.) opmaken. Als u niet elke kleur voor de afbeelding handmatig wilt selecteren, kunt u snel een kleurenschema kiezen in de rechterzijbalk.

Trek de aandacht - hoe u interactieve afbeeldingen maakt in WordPress

Het meest magische deel vindt plaats in de Hotspot-gebieden instellingenscherm. Hier krijgt u uw afbeelding op volledig formaat geladen. Het enige dat u nu hoeft te doen, is beginnen met tekenen en een nieuwe hotspot maken. U kunt zoveel punten toevoegen als u wilt, wat betekent dat u uitgebreide selecties kunt maken zoals u wilt. Je mag zoveel hotspots maken en elk kan zijn eigen instellingen hebben.

In dit voorbeeld moet u dus een van de eilanden selecteren. Kies een titel voor het eiland, voeg een beschrijving en de extra afbeelding toe die wordt weergegeven zodra een gebruiker de hotspot zweeft (rechtergedeelte van de GIF-afbeelding hierboven weergegeven).

Je moet het proces herhalen voor elk van de eilanden waarop je interactief wilt zijn. Zodra u uw hotspots gereed heeft, kopieert u de shortcode vanaf de rechterkant. Plak de shortcode in een bericht, pagina, widget of waar je je nieuwe interactieve kaart wilt laten zien, en je bent klaar! Als u gebruikers wilt omleiden naar een andere pagina nadat ze op de selecties hebben geklikt, hoeft u alleen de URL te selecteren in plaats van de beschrijving. Zo eenvoudig!

PRO-versie

Hoewel de gratis versie perfect is als je maar één afbeelding nodig hebt, de PRO-versie kunt u zoveel interactieve afbeeldingen op uw site plaatsen als u wilt. Hoewel dit het belangrijkste is om te overwegen, krijg je met de PRO-versie zelfs meer dan meerdere afbeeldingen.

Met de functie Lay-outopties kunt u meer informatie weergeven over geselecteerde delen van de afbeelding. U kunt bijvoorbeeld informatie weergeven in een lightbox of in een eenvoudige werkbalk die verschijnt nadat een gebruiker over het geselecteerde deel van de afbeelding zweeft.

Er zijn ook twintig vooraf gedefinieerde kleurenpallets, dus u hoeft niet elke kleur handmatig aan te passen. De PRO-versie kost je $ 74 voor een enkele sitelicentie, maar als je meer dan één interactieve afbeelding nodig hebt, is dit een goed idee.

Hoe extra afbeeldingsformaten opnieuw te genereren

Het is relatief eenvoudig om nieuwe afbeeldingsformaten te registreren in uw WordPress-thema. Nadat u uw systeem hebt verteld hoe groot uw afbeeldingen moeten zijn, ze een naam heeft gegeven en heeft besloten hoe u ze wilt bijsnijden, bent u vrij om afbeeldingen te verspreiden waar u maar wilt. Maar hoe zit het met de oude afbeeldingen?

Als je een van de technieken hebt gebruikt die we je hebben laten zien, heb je de grasmat voorbereid op nieuwe afbeeldingen. Of u nu nieuwe afbeeldingsformaten voor postminiaturen gebruikt of auteurs toestaat ze in posts te gebruiken, nieuwe regels zijn alleen van toepassing op afbeeldingen die worden geüpload nadat u de wijziging heeft aangebracht in het functions.php-bestand. Om de oudere afbeeldingen te wijzigen, raden we aan de plug-in Regenerate Thumbnails te gebruiken.

Miniaturen opnieuw genereren:

PRIJS: gratis
  1. Ga naar Plug-ins-> Nieuw toevoegen
  2. Zoek naar “Regenereer miniaturen”
  3. Installeer en activeer de plug-in
  4. Navigeren naar Extra-> Regen.miniaturen

Als u het formaat van al uw afbeeldingen wilt wijzigen, klikt u eenvoudig op de knop “Alle thumbnails opnieuw genereren” en wacht u tot de plug-in het harde werk doet.

Hoe extra afbeeldingsformaten opnieuw te genereren

Als je de afbeeldingen wilt zien waarvan het formaat zal worden gewijzigd, of als je slechts een deel van de afbeeldingen wilt wijzigen, ga dan naar je mediabibliotheek waar je een nieuwe optie vindt onder “Bulkacties” en een naast elke afbeelding in de galerij.

Het goede aan de plug-in is dat deze uw originele afbeeldingen niet verwijdert. Het creëert alleen nieuwe afbeeldingsformaten die u in uw thema kunt gebruiken, terwijl de originele voor u worden achtergelaten om ze later te gebruiken of handmatig te verwijderen als u besluit dat u ze niet nodig heeft.

Dat is het. Geniet van je nieuwe miniaturen of bekijk het Eenvoudige afbeeldingsformaten plug-in die hetzelfde kan doen.

Verwijder de afbeeldingskenmerken voor breedte en hoogte met jQuery

Bij het toevoegen van afbeeldingen aan een WordPress-bericht voegt het systeem automatisch de hoogte- en breedtekenmerken toe aan de afbeelding. Dat is meestal een goede zaak, maar er zijn momenten dat je het niet leuk vindt dat elke afbeelding die kenmerken krijgt.

Als u de kenmerken op het moment van uploaden wilt verwijderen, kunt u dat doen via een eenvoudige functie die we u de vorige keer hebben laten zien.

Maar als je het artikel leest of de functie zelf probeert, heb je gemerkt dat het alleen van invloed is op afbeeldingen die zijn geüpload nadat de functie in je WP-systeem was geïnstalleerd. Als je al een database vol berichten met ingevoegde afbeeldingen hebt, zal de bovengenoemde functie je niet veel helpen met je oude afbeeldingskenmerken.

Aangezien je waarschijnlijk niet elke afbeelding handmatig kunt doorlopen en breedte en hoogte één voor één kunt verwijderen, heb je waarschijnlijk een andere functie nodig die die kenmerken verwijdert voor alle bestaande afbeeldingen die zijn ingesloten in je berichten. In dat geval bent u op de juiste plek, want we staan ​​op het punt u een eenvoudige manier te laten zien om automatisch breedte- en hoogte-afbeeldingskenmerken te verwijderen met een paar regels jQuery-code. Wees niet bang voor de vorige zin – je hoeft niet eens te weten wat jQuery is, volg gewoon de volgende drie stappen en je bent in een mum van tijd klaar.

Breedte en hoogte afbeeldingskenmerken verwijderen:

  1. Open het header.php-bestand vanuit uw themamap
  2. Kopieer en plak deze code ergens tussen en tags:
  3.  
  4. Wijzigingen opslaan

En je bent klaar! De code doet zijn magie nadat je een bericht hebt geopend dat een afbeelding bevat en verwijdert breedte- en hoogtetags.

Aangepaste afbeeldingsformaten maken in Media Uploader

Als je Media Uploader gebruikt om met afbeeldingen in WordPress om te gaan, heb je waarschijnlijk talloze opties voor afbeeldingen gezien. Tussen velen kunt u een afbeeldingsformaat kiezen dat u naar uw artikel kunt sturen.

Er zijn opties voor miniaturen, middelgrote, grote en volledige formaten, maar al die opties hebben vooraf gedefinieerde waarden. Dus als je een aangepast thema gebruikt, zit je vaker wel dan niet vast met het veranderen van breedte en hoogte voor elke afbeelding keer op keer.

Eigenlijk hoef je dat niet te doen. Er is een handige kleine functie genaamd add_image_size (), wat een geweldige tool is voor ontwikkelaars. En na dit artikel zul je het ook nuttig vinden.

Stel dat uw thema een aangepaste breedte heeft en u afbeeldingen eenvoudig wilt insluiten om daar perfect in te passen. Stel dat de breedte 666 px is (we gaan niet in op de vraag waarom u de breedte op dit aantal hebt ingesteld, het is uw keuze). Om dat te doen, moet je een extra keuzerondje toevoegen aan Media Uploader. Met de onderstaande code voegt u nog een maat toe, de halve maat van de originele.

  1. Open uw functies.php-bestand
  2. Kopieer en plak dit stuk code:
  3. functie custom_image_sizes () {
    add_image_size ('one-size', 333, 333, true);
    add_image_size ('ander formaat', 666, 666, waar);
    }
    
    add_action ('init', 'custom_image_sizes');
    
    functie show_image_sizes ($ maten) {
    $ maten ['één maat'] = __ ('Aangepast formaat 1', 'isitwp');
    $ maten ['een ander formaat'] = __ ('Aangepast formaat 2', 'isitwp');
    $ maten retourneren;
    }
    
    add_filter ('image_size_names_choose', 'show_image_sizes');
  4. Wijzigingen opslaan
  5. Probeer een afbeelding toe te voegen vanuit uw Media Uploader, waar u uw nieuwe formaatopties zou moeten zien onder de “Weergave-instellingen bijlage”

Maak automatisch een screenshot van elke website en publiceer deze als afbeelding in uw bericht

Als u een miniatuur van een website wilt weergeven, moet u naar de website gaan, deze afdrukken of een screenshot maken met een programma of een browser-add-on. Vervolgens moet u de afbeelding wijzigen, deze op de juiste maat knippen en uploaden naar uw WordPress, zodat u de schermafbeelding in een bericht kunt gebruiken.

Als u die momentopname niet zo nu en dan hoeft te maken, is dit geen probleem, maar als u vaker screenshots van verschillende websites gebruikt, zult u blij zijn te horen dat er een geweldige functie is die bespaar je tijd en je zenuwen.

In dit deel van de gids staan ​​we op het punt u de volledige functie te tonen die een shortcode maakt die u kunt gebruiken voor het maken van snapshots van elke gewenste webpagina.

Maak automatisch screenshot:

  1. Open functies.php
  2. Kopieer en plak de volgende code:
  3. functie wp_webscreen ($ atts, $ content = NULL) {
    extract (shortcode_atts (array (
    "snap" => 'http://s.wordpress.com/mshots/v1/',
    "url" => 'http://www.firstsiteguide.com',
    "alt" => 'wploop',
    "w" => '600', // breedte
    "h" => '450' // hoogte
    ), $ atts));
    
    $ img = ''. $ alt. '';
    retourneer $ img;
    }
    add_shortcode ("screen", "wp_webscreen");
  4. Wijzig standaardvariabelen in de array
  5. Wijzigingen opslaan

Deze functie maakt een shortcode die je gemakkelijk overal op je WordPress-website kunt gebruiken. Of u nu bijvoorbeeld de schermafbeelding van een webpagina in een bericht, zijbalkwidget of uw voettekst wilt gebruiken, c / p de shortcode op de juiste plek:

[screen url = ”http://www.firstsiteguide.com” alt = ”fsg” w = ”600 ″ h =” 450 ″]

Het mooie van deze functie is dat het de afbeelding opslaat als dynamische URL, wat betekent dat zodra u een momentopname met de shortcode maakt, deze zichzelf in de toekomst automatisch zal vernieuwen en altijd het huidige uiterlijk van de website die in de shortcode is gespecificeerd, zal weergeven.

Merk op dat u de parameters van de shortcode er rechtstreeks vanuit kunt wijzigen. U hoeft de code in het bestand functions.php niet te wijzigen als u de momentopname van een andere URL wilt maken of de momentopname in een andere dimensie wilt nemen.

Voorbeeld:

Stel dat u een screenshot van Google wilt maken en deze 200 × 400 pixels groot wilt maken:

[screen url = ”http://www.google.com” alt = ”Google” w = ”200 ″ h =” 400 ″]

U kunt alles nog eenvoudiger maken door de shortcode in een knop op te slaan, zodat u deze met één klik op de knop in een bericht kunt invoegen.

Conclusie

U hoeft niet alle door ons genoemde plug-ins en functies te installeren om de afbeeldingen op uw WordPress-site te verbeteren. Maar we hopen dat je op zijn minst een paar tips hebt gevonden die je zullen helpen om afbeeldingen te optimaliseren of op welke manier dan ook te verbeteren.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map