Het converteren van PDF-pagina's naar afbeeldingen voor een website vereist specifieke pixelafmetingen, geen generieke DPI-instelling. Een PDF-pagina die met 300 DPI is geconverteerd, levert een afbeelding op die duizenden pixels breed is, veel groter dan welke website-indeling dan ook kan weergeven. Het uploaden van die afbeelding naar een website verspilt bandbreedte en vertraagt het laden van de pagina. Door te converteren naar de exacte pixelafmetingen die nodig zijn voor de lay-out van de website, ontstaan afbeeldingen die snel worden geladen en scherp worden weergegeven. Bij PDF naar Afbeelding-conversie voor internetgebruik gaat het om het afstemmen van de uitvoerafmetingen op de specifieke plaats die de afbeelding op de pagina zal innemen.
Belangrijkste punten
De afmetingen van websiteafbeeldingen worden gemeten in pixels, niet in inches. Om een PDF-pagina naar de juiste pixelgrootte te converteren, bepaalt u de maximale weergavebreedte van de afbeelding op de website en stelt u vervolgens de conversie-uitvoer in op die breedte, terwijl u de beeldverhouding van de pagina behoudt. De standaardbreedtes voor website-inhoud variëren van 720 pixels voor voor mobiel geoptimaliseerde lay-outs tot 1920 pixels voor desktoplay-outs over de volledige breedte. Het converteren op deze specifieke afmetingen levert beelden op die niet onnodig groot of teleurstellend wazig zijn.
Bepaal de exacte pixelafmetingen die uw website nodig heeft
Voor websites die een contentmanagementsysteem gebruiken met automatisch aanpassen van de grootte van afbeeldingen, converteert u met een resolutie die hoger is dan de weergavegrootte en laat u het CMS de grootte aanpassen. Een CMS dat uit één enkele upload meerdere formaten genereert, heeft een bronafbeelding nodig die groot genoeg is om het grootste gegenereerde formaat te ondersteunen. Door te converteren op tweemaal de grootste door het CMS gegenereerde grootte, zijn alle gegenereerde varianten scherp.
Voor responsieve websites verandert de weergavebreedte van de afbeelding bij verschillende schermformaten. Converteer op de grootste breedte waarop de afbeelding zal verschijnen, wat doorgaans het bureaubladbreekpunt is van 1200 tot 1400 pixels voor inhoudsafbeeldingen. De browser schaalt afbeeldingen efficiënt naar kleinere schermen. De extra bestandsgrootte van de grotere conversie wordt aan alle gebruikers aangeboden, inclusief mobiele gebruikers die een verkleinde versie te zien krijgen. Voor bandbreedtegevoelige implementaties gebruikt u responsieve afbeeldingsopmaak om verschillende afbeeldingsformaten op verschillende breekpunten weer te geven.
Meet de breedte van het inhoudsgebied van uw website in pixels. Open de website in een browser, klik met de rechtermuisknop op het inhoudsgebied en selecteer Inspecteren om de ontwikkelaarstools te openen. De berekende breedte van de inhoudcontainer wordt weergegeven in het doosmodeldiagram. Dit is de maximale breedte die uw afbeeldingen mogen hebben. Als uw website responsief is en zich aanpast aan verschillende schermformaten, kiest u het breedste breekpunt, meestal de desktopindeling van 1200 tot 1400 pixels breed. Afbeeldingen met deze breedte zien er scherp uit op het bureaublad en worden proportioneel verkleind op tablets en telefoons.
Voor afbeeldingsgalerijen en lightboxen kunt u deze converteren naar een hogere resolutie om weergave op volledig scherm te ondersteunen. Een galerijafbeelding die in een rasterindeling wordt weergegeven met een breedte van 400 pixels, moet mogelijk worden uitgebreid tot 1600 pixels breed wanneer erop wordt geklikt voor weergave op volledig scherm. Door te converteren naar de weergavegrootte op volledig scherm, is het vergrote beeld scherp. De rasterweergave laadt een verkleinde versie, die browsers goed verwerken. Het converteren naar de weergavegrootte van de galerij en het weergeven van dezelfde afbeelding voor weergave op volledig scherm resulteert in een wazige vergroting. Houd rekening met het maximale weergavescenario van uw website, niet alleen met de standaardweergave.
PDF-pagina's converteren met exacte pixelafmetingen
Voor PDF-pagina's die zowel tekst als afbeeldingen bevatten, blijft bij conversie op 2x de weergavebreedte de tekstscherpte behouden op schermen met hoge DPI. Tekst weergegeven op 1x schermbreedte kan er enigszins zacht uitzien op Retina-displays, omdat de fijne streken van lettervormen profiteren van de extra pixeldichtheid. De 2x-conversie verdubbelt ruwweg de bestandsgrootte, wat een waardevolle afweging is voor documentpagina's waar de leesbaarheid van tekst de prioriteit is. Voor pagina's die voornamelijk uit foto's bestaan, is 1x conversie voldoende omdat het oog minder gevoelig is voor resolutieverschillen in fotografische inhoud.
Open uw PDF-naar-afbeelding-conversietool en zoek naar instellingen voor de uitvoergrootte. Sommige tools gebruiken pixelafmetingen, zoals 1200 pixels breed. Anderen gebruiken DPI in combinatie met fysiek paginaformaat. Als de tool DPI gebruikt, berekent u de vereiste DPI door de doelpixelbreedte te delen door de paginabreedte in inches. Een pagina van Letter-formaat is 8,5 inch breed. Om een afbeelding van 1200 pixels breed te maken, stelt u de DPI in op 1200 gedeeld door 8,5, wat overeenkomt met ongeveer 141 DPI. Als u 141 DPI invoert, krijgt u exact de breedte van 1200 pixels die nodig is voor de website.
Voor Digital Publishing waarbij afbeeldingen zijn ingesloten in artikelen of blogposts, converteert u naar 2x de weergavebreedte om Retina- en vergelijkbare beeldschermen met hoge DPI te ondersteunen. Voor een inhoudsgebied waarin afbeeldingen met een breedte van 800 pixels worden weergegeven, zijn bronafbeeldingen met een breedte van 1600 pixels nodig. De browser stuurt de 2x afbeelding naar schermen met een hoge DPI en schaalt deze terug naar het weergavegebied van 800 pixels, waardoor scherpere tekst en afbeeldingen worden geproduceerd dan een bronafbeelding van 800 pixels. De 2x-conversie verdubbelt de bestandsgrootte, maar produceert zichtbaar betere kwaliteit op moderne schermen. De PDF-naar-afbeelding-converter van WukongPDF accepteert pixelbreedte als directe invoer, dus u voert de doelbreedte in en de tool berekent automatisch de bijbehorende DPI.
Kies het juiste afbeeldingsformaat voor websiteweergave
| Formaat | Beste voor | Compressie | Notities |
|---|---|---|---|
| PNG | Tekst, grafieken, lijntekeningen | Zonder verlies | Grotere bestanden, scherpe tekst, ondersteunt transparantie |
| JPEG | Foto's, gescande pagina's | Verlies | Kleinere bestanden, fotorealistisch, geen transparantie |
| WebP | Moderne websites, alle inhoud | Beide | Beste compressie, niet ondersteund door zeer oude browsers |
| AVIF | Baanbrekende webprestaties | Beide | Kleinste bestanden, beperkte toolondersteuning voor PDF-conversie |
Voor de meeste conversies van PDF naar website biedt WebP de beste balans tussen kwaliteit en bestandsgrootte. Een 1200 pixels brede WebP-afbeelding van een typische documentpagina is 40 tot 60 procent kleiner dan de equivalente PNG, terwijl de visueel identieke kwaliteit behouden blijft. Als uw website geen WebP ondersteunt, is PNG de beste keuze voor documentpagina's die tekst bevatten, en is JPEG met een kwaliteit van 85 tot 90 procent de beste keuze voor pagina's met foto's.
Batchconversie van meerdere pagina's tellende PDF's voor websitegalerijen
Voor zeer grote PDF's met honderden pagina's verdeelt u de batchconversie in groepen van 50 pagina's. Sommige conversietools hebben geheugenlimieten die fouten veroorzaken bij zeer grote batches. De verwerking in kleinere groepen neemt dezelfde totale tijd in beslag, maar vermijdt de frustratie van een mislukte conversie op pagina 347 van 400, waarbij de hele batch opnieuw moet worden opgestart.
Voor een PDF met meerdere pagina's die een afbeeldingengalerij voor een website wordt, converteert u alle pagina's in één batchbewerking met dezelfde pixelafmetingen. De batch produceert afbeeldingen van consistent formaat die uniform worden weergegeven in de galerijindeling. Geef de uitvoerbestanden een naam met een consistente naamgevingsconventie die het paginanummer bevat, zoals document-pagina-01.webp, document-pagina-02.webp, enzovoort. Deze naamgevingsconventie kan eenvoudig worden geïntegreerd met galerijplug-ins en aangepast JavaScript dat opeenvolgend genummerde afbeeldingsbestanden verwacht.
Na de conversie voert u de afbeeldingen door een beeldoptimalisatietool om de bestandsgrootte verder te verkleinen zonder zichtbaar kwaliteitsverlies. Tools zoals ImageOptim, TinyPNG en Squoosh passen extra compressie toe die de PDF-converter mogelijk niet heeft toegepast. De tweede compressiepassage kan de bestandsgrootte met nog eens 20 tot 40 procent verkleinen bij PNG- en JPEG-bestanden. Voor een galerij van 50 documentpagina's is de cumulatieve bandbreedtebesparing betekenisvol voor zowel de hostingkosten van de website als de laadtijd van de pagina van de bezoeker.
Veelgestelde vragen
Moet ik PDF-pagina's converteren naar afbeeldingen in de sRGB-kleurruimte voor internetgebruik? Ja. De meeste websiteafbeeldingen moeten in de sRGB-kleurruimte staan, omdat dit de standaardkleurruimte is voor webbrowsers. Het converteren naar sRGB zorgt voor een consistente kleurweergave in verschillende browsers en besturingssystemen. Als de PDF een CMYK- of Adobe RGB-kleurruimte gebruikt, kan de conversie naar sRGB lichte kleurverschuivingen veroorzaken. Bekijk een voorbeeld van de geconverteerde afbeelding in een browser voordat u deze publiceert om te bevestigen dat de kleuren acceptabel zijn.
Wat moet ik doen als mijn website responsief is en de weergavebreedte van de afbeelding verandert met de schermgrootte?
Converteer op de grootste weergavebreedte waarop de afbeelding verschijnt, meestal het bureaubladbreekpunt. De browser schaalt de afbeelding automatisch naar kleinere schermen. Een afbeelding van 1200 pixels breed, weergegeven met 400 pixels op een telefoon, ziet er scherp uit omdat deze wordt verkleind en niet omhoog. De extra bestandsgrootte van de voor desktop geoptimaliseerde conversie komt ten goede aan alle gebruikers, wat de afweging is voor de ondersteuning van het volledige resolutiebereik. Voor bandbreedtegevoelige implementaties gebruikt u responsieve afbeeldingsopmaak die verschillende afbeeldingsformaten op verschillende breekpunten weergeeft.
Kan ik een PDF-pagina converteren naar een afbeelding met een transparante achtergrond?
Alleen als de PDF-pagina zelf geen achtergrond heeft. De meeste PDF-pagina's hebben een expliciete witte achtergrond, die in de afbeelding als witte achtergrond wordt omgezet. Als u een afbeelding met een transparante achtergrond wilt maken, verwijdert u vóór de conversie de pagina-achtergrond uit de PDF. Hiervoor is een PDF-editor vereist die het achtergrondobject uit de pagina-inhoudsstroom kan verwijderen. De resulterende PDF-pagina heeft een transparante achtergrond en als u deze naar PNG converteert, blijft de transparantie behouden.
Moet ik PDF-pagina's converteren naar afbeeldingen met 72 DPI voor internetgebruik, zoals gewoonlijk wordt aanbevolen?
De aanbeveling van 72 DPI is verouderd. Het ontstond toen de meeste computermonitoren een fysieke pixeldichtheid hadden van ongeveer 72 pixels per inch. Moderne monitoren hebben pixeldichtheden van 100 tot 200 of meer pixels per inch. Het converteren van een PDF-pagina met 72 DPI en het weergeven ervan met 100 procent zoom op een moderne monitor levert een zichtbaar zacht beeld op. Gebruik de hierboven beschreven pixelafmetingsmethode in plaats van een vaste DPI. De juiste DPI is wat de juiste pixelafmetingen oplevert voor uw specifieke website-indeling.