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.
Hoe gesplitste weergave in OS X El Capitan te activeren
Een van de meest verwachte functies in Apples nieuwste OS X, El Capitan, is waarschijnlijk de Split View . Met deze nieuwe functie kunt u zich simultaan op twee apps richten, naast elkaar, zonder de afleiding van andere apps die u op uw Mac hebt geopend.Om dit in perspectief te plaatsen, kunt u:Codeer met je favoriete code-editor aan de ene kant en bekijk de wijzigingen in de browser aan de andere kant
Ontwerp een eenvoudig freelance contract met deze website
Als je freelancer bent, is de kans groot dat je op een bepaald moment een freelance contract hebt opgesteld. Hoewel het opstellen van een contract soms vervelend kan zijn, is het van cruciaal belang dat er iets misgaat tussen u en uw klant.Als u denkt dat u veel liever echt werk doet in plaats van gecompliceerde contracten op te stellen, dan bent u wellicht geïnteresseerd in deze webtool genaamd Het freelance contract .
