La conversión de páginas PDF en imágenes para un sitio web requiere dimensiones de píxeles específicas, no una configuración de DPI genérica. Una página PDF convertida a 300 DPI produce una imagen de miles de píxeles de ancho, mucho más grande de lo que puede mostrar cualquier diseño de sitio web. Cargar esa imagen en un sitio web desperdicia ancho de banda y ralentiza la carga de la página. La conversión con las dimensiones exactas en píxeles necesarias para el diseño del sitio web produce imágenes que se cargan rápidamente y se muestran nítidamente. La conversión de PDF a Imagen para uso web consiste en hacer coincidir las dimensiones de salida con el lugar específico que ocupará la imagen en la página.
Conclusiones clave
Las dimensiones de las imágenes del sitio web se miden en píxeles, no en pulgadas. Para convertir una página PDF al tamaño de píxel correcto, determine el ancho máximo de visualización de la imagen en el sitio web, luego configure la salida de conversión a ese ancho manteniendo la relación de aspecto de la página. Los anchos estándar del contenido del sitio web varían desde 720 píxeles para diseños optimizados para dispositivos móviles hasta 1920 píxeles para diseños de escritorio de ancho completo. La conversión en estas dimensiones específicas produce imágenes que no son innecesariamente grandes ni decepcionantemente borrosas.
Determine las dimensiones exactas de píxeles que necesita su sitio web
Para los sitios web que utilizan un sistema de administración de contenido con cambio de tamaño de imagen automático, convierta a una resolución superior al tamaño de la pantalla y deje que el CMS se encargue del cambio de tamaño. Un CMS que genera varios tamaños a partir de una única carga necesita una imagen de origen lo suficientemente grande como para admitir el tamaño más grande generado. La conversión al doble del tamaño más grande generado por el CMS garantiza que todas las variantes generadas sean nítidas.
Para sitios web responsivos, el ancho de visualización de la imagen cambia en diferentes tamaños de pantalla. Convierta al ancho más grande con el que aparecerá la imagen, que suele ser el punto de interrupción del escritorio de 1200 a 1400 píxeles para las imágenes de contenido. El navegador reduce la escala de las imágenes para pantallas más pequeñas de manera eficiente. El tamaño de archivo adicional de la conversión más grande se entrega a todos los usuarios, incluidos los usuarios de dispositivos móviles que verán una versión reducida. Para implementaciones sensibles al ancho de banda, utilice el marcado de imágenes responsivo para ofrecer diferentes tamaños de imagen en diferentes puntos de interrupción.
Mida el ancho del área de contenido de su sitio web en píxeles. Abra el sitio web en un navegador, haga clic derecho en el área de contenido y seleccione Inspeccionar para abrir las herramientas de desarrollador. El ancho calculado del contenedor de contenido se muestra en el diagrama del modelo de caja. Este es el ancho máximo que deben tener sus imágenes. Si su sitio web responde y se adapta a diferentes tamaños de pantalla, elija el punto de interrupción más amplio, normalmente el diseño del escritorio de 1200 a 1400 píxeles de ancho. Las imágenes con este ancho se verán nítidas en el escritorio y se reducirán proporcionalmente en tabletas y teléfonos.
Para galerías de imágenes y cajas de luz, convierta a una resolución más alta para admitir la visualización en pantalla completa. Es posible que una imagen de galería que se muestra con 400 píxeles de ancho en un diseño de cuadrícula deba expandirse a 1600 píxeles de ancho cuando se hace clic para verla en pantalla completa. La conversión al tamaño de visualización de pantalla completa garantiza que la imagen ampliada sea nítida. La vista de cuadrícula carga una versión reducida, que los navegadores manejan bien. Convertir al tamaño de visualización de la galería y mostrar la misma imagen para verla en pantalla completa da como resultado una ampliación borrosa. Considere el escenario de visualización máxima de su sitio web, no solo la vista predeterminada.
Pruebe PDF a imagen
No se necesita instalación. Funciona directamente en su navegador.
Convertir páginas PDF con dimensiones exactas en píxeles
Para páginas PDF que contienen texto e imágenes, la conversión al doble del ancho de visualización preserva la nitidez del texto en pantallas de alto DPI. El texto representado con un ancho de pantalla de 1x puede verse ligeramente suave en las pantallas Retina porque los trazos finos de las letras se benefician de la densidad de píxeles adicional. La conversión 2x aproximadamente duplica el tamaño del archivo, lo cual es una compensación que vale la pena para las páginas de documentos donde la legibilidad del texto es la prioridad. Para páginas que son principalmente fotografías, la conversión 1x es suficiente porque el ojo es menos sensible a las diferencias de resolución en el contenido fotográfico.
Abra su herramienta de conversión de PDF a imagen y busque la configuración del tamaño de salida. Algunas herramientas utilizan dimensiones en píxeles, como 1200 píxeles de ancho. Otros usan DPI combinado con el tamaño de página física. Si la herramienta usa DPI, calcule el DPI requerido dividiendo el ancho del píxel de destino por el ancho de la página en pulgadas. Una página de tamaño Carta tiene 8,5 pulgadas de ancho. Para producir una imagen de 1200 píxeles de ancho, establezca el DPI en 1200 dividido por 8,5, lo que equivale aproximadamente a 141 DPI. Al ingresar 141 DPI se produce el ancho exacto de 1200 píxeles necesario para el sitio web.
Para Publicación digital donde las imágenes están incrustadas en artículos o publicaciones de blogs, convierta al doble del ancho de la pantalla para admitir Retina de alto DPI y pantallas similares. Un área de contenido que muestra imágenes de 800 píxeles de ancho necesita imágenes de origen de 1600 píxeles de ancho. El navegador muestra la imagen 2x en pantallas de alto DPI y la reduce al área de visualización de 800 píxeles, produciendo texto y gráficos más nítidos que una imagen fuente de 800 píxeles. La conversión 2x duplica el tamaño del archivo pero produce una calidad visiblemente mejor en las pantallas modernas. El conversor de PDF a imagen de WukongPDF acepta el ancho de píxel como entrada directa, por lo que ingresa el ancho objetivo y la herramienta calcula el DPI correspondiente automáticamente.
Elija el formato de imagen adecuado para la entrega en el sitio web
| Formato | Mejor para | Compresión | Notas |
|---|---|---|---|
| PNG | Texto, gráficos, arte lineal. | Sin pérdidas | Archivos más grandes, texto nítido, admite transparencia |
| JPEG | Fotografías, páginas escaneadas. | con pérdida | Archivos más pequeños, fotorrealistas, sin transparencia. |
| WebP | Sitios web modernos, todo el contenido. | Ambos | La mejor compresión, no compatible con navegadores muy antiguos |
| AVIF | Rendimiento web de vanguardia | Ambos | Archivos más pequeños, soporte limitado de herramientas para la conversión de PDF |
Para la mayoría de las conversiones de PDF a sitios web, WebP ofrece el mejor equilibrio entre calidad y tamaño de archivo. Una imagen WebP de 1200 píxeles de ancho de una página de documento típica es entre un 40 y un 60 por ciento más pequeña que el PNG equivalente y, al mismo tiempo, mantiene una calidad visual idéntica. Si su sitio web no es compatible con WebP, PNG es la siguiente mejor opción para páginas de documentos que contienen texto, y JPEG con una calidad del 85 al 90 por ciento es la siguiente mejor opción para páginas que contienen fotografías.
Convertir por lotes archivos PDF de varias páginas para galerías de sitios web
Para archivos PDF muy grandes con cientos de páginas, divida la conversión por lotes en grupos de 50 páginas. Algunas herramientas de conversión tienen límites de memoria que provocan fallos en lotes muy grandes. El procesamiento en grupos más pequeños lleva el mismo tiempo total, pero evita la frustración de una conversión fallida que requiere reiniciar todo el lote.
Para un PDF de varias páginas que se convertirá en una galería de imágenes de un sitio web, convierta todas las páginas en una operación por lotes con las mismas dimensiones en píxeles. El lote produce imágenes de tamaño consistente que se muestran uniformemente en el diseño de la galería. Asigne un nombre a los archivos de salida con una convención de nomenclatura coherente que incluya el número de página, como página-documento-01.webp, página-documento-02.webp, etc. Esta convención de nomenclatura se integra fácilmente con complementos de galería y JavaScript personalizado que espera archivos de imágenes numerados secuencialmente.
Después de la conversión, ejecute las imágenes a través de una herramienta de optimización de imágenes para reducir aún más el tamaño del archivo sin pérdida visible de calidad. Herramientas como ImageOptim, TinyPNG y Squoosh aplican una compresión adicional que es posible que el conversor de PDF no haya aplicado. La segunda pasada de compresión puede reducir el tamaño del archivo entre un 20 y un 40 por ciento adicional en archivos PNG y JPEG. Para una galería de 50 páginas de documentos, los ahorros acumulados de ancho de banda son significativos tanto para los costos de alojamiento del sitio web como para el tiempo de carga de la página del visitante.
Preguntas frecuentes
¿Debo convertir páginas PDF en imágenes en el espacio de color sRGB para uso web? Sí. La mayoría de las imágenes de sitios web deben estar en el espacio de color sRGB porque es el espacio de color estándar para los navegadores web. La conversión a sRGB garantiza una apariencia de color uniforme en diferentes navegadores y sistemas operativos. Si el PDF utiliza un espacio de color CMYK o Adobe RGB, la conversión a sRGB puede provocar ligeros cambios de color. Obtenga una vista previa de la imagen convertida en un navegador antes de publicarla para confirmar que los colores sean aceptables.
¿Qué pasa si mi sitio web responde y el ancho de visualización de la imagen cambia con el tamaño de la pantalla?
Convierta al ancho de visualización más grande en el que aparecerá la imagen, generalmente el punto de interrupción del escritorio. El navegador reduce automáticamente la escala de la imagen para pantallas más pequeñas. Una imagen de 1200 píxeles de ancho mostrada a 400 píxeles en un teléfono se ve nítida porque se reduce, no se aumenta. El tamaño de archivo adicional de la conversión optimizada para escritorio se entrega a todos los usuarios, lo cual es la compensación por admitir el rango de resolución completo. Para implementaciones sensibles al ancho de banda, utilice un marcado de imagen responsivo que muestre diferentes tamaños de imagen en diferentes puntos de interrupción.
¿Puedo convertir una página PDF en una imagen con fondo transparente?
Sólo si la página PDF en sí no tiene fondo. La mayoría de las páginas PDF tienen un fondo blanco explícito, que se convierte en un fondo blanco en la imagen. Para producir una imagen con un fondo transparente, elimine el fondo de la página del PDF antes de convertirlo. Esto requiere un editor de PDF que pueda eliminar el objeto de fondo del flujo de contenido de la página. La página PDF resultante tendrá un fondo transparente y al convertirla a PNG se conservará la transparencia.
¿Debo convertir páginas PDF a imágenes a 72 DPI para uso web como se recomienda comúnmente?
La recomendación de 72 DPI está desactualizada. Se originó cuando la mayoría de los monitores de computadora tenían una densidad física de píxeles de aproximadamente 72 píxeles por pulgada. Los monitores modernos tienen densidades de píxeles de 100 a 200 o más píxeles por pulgada. Convertir una página PDF a 72 DPI y mostrarla con un zoom del 100 por ciento en un monitor moderno produce una imagen visiblemente suave. Utilice el método de dimensión de píxeles descrito anteriormente en lugar de un DPI fijo. El DPI correcto es aquel que produce las dimensiones de píxeles adecuadas para el diseño específico de su sitio web.
Pruebe PDF a imagen
No se necesita instalación. Funciona directamente en su navegador.