nl.hideout-lastation.com
Optimaliseer uw afbeeldingen met vooraf gedefinieerde afbeeldingsformaten [WordPress-tip]
Het optimaliseren van afbeeldingen op een website is een hele klus. U kunt ervoor kiezen om minder afbeeldingen, gecomprimeerde afbeeldingen, sprites of svg te gebruiken; de lijst gaat verder. Een plaats waar veel WordPress-sites worden onderbroken, is het definiëren van afbeeldingsformaten, wat een cruciaal aspect is bij het optimaliseren van inhoudzware sites .
Beeldformaten zijn van vitaal belang omdat afbeeldingen automatisch worden gemaakt volgens de opgegeven afmetingen bij het uploaden van afbeeldingen. Dit zorgt ervoor dat, zelfs als je een 3000px breed origineel beeld hebt, het nooit wordt gebruikt als een afbeelding van 600px voldoende is. Idealiter zou een 600px brede ruimte een 600px breedbeeld moeten gebruiken in plaats van een groter beeld kleiner te maken.
In dit artikel zal ik je laten zien welke afbeeldingsformaten zijn en hoe je ze kunt definiëren.
Hoe WordPress afbeeldingen verwerkt
Als je ooit een afbeelding in een WordPress-artikel hebt ingevoegd, zou je de beeldgrootteselector moeten hebben gevonden. Hiermee kunt u kleine, middelgrote en grote versies van de afbeeldingen invoegen. De werkelijke formaten hiervoor kunnen worden aangepast in de WordPress-instellingen .
Telkens wanneer u een afbeelding uploadt via WordPress, genereert deze versies van deze afbeeldingen en slaat deze afzonderlijk op. Als u bijvoorbeeld een afbeelding van 1200 × 800 uploadt, kan WordPress 100 × 100, 600 × 400 en 900 × 600 versies maken. Wanneer u een afbeelding invoegt en "medium" kiest, wordt de actuele mediumversie gebruikt, in tegenstelling tot een verkleinde versie van het origineel.
Dit is enorm gunstig omdat het bandbreedte op de server en verwerkingstijd op de clientcomputer bespaart . Ik denk dat het geen verrassing is dat het downloaden van een afbeelding van 600 × 400 sneller gaat dan het downloaden van een afbeelding van 1200 × 800.
Als een grotere afbeelding wordt gebruikt die moet worden verkleind, moet de browser de berekeningen uitvoeren om dit mogelijk te maken. Hoewel dit geen uren zal duren, kan het merkbaar zijn op websites met veel afbeeldingen.
De juiste afbeelding op de juiste plaats
Het uiteindelijke doel moet zijn altijd de juiste afbeeldingsformaten te gebruiken . Als je een afbeelding van 440 × 380 nodig hebt, pak dan een afbeelding met die exacte grootte van de server. Er zijn twee hoofdplaatsen waar u geüploade afbeeldingen zult gebruiken: afgebeelde afbeeldingen en afbeeldingen achteraf - ik zou u eerst willen adviseren om eerst op de afbeeldingen te focussen.
In alle behalve de meest visueel gerichte artikelen maakt het niet echt uit of een in-post afbeelding 220px of 245px breed is. Welke versie u ook beschikbaar heeft, is even bruikbaar. Uitgelichte afbeeldingen worden echter meestal weergegeven in algemene formaten. Voor artikellijsten kunt u een 178 × 178-miniatuur gebruiken, voor artikelkoppen mag u een afbeelding van 1200 × 600 breed gebruiken.
Naast deze kunt u ook een aparte miniatuur / medium / groot formaat behouden zoals gedefinieerd in de instellingen om u eenvoudig toegang te geven tot specifieke dimensies bij het toevoegen van afbeeldingen aan berichten.
Dus waar het allemaal op neer komt, is dit: zou het niet geweldig zijn als we twee extra beeldgroottes hadden die we konden gebruiken voor aanbevolen afbeeldingen? Deze afbeeldingsformaten worden direct naast de rest gemaakt wanneer een afbeelding wordt geüpload. Het goede nieuws is dat WordPress je bedekt met een vrij eenvoudige functie.
Afbeeldingsformaten maken
Door de functie add_image_size () te gebruiken, kunt u alle afbeeldingsformaten definiëren die uw website nodig heeft. Laten we de twee hierboven genoemde voorbeelden maken. Plaats de onderstaande code in het bestand functions.php van uw thema of in een plug-insbestand.
add_image_size ('featured_thumbnail', 178, 178, true); add_image_size ('featured_wide', 1200, 600); Zoals u kunt zien, heeft deze functie vier parameters nodig. Met de eerste parameter kunt u een naam voor het formaat instellen. De tweede parameter is de maximale breedte, de derde, de maximale hoogte. De vierde parameter stelt het hard bijsnijden in. Indien ingesteld op true, wordt de afbeelding gemaakt op de exacte grootte die u opgeeft .
Zodra dit aan uw thema of plugin is toegevoegd, worden er door WordPress twee nieuwe versies van elk bestand dat u uploadt gemaakt.
Beeldformaten gebruiken
Deze afbeeldingsformaten kunnen worden gebruikt in een aantal functies die betrekking hebben op het ophalen van media. Laten we eerst naar aanbevolen afbeeldingen kijken. the_post_thumbnail () wordt meestal gebruikt om de aanbevolen afbeelding van een bericht weer te geven. De volgende code kan in een WordPress-lus worden geplaatst:
the_post_thumbnail ('featured_thumbnail'); Met de eerste parameter van deze functie kunt u de afbeeldingsgrootte opgeven die moet worden gebruikt. Aangezien ik 'featured_thumbnail' heb opgegeven, wordt de 178 × 178-versie van dit bestand gebruikt.
Er zijn een aantal andere functies zoals wp_get_attachment_image () en wp_get_attachment_image_src () die ook de parameter voor de afbeeldingsgrootte gebruiken. Telkens wanneer u een dergelijke functie gebruikt, moet u altijd een geschikte afbeeldingsgrootte opgeven.
Thumbnails regenereren
Als u al een site op zijn plaats heeft, kunt u uw artikelen niet retrospectief optimaliseren door een afbeeldingsformaat te definiëren. Afbeeldingsformaten worden alleen in aanmerking genomen wanneer een nieuwe afbeelding wordt geüpload, zodat ze niet worden toegepast op afbeeldingen die zich al in het systeem bevinden.
Vrees niet, de plug-in Regenerate Thumbnails maakt alles nog beter! Deze plug-in kan de miniaturen voor al uw afbeeldingen regenereren, rekening houdend met alle gedefinieerde afbeeldingsgrootten. Het kan ook een specifieke afbeelding targeten, wat handig is als je er slechts een paar hebt, of je bent aan het testen.
Zodra uw miniaturen zijn geregenereerd, ziet u de geoptimaliseerde versies op uw site. U kunt dit bekijken door de bron van de afbeelding te bekijken. Als je 'example.jpeg' hebt geüpload en je 'example.jpeg' ziet als de bron voor je aanbevolen afbeelding, klopt er iets niet. Als u 'example-178 × 178.jpeg' ziet, is alles goed; de geoptimaliseerde afbeelding wordt getoond.
Responsieve afbeeldingen
Een moeilijkheid bij het onderhouden van een geoptimaliseerde site is reactievermogen. Wanneer ik een artikel op de iPad bekijk, wordt een in-post afbeelding van een groot formaat gedownscaled omdat de maximale breedte 786px of zo is.
De eenvoudigste oplossing is om een plug-in te gebruiken zoals Hammy. Hammy werkt op basis van de inhoudsbreedte van uw thema (in tegenstelling tot de vensterbreedte van de browser) en kan op basis daarvan geoptimaliseerde afbeeldingen weergeven. Dit is vooral handig voor mobiele gebruikers waarbij de verwerkingskracht en bandbreedte een probleem kan zijn.
Verdere beeldoptimalisatie
Zoals ik in de inleiding al zei, zijn er ontelbare manieren om afbeeldingen te optimaliseren. Van sprites tot beeldcompressie kunnen heel wat technieken worden gebruikt om de laadtijden te verlagen die hand in hand gaan met afbeeldingen. Ashutosh KS heeft een geweldig artikel geschreven met 9 WordPress-plugins om de beeldprestaties te verbeteren, ik stel voor het te lezen!
Ik raad ook aan om Hassle Free Responsive Images te bekijken, die je laat zien hoe je ondersteuning voor het picture-element kunt toevoegen, iets wat je wilt gebruiken als je je eigen code wilt schrijven.
18 Verbluffende effecten die u kunt maken met CSS3 Box Shadows
We kunnen veel dingen met CSS doen, zoals bouwmodaliteiten, prachtige teksteffecten maken, een Viking-schild tekenen en zelfs een hartvorm creëren. Er is ook genoeg dat we kunnen doen met CSS3 Box Shadows, en in deze post gaan we bekijken hoe sommige ontwerpers spelen met CSS-schaduwen tot enkele geweldige resultaten .
Hoe u uw eigen WordPress-shortcodes kunt maken
Shortcodes zijn een zeer krachtige functie van WordPress. In wezen is een shortcode een tijdelijke aanduiding voor een andere inhoud. Een bekende shortcode is de ingebouwde galerij shortcode. Typ gewoon in de WordPress-editor en deze wordt vervangen door een galerij met afbeeldingen van media die naar de post zijn geüpload.
