A conversão de páginas PDF em imagens para um site requer dimensões de pixel específicas, não uma configuração genérica de DPI. Uma página PDF convertida em 300 DPI produz uma imagem com milhares de pixels de largura, muito maior do que qualquer layout de site pode exibir. Carregar essa imagem em um site desperdiça largura de banda e retarda o carregamento da página. A conversão nas dimensões exatas de pixels necessárias para o layout do site produz imagens que carregam rapidamente e são exibidas com nitidez. A conversão de PDF em imagem para uso na web consiste em combinar as dimensões de saída com o lugar específico que a imagem ocupará na página.
Principais conclusões
As dimensões da imagem do site são medidas em pixels, não em polegadas. Para converter uma página PDF para o tamanho de pixel correto, determine a largura máxima de exibição da imagem no site e defina a saída da conversão para essa largura, mantendo a proporção da página. As larguras padrão do conteúdo do site variam de 720 pixels para layouts otimizados para dispositivos móveis a 1920 pixels para layouts de desktop de largura total. A conversão nessas dimensões específicas produz imagens que não são desnecessariamente grandes nem decepcionantemente desfocadas.
Determine as dimensões exatas de pixel que seu site precisa
Para sites que utilizam sistema de gerenciamento de conteúdo com redimensionamento automático de imagens, converta em uma resolução superior ao tamanho da tela e deixe o CMS cuidar do redimensionamento. Um CMS que gera vários tamanhos a partir de um único upload precisa de uma imagem de origem grande o suficiente para suportar o maior tamanho gerado. A conversão para o dobro do maior tamanho gerado pelo CMS garante que todas as variantes geradas sejam nítidas.
Para sites responsivos, a largura de exibição da imagem muda em diferentes tamanhos de tela. Converta na maior largura em que a imagem aparecerá, que normalmente é o ponto de interrupção da área de trabalho de 1.200 a 1.400 pixels para imagens de conteúdo. O navegador reduz as imagens para telas menores com eficiência. O tamanho de arquivo extra da conversão maior é veiculado a todos os usuários, incluindo usuários móveis que verão uma versão reduzida. Para implementações sensíveis à largura de banda, use marcação de imagem responsiva para servir diferentes tamanhos de imagem em diferentes pontos de interrupção.
Meça a largura da área de conteúdo do seu site em pixels. Abra o site em um navegador, clique com o botão direito na área de conteúdo e selecione Inspecionar para abrir as ferramentas do desenvolvedor. A largura calculada do contêiner de conteúdo é exibida no diagrama do modelo de caixa. Esta é a largura máxima que suas imagens devem ter. Se o seu site for responsivo e se adaptar a diferentes tamanhos de tela, escolha o ponto de interrupção mais amplo, normalmente o layout da área de trabalho com 1.200 a 1.400 pixels de largura. As imagens com esta largura ficarão nítidas no desktop e serão reduzidas proporcionalmente em tablets e telefones.
Para galerias de imagens e lightboxes, converta em uma resolução mais alta para suportar visualização em tela inteira. Uma imagem de galeria exibida com 400 pixels de largura em um layout de grade pode precisar ser expandida para 1.600 pixels de largura quando clicada para visualização em tela inteira. A conversão para o tamanho de tela inteira garante que a imagem ampliada seja nítida. A visualização em grade carrega uma versão reduzida, que os navegadores lidam bem. Converter no tamanho de exibição da galeria e exibir a mesma imagem para visualização em tela inteira resulta em uma ampliação desfocada. Considere o cenário máximo de exibição do seu site, não apenas a visualização padrão.
Experimente PDF para imagem
Nenhuma instalação necessária. Funciona diretamente no seu navegador.
Converta páginas PDF em dimensões exatas de pixel
Para páginas PDF que contêm texto e imagens, a conversão em 2x a largura da exibição preserva a nitidez do texto em telas de alto DPI. O texto renderizado com largura de exibição de 1x pode parecer um pouco suave em telas Retina porque os traços finos das letras se beneficiam da densidade extra de pixels. A conversão 2x praticamente duplica o tamanho do arquivo, o que é uma compensação válida para páginas de documentos onde a legibilidade do texto é a prioridade. Para páginas que são principalmente fotografias, a conversão 1x é suficiente porque o olho é menos sensível às diferenças de resolução no conteúdo fotográfico.
Abra sua ferramenta de conversão de PDF em imagem e procure as configurações de tamanho de saída. Algumas ferramentas usam dimensões em pixels, como 1.200 pixels de largura. Outros usam DPI combinado com o tamanho físico da página. Se a ferramenta usar DPI, calcule o DPI necessário dividindo a largura do pixel alvo pela largura da página em polegadas. Uma página tamanho Carta tem 8,5 polegadas de largura. Para produzir uma imagem com 1.200 pixels de largura, defina o DPI para 1.200 dividido por 8,5, o que equivale a aproximadamente 141 DPI. Inserir 141 DPI produz a largura exata de 1200 pixels necessária para o site.
Para Publicação digital, onde as imagens são incorporadas em artigos ou postagens de blog, converta em 2x a largura da tela para suportar Retina de alto DPI e telas semelhantes. Uma área de conteúdo que exibe imagens com 800 pixels de largura precisa de imagens de origem com 1600 pixels de largura. O navegador fornece a imagem 2x para telas de alto DPI e a reduz para a área de exibição de 800 pixels, produzindo texto e gráficos mais nítidos do que uma imagem de origem de 800 pixels. A conversão 2x duplica o tamanho do arquivo, mas produz uma qualidade visivelmente melhor nas telas modernas. O conversor de PDF para imagem do WukongPDF aceita largura de pixel como entrada direta, então você insere a largura alvo e a ferramenta calcula o DPI correspondente automaticamente.
Escolha o formato de imagem correto para entrega no site
| Formato | Melhor para | Compressão | Notas |
|---|---|---|---|
| png | Texto, gráficos, arte linear | Sem perdas | Arquivos maiores, texto nítido, suporta transparência |
| JPEG | Fotografias, páginas digitalizadas | Com perdas | Arquivos menores, fotorrealistas, sem transparência |
| WebP | Sites modernos, todo o conteúdo | Ambos | Melhor compactação, não suportada por navegadores muito antigos |
| AVIF | Desempenho web de última geração | Ambos | Arquivos menores, suporte limitado a ferramentas para conversão de PDF |
Para a maioria das conversões de PDF para site, o WebP oferece o melhor equilíbrio entre qualidade e tamanho de arquivo. Uma imagem WebP de 1.200 pixels de largura de uma página de documento típica é 40 a 60 por cento menor que o PNG equivalente, mantendo uma qualidade visualmente idêntica. Se o seu site não oferece suporte a WebP, PNG é a segunda melhor opção para páginas de documentos que contêm texto, e JPEG com qualidade de 85 a 90 por cento é a próxima melhor opção para páginas que contêm fotografias.
Conversão em lote de PDFs de várias páginas para galerias de sites
Para PDFs muito grandes com centenas de páginas, divida a conversão em lote em grupos de 50 páginas. Algumas ferramentas de conversão possuem limites de memória que causam falhas em lotes muito grandes. O processamento em grupos menores leva o mesmo tempo total, mas evita a frustração de uma falha na conversão na página 347 de 400 que exige a reinicialização de todo o lote.
Para um PDF de várias páginas que se tornará uma galeria de imagens de um site, converta todas as páginas em uma operação em lote com as mesmas dimensões de pixels. O lote produz imagens de tamanhos consistentes que são exibidas uniformemente no layout da galeria. Nomeie os arquivos de saída com uma convenção de nomenclatura consistente que inclua o número da página, como document-page-01.webp, document-page-02.webp e assim por diante. Esta convenção de nomenclatura integra-se facilmente com plug-ins de galeria e JavaScript personalizado que espera arquivos de imagem numerados sequencialmente.
Após a conversão, execute as imagens por meio de uma ferramenta de otimização de imagens para reduzir ainda mais o tamanho do arquivo sem perda visível de qualidade. Ferramentas como ImageOptim, TinyPNG e Squoosh aplicam compactação adicional que o conversor de PDF pode não ter aplicado. A segunda passagem de compactação pode reduzir o tamanho do arquivo em 20 a 40 por cento adicionais em arquivos PNG e JPEG. Para uma galeria de 50 páginas de documentos, a economia cumulativa de largura de banda é significativa tanto para os custos de hospedagem do site quanto para o tempo de carregamento da página do visitante.
Perguntas Frequentes
Devo converter páginas PDF em imagens no espaço de cores sRGB para uso na web? Sim. A maioria das imagens de sites deve estar no espaço de cores sRGB porque é o espaço de cores padrão para navegadores da web. A conversão para sRGB garante aparência de cores consistente em diferentes navegadores e sistemas operacionais. Se o PDF usar um espaço de cores CMYK ou Adobe RGB, a conversão para sRGB poderá causar pequenas alterações de cores. Visualize a imagem convertida em um navegador antes de publicar para confirmar se as cores são aceitáveis.
E se meu site for responsivo e a largura de exibição da imagem mudar com o tamanho da tela?
Converta na maior largura de exibição em que a imagem aparecerá, normalmente no ponto de interrupção da área de trabalho. O navegador reduz automaticamente a imagem para telas menores. Uma imagem de 1.200 pixels exibida em 400 pixels em um telefone parece nítida porque está sendo reduzida, não aumentada. O tamanho extra do arquivo da conversão otimizada para desktop é fornecido a todos os usuários, o que é a desvantagem do suporte a toda a faixa de resolução. Para implementações sensíveis à largura de banda, use marcação de imagem responsiva que sirva diferentes tamanhos de imagem em diferentes pontos de interrupção.
Posso converter uma página PDF em uma imagem com fundo transparente?
Somente se a própria página PDF não tiver fundo. A maioria das páginas PDF tem um fundo branco explícito, que é convertido em fundo branco na imagem. Para produzir uma imagem com fundo transparente, remova o fundo da página do PDF antes de converter. Isso requer um editor de PDF que possa excluir o objeto de plano de fundo do fluxo de conteúdo da página. A página PDF resultante terá um fundo transparente e convertê-la para PNG preservará a transparência.
Devo converter páginas PDF em imagens de 72 DPI para uso na web, como é comumente recomendado?
A recomendação de 72 DPI está desatualizada. Originou-se quando a maioria dos monitores de computador tinha uma densidade física de pixels de aproximadamente 72 pixels por polegada. Os monitores modernos têm densidades de pixels de 100 a 200 ou mais pixels por polegada. Converter uma página PDF em 72 DPI e exibi-la com zoom de 100% em um monitor moderno produz uma imagem visivelmente suave. Use o método de dimensão de pixel descrito acima em vez de um DPI fixo. O DPI correto é aquele que produz as dimensões de pixel corretas para o layout específico do seu site.
Experimente PDF para imagem
Nenhuma instalação necessária. Funciona diretamente no seu navegador.