JPEG con fondo transparente

JPG no permite fondos transparentes.

Lo único lo que puede hacer es tener un fondo de color plano que se mezcle con su sitio web: por ejemplo. si el fondo de su sitio web es blanco, entonces haga que se creen JPG con un fondo blanco.

De lo contrario, debe considerar guardar como PNG, lo que permite una verdadera transparencia.

Comentarios

• ¿Es una buena idea intentar establecer un color de fondo combinado, ya que podría no ser homogéneo?
• @Amessihel No, pero ‘ es la única opción si el formato JPG es realmente necesario y la transparencia debe ser simulada.

JPEG no admite transparencia en absoluto.

La opción más compatible es usar PNG, pero da como resultado archivos grandes para fotografías porque es una compresión sin pérdidas.

Otra opción es utilizar el nuevo formato de archivo WebP, que admite compresión sin pérdida (como PNG) y con pérdida (como JPEG), y permite la transparencia con ambas. La compatibilidad con WebP es relativamente bueno en estos días, pero aún no universal (en particular, ni Safari ni IE admiten , pero Edge sí).

Comentarios

• Con respecto a WebP, creo que más notablemente: Safari actualmente no lo admite en absoluto (dispositivos móviles ni de escritorio ). Eso elimina ~ 25% de la cuota de mercado de los navegadores, obviamente incluidos todos los iPhones.
• compatibilidad con el navegador WebP .
• ¿Por qué se necesitan transparencias en fotografías de alta resolución?
• @Crowley, considere una página » sobre » con fotografías del personal de la empresa ‘.
• @Mark Todavía no puedo encontrar razones para usar la transparencia allí. La elección adecuada del fondo de disparo es una forma mucho más ordenada.

Si bien el formato JPEG no es compatible transparencia en sí, es totalmente posible tener transparencia usando JPEG con los navegadores modernos. Sin embargo, es complicado. Implica usar SVG para crear una máscara de recorte que maneje la transparencia. Con Photoshop, puede hacer esto con la herramienta de lápiz y luego exportar a Illustrator, donde puede convertir la ruta de la herramienta de lápiz en un SVG.

Aquí hay una guía más detallada sobre cómo hacer entonces.

El truco consiste en hacer dos cosas:

• El JPG
• El recorte

El JPG es bastante fácil. Imprima eso directamente desde Photoshop. Optimice.

Ahora podemos configurar el SVG. SVG se complace en tomar e un gráfico de trama. SVG es conocido por los gráficos vectoriales, pero es un formato de imagen muy flexible.

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

Para obtener la ruta, exportamos la ruta que creamos con la herramienta Pluma a Illustrator. Ahora tenemos la ruta allí, y es fácil de exportar como SVG [.]

Ahora tenemos los datos de ruta que necesitamos [.] Usemos eso dentro de a en el SVG que hemos comenzado. Luego, aplique también la ruta del clip 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> 

Alternativamente, aquí está una herramienta que simplemente convertirá un PNG en un SVG con archivos JPEG incrustados . La ventaja sobre WebP es que funcionará en Internet Explorer (desde la versión 9) y Safari (desde la versión 3), incluso en iOS.

Dicho esto, el estándar habitual es simplemente colorear el fondo JPEG para que coincida con el del sitio web, o para usar PNG optimizado de 8 bits, (usando una herramienta como PNGQuant para convertir archivos PNG normales de 32 bits).

Comentarios

• Para ser justos, SVG con una máscara de recorte es no jpg. Y una máscara de recorte es un nivel de complejidad que puede ser deseado o no.
• @Scott Estoy de acuerdo; no es ‘ t. Pero no ‘ no leo la Pregunta como un requisito. No ‘ dice un » archivo JPEG que contenga transparencias » sino solo » imágenes para web como JPEG con transparencia, » que es más ambiguo. Además, incluso si eso no es lo que el OP o su cliente querían decir, creo que la información en mi Respuesta puede ser relevante para los futuros lectores que busquen y encuentren esta Pregunta en el futuro. Es ‘ tan válido como incluir información sobre WebP o sugerir el uso de PNG.
• Si necesita transparencia parcial, debe usar una máscara (que podría ser un PNG en escala de grises separado) en lugar de recortar.
• Esto es como decir que puedes conducir tu coche sobre el océano … si lo pones en un barco. Vamos.
• Hacer el paso del lápiz en Photoshop solo para exportar la ruta a Illustrator para exportarlo a SVG parece un mal uso de los programas; simplemente haga el paso del lápiz en Illustrator. Dicho esto, esto parece que complica demasiado el problema y es demasiado limitante para las prácticas modernas (por ejemplo, no puede ‘ tener transparencia parcial con esta opción). Si hay ‘ flexibilidad en el formato de la imagen, simplemente use PNG. Si la imagen de origen debe ser un JPG, entonces la máscara debe hacerse con una máscara de imagen en escala de grises como la que sugiere Joey. Salvo necesidades específicas, esas deberían ser las únicas dos opciones razonables.

JPEG 2000 (también conocido como JP2) es una versión mejorada del formato JPEG original (de 1992) que también es totalmente compatible con la transparencia, pero tiene soporte de navegador abismal (solo Safari lo admite).

Estoy de acuerdo con Lucian, solo use PNG, tiene un soporte extremadamente bueno y hay muchas herramientas (pngcrush, optipng , pngout …) para comprimir archivos. Consulte aquí para ver una comparación.

Con respecto a lo que dijo tylisirn, comprendo la preocupación sobre el tamaño del archivo, pero considere esto: es la norma para que las páginas web estén infladas, en estos días. Sin embargo, por otro lado, un tiempo de carga rápido de la página deja una buena impresión en los usuarios y tiene un efecto positivo en el SEO .

Comentarios

• relacionados: procesamiento de imágenes progresivo
• @ beppe9000 gracias por el enlace ! Mientras lo leía, recordé cómo Facebook usa miniaturas borrosas como marcadores de posición mientras descarga la imagen real. ‘ no es una carga realmente progresiva, es más una distracción en lugar de un espacio en blanco, pero las microthumbnails tienen la ventaja de ocupar una cantidad insignificante de espacio (~ 200 bytes). Esta técnica definitivamente podría aplicarse a PNG, tal vez incluso a JPEG si tiene soporte para metadatos personalizados, pero no ‘ no creo que los navegadores estén interesados en implementarla … engineering.fb.com/android/the-technology-behind-preview-photos
• Buena ingeniería en fb … Bueno, creo que no ‘ t escala muy bien con contenido proporcionado por diferentes entidades. Probablemente WebP sea una alternativa más atractiva. Esta también es una buena lectura: developers.google.com/web/fundamentals/performance/…

Puede con PHP e Imagick eliminar el fondo de forma dinámica. (quitar un color fucsia por ejemplo). ~ crea un PNG / GIF en tiempo de ejecución desde JPG (puede almacenar en caché una imagen transparente en una carpeta para evitar el sobrecalentamiento del servidor)

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

Comentarios

• Una opción interesante, pero probablemente no relevante ya que OP simplemente proporciona el archivo de imagen a un cliente, que no diseña ni aloja el backend de su sitio web ‘. Como tal, la imagen en sí debe admitir la transparencia.

Debido a la naturaleza de compresión con pérdida de JPEG compresión, no se recomienda crear un JPEG con un fondo de color plano para la incrustación de croma, ya que el color se desvanecerá en las áreas circundantes.

Dependiendo de cómo se utilicen las imágenes, proporcionar una imagen mate en escala de grises además de un JPEG estándar puede ser suficiente, ya que en el formato JEPG el componente de escala de grises de los datos de la imagen se almacena a una resolución mucho más alta que los datos de color. Estos deberían combinarse utilizando la API de lienzo o similar.

Como han mencionado otros, una mejor solución sería usar un formato como PNG, que soporta ingenuamente un canal alfa y es compatible con el navegador.

Con la llegada de la propiedad CSS3 mask-image, se podría proporcionar una imagen de máscara alfa externa para los archivos JPEG, otorgándoles así el canal alfa carecen.

Comentarios

• Yo no ‘ t consciente de esto, ¡es bueno saberlo! Pero no ‘ parece responder la pregunta. No ‘ no parece que el OP esté directamente involucrado en el desarrollo web, pero ha chocado contra una pared con una solicitud mal informada de un cliente.
• Por supuesto. Pero, para otros que buscan soluciones similares, esto podría resultar útil.

Aparte de los casos extremos presentado en las otras respuestas, un JPEG para todos los propósitos prácticos no admite la transparencia.

Los formatos más comunes que admitirán la transparencia son PNG, GIF y SVG.

Si ninguno de estos Los formatos de archivo son adecuados para el cliente y se requiere un JPEG por cualquier motivo extravagante, entonces simplemente necesita proporcionar un JPEG para cada caso de uso.

Si están haciendo un póster, pídales que le digan el póster color y proporcionar un JPEG con un fondo para que coincida. Si simplemente están imprimiendo en papel, un fondo blanco debería estar bien. Si se utilizará en su sitio web, deberá proporcionar un fondo adecuado para cada lugar utilizado en el sitio web.

Sugerencia: asegúrese de cobrar por cada caso de uso

Comentarios

• Incluir SVG en esa lista es algo engañoso, ya que ‘ es un formato muy diferente de los otros dos.
• @ Abion47 Incluso IE9 lo admite . Yo diría que cualquier empresa de impresión que se precie va a solicitar un SVG, ya que les permitirá explotarlo tanto como lo necesiten.
• No entiende mi punto. Una imagen que comenzó como una imagen rasterizada no se puede guardar como un SVG de la misma forma que se puede guardar como PNG o GIF. Si la imagen de OP ‘ s estaba originalmente en formato vectorial, entonces debería mantenerse como formato vectorial durante el mayor tiempo posible. Pero si ‘ es una composición de imagen (en Photoshop, por ejemplo), entonces el barco SVG ha navegado hace mucho tiempo a menos que OP quiera rehacer efectivamente todo el proyecto para guardarlo como un SVG.

Puede crear una imagen PNG con transparencia y luego convertirla a SVG que contenga un color información como JPEG y un canal alfa como máscara de escala de grises. Aquí hay una herramienta que escribí para hacerlo https://github.com/igrmk/transpeg

Sí, esto es posible.

Simplemente cree una ruta de recorte en el panel Rutas. Al guardar el archivo como JPEG, Photoshop almacena la ruta de recorte en la sección de metadatos JPEG.

Tenga en cuenta que la ruta de recorte solo tendrá efecto cuando su cliente abra el archivo en Photoshop, no en la mayoría de los otros programas. específicamente no en los navegadores web.

Comentarios

• » Mi cliente quiere que proporcione imágenes para web como JPEG »
• @Scott OTOH, esta respuesta y la de JPEG2000 en realidad responden a la pregunta como escrito. i.kym-cdn.com/photos/images/original/000/909/991/48c.jpg
• @JollyJoker No, ellos don ‘ t, dado que OP solicitó específicamente imágenes con respecto a su uso en la web, por lo que ni máscaras basadas en metadatos específicos de Photoshop ni formatos de imagen extendidos en JPEG con un navegador prácticamente inexistente El soporte realmente aborda las necesidades reales de OP ‘ como está escrito en la pregunta .