We leven in een wereld met hoge resolutie. En aangezien de meesten van ons meer dan acht uur per dag naar verschillende soorten schermen kijken, de kwaliteit van de afbeeldingen en karakters in deze schermen is erg belangrijk.
Hoewel ze nog maar een paar jaar verkrijgbaar zijn, zijn Retina-displays de weg van de toekomst. De hoge pixeldichtheid in Retina-displays zorgt voor heldere en scherpe beelden. En wie houdt er niet van mooie, scherpe beelden?
leren om maak een website compatibel met Retina-schermen is een belangrijke troef voor elke webontwikkelaar. Helaas is er geen ideale, perfecte oplossing om uw website gebruiksvriendelijk te maken met Retina-Ready displays.
Dus terwijl we wachten tot iemand de meest complete oplossing heeft gevonden, hebben we gekeken naar enkele van de best mogelijke opties om uw website gereed te maken. Op die manier wordt u niet op een dwaalspoor gebracht wanneer de tijd komt dat Retina op alle apparaten in een of andere vorm verschijnt.
Maar voordat u begint, neem de tijd om een kijkje te nemen Hoe maak je een WordPress thema te installeren, Hoeveel plugins moet ik installeren op WordPress.
Laten we dan aan het werk gaan!
Meerdere afbeeldingsbestanden maken
Laten we beginnen met de basis. De eenvoudigste manier om Retina Mode-ondersteuning voor uw website te krijgen, is door creëer meerdere afbeeldingsvariaties in verschillende resoluties. Dit betekent dat u voor elk type resolutie (d.w.z. 1x) een versie met hoge resolutie van die clip moet maken (d.w.z. 2x).
In principe kunt u meerdere versies van hetzelfde bestand maken en een plug-in zoals WP Retina 2x of een script zoals retina.js gebruiken om automatisch de "@ 2x" -versies van elke afbeeldingsgrootte te genereren of "@ 2x" -afbeeldingen te zoeken en de grootte die overeenkomt met elk apparaat.
Het is waar dat het maken van meerdere versies van dezelfde afbeelding een tijdrovend proces kan zijn. Helaas is er geen snelle methode die deze afbeeldingen automatisch voor u genereert. Echter, er zijn verschillende Photoshop-plug-ins waarmee u uw afbeeldingen snel kunt repareren.
Plugins zoals " Retinize it Dit is een reeks Photoshop-acties waarmee u eenvoudig uw ontwerpen voor Retina-displays kunt optimaliseren. Als u een oudere versie van Photoshop (pre-CC) gebruikt, kunt u zoiets als " Vier Die in principe alles doet wat de huidige Photoshop Generator-tool doet, maar dan voor oudere versies van Photoshop.
Scaleable Vector Graphics (SVG)
De gemakkelijkste manier om door te gaan met de Retina-modus, is door Scalable Vector Graphics (SVG) op uw website te gebruiken. SVG is een XML-gebaseerde indeling voor vectorafbeeldingen. Zoals de naam al doet vermoeden, is een SVG-afbeelding schaalbaar, wat betekent dat afbeeldingen zo ver (of zo weinig) als nodig kunnen worden uitgerekt, terwijl ze toch helder en duidelijk zijn. Het kan een snelle en gemakkelijke manier zijn om Retina-modus zonder veel moeite te implementeren.
Lees ook: Hoe u WebP-afbeeldingen kunt leveren in plaats van traditionele PNG en JPG
Er zijn echter twee nadelen aan het gebruik van SVG op WordPress. De eerste is dat SVG, aangezien het een vectorformaat is, niet geschikt is voor alle afbeeldingen. U kunt SVG dus gebruiken voor logo's en pictogrammen, maar niet voor bestanden zoals foto's (wat een beetje pijnlijk is als u afbeeldingen met een hoge resolutie voor uw website wilt gebruiken). Maar als u eenvoudige pictogrammen, animaties of illustraties wilt gebruiken, kunnen SVG-bestanden zeker een optie zijn voor een Retina-compatibele website.
Het tweede nadeel van het gebruik van SVG op WordPress is dat het uit veiligheidsoverwegingen geen officieel compatibel formaat met WordPress is. Aangezien een SVG-bestand in wezen een XML-bestand is, wordt het geopend voor alle bekende kwetsbaarheden die verband houden met het XML-bestandsformaat, zoals dwanganalyse, XML External Entity Attacks (XEE), XML Denial of Service Attack (XDoS) -aanvallen, enz.
Er is echter een manier om SVG-ondersteuning voor uw website in te schakelen, waardoor uw SVG-bestanden veilig zijn.
Hoe SVG veilig in te schakelen op WordPress
Veilige SVG is een plug-in waarmee u veilig SVG-bestandsondersteuning op uw website kunt inschakelen. Deze plug-in zorgt ervoor dat uw SVG-bestanden worden gedesinfecteerd om mogelijke XML-kwetsbaarheden op uw website te voorkomen.
Blijf uit de buurt van plug-ins die het MIME-type toestaan om te uploaden van SVG naar de WordPress-mediabibliotheek, aangezien deze gevaarlijk en mogelijk schadelijk zijn voor uw website. Dus als je echt in de verleiding komt om het SVG-formaat op WordPress te gebruiken, doe dit dan veilig en download niet de eerste SVG-plug-in die je ziet.
Genereer meer conversies naar uw blog door onze te lezen 15 content typen die meer bezoekers op je blog genereren
Sommige plug-ins om Retina-compatibiliteit te integreren in WordPress
Er zijn verschillende scripts en plug-ins voor Retina-compatibiliteit die uw leven veel gemakkelijker kunnen maken wanneer u probeert een Retina Mode-compatibele website op te zetten. Zoals eerder vermeld, vervangen de meeste beschikbare plug-ins en scripts uw afbeeldingen door afbeeldingen met een hoge resolutie, alleen voor weergaven met een hoge resolutie. Ze strekken zich niet uit als een SVG: je moet nog steeds meerdere afbeeldingen met verschillende resoluties maken.
1 - retina.js
retina.js is een van de meest gebruikte scripts om afbeeldingen met een hoge resolutie te serveren. Dit is een open source-script waarmee u eenvoudig afbeeldingen met een hoge resolutie kunt weergeven op apparaten met Retina-schermen.
Het script controleert elke afbeelding op de pagina om te zien of er een versie met hoge resolutie van die afbeelding op de server staat. Als er een variant met hoge resolutie bestaat, wisselt het script de standaardresolutie door de afbeelding met hoge resolutie. Dit is een van de meest gebruikelijke manieren om afbeeldingen voor Retina-displays op uw website weer te geven.
Zie ook: GIF, Emoji's of Memes: een goed idee voor WordPress-websites?
2 - Dicht
Vergelijkbaar met retina.js, Dicht is een jQuery-plug-in die een gemakkelijke manier biedt om afbeeldingen in pixelverhoudingsformaat te presenteren. Het script roept de $ .fn.dense () -methode van de initialisatie aan, die zich richt op "img" -tags die indien nodig zullen dienen als Retina-modus compatibele afbeeldingen.
Het vervangt dus alle afbeeldingen door de bijbehorende versie met hoge resolutie, net als het script retina.js.
3 - WP Retina 2x
Dit laatste kan worden vergeleken met een magische Retina-beeldgenerator.
WP Retina 2x is een plug-in die afbeeldingsbestanden maakt die vereist zijn voor High-DPI-apparaten en deze dienovereenkomstig aan uw bezoekers weergeeft. In tegenstelling tot de vorige twee scripts, genereert het afbeeldingen met verschillende resolutie van een eerste afbeelding. Dus als u niet al te blij bent met het handmatig maken van verschillende afbeeldingen met verschillende resoluties, dan is deze optie iets voor u.
Dat is alles voor deze tutorial, ik hoop dat je hiermee je afbeeldingen kunt converteren naar Retina Ready-afbeelding.
Ontdek ook enkele premium WordPress-plug-ins
U kunt andere gebruiken WordPress plugins om een moderne uitstraling te geven en de afhandeling van uw blog of website te optimaliseren.
We bieden je hier enkele premium WordPress-plug-ins die je daarbij kunnen helpen.
1. Een mooie lijst met auteursrechten van WordPress
Zoals de naam al doet vermoeden, is de plug-in Fancy WordPress auteurslijst geeft de lijst met auteurs voor uw website weer in een widget. Het heeft een eenvoudige gebruikersinterface die het mogelijk maakt de informatie van elke auteur weergeven in de zijbalk. Het enige wat u hoeft te doen is de auteurswidget naar de zijbalk te slepen en de plug-in zal het werk doen.
De belangrijkste kenmerken zijn onder meer: de mogelijkheid om de blogauteurs weer te geven op een leuke manier om nieuwe bezoekers aan te trekken, de mogelijkheid om een auteurslijst in de zijbalk of op de pagina weer te geven, de mogelijkheid om start een wedstrijd tussen de auteurs van uw blog, een responsieve lay-out, ondersteuning voor shortcodes en nog veel meer.
Download | demonstratie | web hosting
2. Gemakkelijke inhoudsopgave
Ce WordPress Plugin gebruiksvriendelijk stelt u in staat om een inhoudsopgave in te voegen in uw berichten, pagina's en aangepaste berichttypes. Het heeft veel functies, waarvan de belangrijkste zijn:
automatisch beheer van een inhoudsopgave, ondersteuning voor de tag , Rankin Math plugin-ondersteuning, compatibiliteit met verschillende pagina-editors zoals Gutenberg, Divi, Elementor, WPBakery Page Builder en andere, de mogelijkheid om te kiezen op welke pagina's uw publicaties u wilt weergeven, het automatisch invoegen van de inhoudsopgave op bepaalde pagina's en vele andere.
Dit is een WordPress Plugin freeware die alles heeft wat je nodig hebt om je inhoudsopgave weer te geven, dus voel je vrij om het als je eerste keuze te kiezen.
Downloaden | demonstratie | web hosting
3. WooCommerce Advanced Bulk Edit
Bewerkt u regelmatig uw productcatalogus? Of je nu 100 of 10.000 producten hebt, dit WordPress Plugin premium is naar mijn bescheiden mening “A must have”: (Dat is het eerste woord dat in me opkomt).
Voor slechts een paar dollar, de plug-in WooCommerce Advanced bulkbewerking zal het leven gemakkelijker maken en u monsterlijke tijd besparen. Er is geen aarzeling het is een bom.
Downloaden | demonstratie | web hosting
Aanbevolen bronnen
Lees meer over andere aanbevolen bronnen om u te helpen bij het bouwen en beheren van uw website.
- 5 verkeersbronnen weet u waarschijnlijk niet
- Case Study: Content marketing, hoe om te leren van fouten
- Waarom freelancers een dagelijks schema nodig hebben
- 7 aspecten die zullen helpen u een succesvolle blog te maken
Conclusie
Alstublieft ! Dat is alles voor deze tutorial, ik hoop dat je hiermee Retina-Ready-afbeeldingen voor je website kunt maken. Aarzel niet om deel met je vrienden op je favoriete sociale netwerken.
U kunt echter ook overleggen onze middelen, als u meer elementen nodig heeft om uw projecten voor het maken van internetsites uit te voeren, raadpleeg dan onze gids op Creatie van WordPress blogs.
Als u suggesties of opmerkingen heeft, laat ze dan achter in onze rubriek commentaires.
...
