JPEG com fundo transparente

JPG não permite fundos transparentes.

A única coisa o que você pode fazer é ter um fundo de cor lisa que se misture ao seu site: por exemplo. se o fundo do seu site for branco, crie JPGs com um fundo branco.

Caso contrário, você precisa considerar salvar como PNG, o que permite uma transparência real.

Comentários

• É uma boa ideia tentar definir uma cor de fundo mesclada, já que pode não ser homogênea?
• @Amessihel Não, mas ‘ é a única opção se o formato JPG for realmente necessário e a transparência precisar ser simulada.

JPEG não oferece suporte a transparência.

A opção mais compatível é usar PNG, mas resulta em arquivos grandes para fotos porque é compactação sem perdas.

Outra opção é usar o novo formato de arquivo WebP que suporta compactação sem perdas (como PNG) e com perdas (como JPEG), e permite transparência com ambos. Suporte para WebP é relativamente bom hoje em dia, mas ainda não universal (notavelmente nem Safari nem IE suportam , mas o Edge sim).

Comentários

• Em relação ao WebP, acho mais notável: o Safari atualmente não oferece suporte algum (móvel ou desktop ) Isso elimina cerca de 25% de toda a participação no mercado de navegadores, obviamente incluindo todos os iPhones.
• Suporte ao navegador WebP .
• Por que seria necessária transparência em fotografias de alta resolução?
• @Crowley, considere uma página ” sobre ” com fotos do pessoal da empresa ‘ s.
• @Mark Ainda não consigo encontrar o motivo da transparência aqui. A escolha adequada do fundo de filmagem é uma maneira muito mais organizada.

Embora o formato JPEG não seja compatível transparência em si, é perfeitamente possível ter transparência usando JPEGs com navegadores modernos. No entanto, é complicado. Envolve o uso de SVG para criar uma máscara de corte que trata a transparência. Com o Photoshop, você pode fazer isso com a ferramenta caneta e em seguida, exporte para o Illustrator, onde você pode converter o caminho da ferramenta de caneta em um SVG.

Aqui está um guia mais detalhado sobre como fazer então.

O truque é fazer duas coisas:

• O JPG
• O recorte

O JPG é muito fácil. Produza diretamente do Photoshop. Otimize.

Agora podemos configurar o SVG. O SVG tem o prazer de tak e um gráfico raster. SVG é conhecido por gráficos vetoriais, mas é um “formato de imagem muito flexível.

<svg> <image xlink:href="/images/chris.jpg" x="0" y="0"> </svg> 

Para obter o caminho, exportamos o caminho que criamos com a ferramenta Caneta para Illustrator. Agora temos o caminho para lá e é fácil exportar como SVG [.]

Agora temos os dados do caminho de que precisamos [.] Vamos usá-los em um no SVG que começamos. Em seguida, aplique também esse caminho de clipe a:

<svg viewBox="0 0 921.17 1409.71"> <defs> <clipPath id="chris-clip"> <path d="[path data from Illustrator]" /> </clipPath> </defs> <image xlink:href="/images/chris.jpg" clip-path="url(#chris-clip)" x="0" y="0" width="921" height="1409"> </svg> 

Como alternativa, aqui está uma ferramenta que converterá apenas um PNG em um SVG com JPEGs incorporados . A vantagem sobre o WebP é que ele funcionará no Internet Explorer (desde a versão 9) e Safari (desde a versão 3), inclusive no iOS.

Dito isso, o padrão usual é apenas colorir o fundo do JPEG para corresponder ao do site, ou para usar PNG de 8 bits otimizado (usando uma ferramenta como PNGQuant para converter PNGs de 32 bits regulares).

Comentários

• Com toda a justiça, SVG com uma máscara de corte não jpg. E uma máscara de corte é um nível de complexidade que pode ou não ser desejado.
• @Scott eu concordo; não é ‘ t. Mas eu não ‘ não li a pergunta como uma exigência disso. Ele não ‘ diz um ” arquivo JPEG contendo transparência “, mas apenas ” imagens para web como JPEG com transparência, ” o que é mais ambíguo. Além disso, mesmo que não seja isso o que o OP ou seu cliente pretendem, acredito que as informações em minha resposta podem ser relevantes para leitores futuros que pesquisarem e encontrarem esta questão no futuro. É ‘ tão válido quanto incluir informações sobre WebP ou sugerir o uso de PNG.
• Se precisar de transparência parcial, você deve usar uma máscara (que pode ser um PNG em tons de cinza separado) em vez de recortar.
• Isso é como dizer que você pode dirigir seu carro sobre o oceano … se colocá-lo em um barco. Vamos lá.
• Executar a etapa da caneta no Photoshop apenas para exportar o caminho para o Illustrator para exportar para SVG parece um uso indevido dos programas – basta executar a etapa da caneta no Illustrator. Dito isso, parece que isso complica o problema e é muito limitante para as práticas modernas (por exemplo, você não pode ‘ ter transparência parcial com esta opção). Se houver ‘ flexibilidade no formato da imagem, use apenas PNG. Se a imagem de origem deve ser um JPG, então a máscara deve ser feita com uma máscara de imagem em tons de cinza como o que Joey sugere. Excluindo necessidades específicas, essas devem ser as duas únicas opções razoáveis.

JPEG 2000 (também conhecido como JP2) é uma versão aprimorada do formato JPEG original (de 1992) que também oferece suporte total para transparência, mas possui suporte a navegador péssimo (apenas Safari oferece suporte).

Eu concordo com Lucian, apenas use PNG, é extremamente bem suportado e existem muitas ferramentas (pngcrush, optipng , pngout …) para compactar arquivos. Veja aqui para uma comparação.

Em relação ao que tylisirn disse, entendo a preocupação com o tamanho do arquivo, mas considere o seguinte: é a norma para páginas da web estarem inchadas, atualmente. No entanto, por outro lado, um tempo de carregamento rápido da página deixa uma boa impressão nos usuários e tem um efeito positivo no SEO .

Comentários

• relacionados: renderização progressiva de imagens
• @ beppe9000 obrigado pelo link ! Durante a leitura, lembrei-me de como o Facebook usa miniaturas borradas como espaços reservados enquanto baixa a imagem real. Ele ‘ não é realmente um carregamento progressivo, é mais uma distração em vez de espaço em branco, mas as microtumbinhas têm a vantagem de ocupar uma quantidade insignificante de espaço (~ 200 bytes). Essa técnica definitivamente poderia ser aplicada a PNG, talvez até JPEG, se tiver suporte para metadados personalizados, mas não ‘ acho que os navegadores estariam interessados em implementá-la … engineering.fb.com/android/the-technology-behind-preview-photos
• Boa engenharia na fb … Bem, acho que não ‘ t escalabilidade muito bem com conteúdo veiculado por diferentes entidades. Provavelmente, o WebP é uma alternativa mais atraente. Esta também é uma boa leitura: developers.google.com/web/fundamentals/performance/…

Você pode com PHP e Imagick remover o plano de fundo dinamicamente. (remova uma cor fushia, por exemplo). ~ você cria um PNG / GIF em tempo de execução a partir de JPG (você pode armazenar em cache a imagem transparente em uma pasta para evitar o superaquecimento do servidor)

https://stackoverflow.com/questions/43544467/imagemagick-white-to-transparent-background-while-maintaining-white-object

Comentários

• Uma opção interessante, mas provavelmente não relevante, pois OP é apenas fornecer o arquivo de imagem para um cliente, não projetando e hospedando o back-end do ‘ s do site para eles. Como tal, a própria imagem deve suportar transparência.

Devido à natureza de compressão com perdas do JPEG compressão, a criação de um JPEG com um fundo de cor plana para chroma-keying não é recomendado, pois a cor irá sangrar nas áreas circundantes.

Dependendo de como as imagens estão sendo usadas, fornecendo uma imagem fosca em tons de cinza um JPEG padrão pode ser suficiente, pois no formato JEPG o componente da escala de cinza dos dados da imagem é armazenado em uma resolução muito maior do que os dados coloridos. Eles precisariam ser combinados usando a API do canvas ou similar.

Como outros mencionaram, uma solução melhor seria apenas usar um formato como PNG, que ingenuamente suporta um canal alfa e é compatível com o navegador.

Com o advento da propriedade mask-image CSS3, pode-se fornecer uma imagem de máscara alfa externa para os JPEGs, concedendo-lhes assim o canal alfa eles não têm.

Comentários

• Eu não ‘ sabia disso, bom saber! Mas não ‘ não parece responder à pergunta. Não ‘ não parece que o OP está diretamente envolvido no desenvolvimento da web, mas atingiu uma parede com uma solicitação mal informada de um cliente.
• Claro. Mas, para outros que buscam soluções semelhantes, isso pode ser útil.

Além dos casos extremos apresentado nas outras respostas, um JPEG para todos os fins práticos não suporta transparência.

Os formatos mais comuns que suportam transparência são PNG, GIF e SVG.

Se nenhum destes formatos de arquivo são adequados para o cliente e um JPEG é necessário por qualquer motivo estranho, então você simplesmente precisa fornecer um JPEG para cada caso de uso.

Se eles estiverem fazendo um pôster, peça que lhe digam o pôster cor e forneça um JPEG com um fundo para combinar. Se eles estiverem simplesmente imprimindo em papel, um fundo branco deve servir. Se for usado em seu site, você precisará fornecer um histórico adequado para cada local usado no site.

Dica: certifique-se de cobrar por cada caso de uso

Comentários

• Incluir SVG nessa lista é um tanto enganoso, visto que é ‘ um formato muito diferente dos outros dois.
• @ Abion47 Mesmo IE9 oferece suporte . Eu diria que qualquer empresa de impressão que se preze vai solicitar um SVG, pois isso vai deixá-los explodir o tamanho que for necessário.
• Você não entendeu meu ponto. Uma imagem que começou como uma imagem raster não pode ser salva como um SVG da mesma forma que pode ser salva como PNG ou GIF. Se a imagem OP ‘ s estava originalmente em formato vetorial, então ela deve ser mantida como formato vetorial pelo maior tempo possível. Mas se for ‘ uma composição de imagem (no Photoshop, por exemplo), o navio SVG já partiu há muito tempo, a menos que OP queira refazer efetivamente todo o projeto para salvá-lo como um SVG.

Você pode criar uma imagem PNG com transparência e depois convertê-la para SVG contendo uma cor informações como JPEG e um canal alfa como uma máscara em tons de cinza. Aqui está uma ferramenta que escrevi para fazer isso https://github.com/igrmk/transpeg

Sim, isso é possível.

Basta criar um caminho de recorte no painel Caminhos. Ao salvar o arquivo como JPEG, o Photoshop armazena o caminho de recorte na seção de metadados JPEG.

Observe que o caminho de recorte só terá efeito quando o cliente abrir o arquivo no Photoshop, não na maioria dos outros programas, especificamente não em navegadores da web.

Comentários

• ” Meu cliente quer que eu forneça imagens para web como JPEG ”
• @Scott OTOH, esta resposta e JPEG2000 respondem à pergunta como escrito. i.kym-cdn.com/photos/images/original/000/909/991/48c.jpg
• @JollyJoker Não, eles don ‘ t, visto que o OP pediu especificamente imagens sobre seu uso na web, portanto, nem máscaras baseadas em metadados específicas do Photoshop nem formatos de imagem estendidos em JPEG com navegador praticamente inexistente o suporte realmente atende às necessidades reais da OP ‘ s conforme escrito na pergunta .