¿Qué es PNG? Formatos de imagen SVG, PNG y JPG: Programa de Pros y Contras para trabajar con PNG en Mac, Linux y dispositivos móviles
El formato de imagen PNG es uno de los usuarios más populares y ofrece a los usuarios a almacenar imágenes comprimidas sin perder su calidad. La mayoría de PNG se utiliza para editar gráficos o en Internet. A continuación, nos fijamos en algunas formas sencillas, gracias a la que puede abrir el archivo de este formato en su computadora.
Hay varios métodos diferentes que le permiten abrir archivos de formato PNG para ver y editar. Es suficiente para que siga las instrucciones que se proporcionan a continuación, y abra la imagen no será difícil.
Método 1: Programas para ver imágenes.
En Internet, hay muchos editores gráficos y software especial para ver y editar imágenes. Proporcionan a los usuarios una gran cantidad de funciones y herramientas, lo que hace que el proceso de trabajo con las imágenes sea lo más cómodo posible. Considere el proceso de abrir la imagen PNG en el ejemplo del programa GIMP:
Si GIMP no le conviene por ningún motivo, le sugerimos familiarizarse con la lista completa de programas para ver imágenes en nuestro artículo por referencia a continuación. Allí definitivamente encontrarás algo adecuado.
En el caso, cuando quiera hacer varias manipulaciones de imagen abierta, use editores gráficos especiales con funcionalidad extendida y la presencia de una gran cantidad de herramientas diferentes. Más detalles con ellos Puede encontrar en nuestro artículo por referencia a continuación.
Método 2: Windows estándar
Todas las versiones del sistema operativo Windows hay un programa incorporado para ver imágenes. Con él, los archivos de formato PNG también se están abriendo. Consideremos con más detalle este proceso:
Si necesita que todas las imágenes PNG se abren a través del Visor de fotos de Windows estándar, siga estos pasos:
Ahora, de forma predeterminada, todos los archivos PNG se abrirán utilizando un visor de fotos estándar. Para cambiar el programa para abrir, simplemente realice las mismas acciones seleccionando otro software.
En este artículo, examinamos en detalle formas simples de abrir imágenes de formato PNG. Como puede ver, no hay nada complicado en este proceso, y todo se realiza literalmente para varias acciones.
Los gráficos de computadora ahora inundaron todo, incluso las fotos que nos vemos más a menudo en la pantalla del monitor, el teléfono o el televisor que en el papel. Pero cuáles son los métodos más interesantes para almacenar estas imágenes son muy diferentes. Hay docenas de formatos de almacenamiento de imágenes, cada uno con sus ventajas y desventajas, pero las más efectivas y populares de ellos siguen siendo aquellas que dan la mejor calidad y además se obtiene un archivo por un pequeño volumen. Uno de estos formatos es el formato PNG. ¿De qué es este formato y de dónde vino?
Brevemente sobre la misma razón de la aparición de este formato de almacenamiento de imágenes ...
El 4 de enero de 1995, la idea de crear un formato libre se realizó en lugar de pagar GIF-A, y en diciembre del mismo año, el nuevo formato PNG ya estaba listo y se propuso considerar. El formato GIF en ese momento permitió recibir archivos muy pequeños que eran convenientes de usar en los sitios. Pero el antiguo GIF gratis se pagó inesperadamente: el propietario de la patente para él, la compañía "Unisys corporation", se eliminó para tomar dinero para cada imagen que utiliza este formato. Esta fue la razón del desarrollo de un formato libre, que se llamó PNG: abreviatura de la expresión en inglés "Gráficos de red portátiles". Como se puede ver desde el nombre, está diseñado para su uso en la red, debido a los archivos de un pequeño volumen, lo que le permite descargar páginas rápidamente con gráficos.
¿Qué ventajas y desventajas tienen un formato PNG en comparación con otras, especialmente con su formato principal del competidor, GIF? Hay muchas diferencias, pero sobre todo en orden ...
En formato PNG, un algoritmo de compresión llamado deflato, que en sí mismo se distribuye libremente, es decir, absolutamente gratuito. Este algoritmo trabaja en el principio de un arcador convencional, comprime efectivamente la información sobre el esquema de color de cada píxel, y es que le permite obtener un archivo bastante pequeño. Además, en este formato, puede ahorrar imágenes a todo color, es decir, aquellos en los que se utilizan hasta 48 bits para cada píxel, y este es un esquema de colores muy grande, incluso más que percibir el ojo humano. El formato GIF también le permite usar solo 256 colores y tonos, suficiente para las imágenes más simples, pero muy poco para la calidad fotográfica.
En los formatos PNG, GIF y TIFF, se usa el llamado canal alfa. Esto significa que puede hacer algunas secciones de la imagen transparente. Al mismo tiempo, en formato GIF, esto se hace muy simple: solo uno de los colores a la selección se le asigna transparente y al ver la imagen simplemente no es visible, puede hacer un fondo transparente. El formato TIFF está más pensado en este sentido, pero rara vez se usa, se obtiene un tamaño de archivo demasiado grande. Pero en el formato PNG alfa, el canal está hecho con la mente, no hay transparencia allí, sino que también tiene 256 gradaciones de brillo. Es decir, puede hacer fácilmente la transición de un fondo completamente transparente a una imagen a todo color, y para obtener efectos hermosos. Especialmente hermosa se ve en sitios. Si no se necesita la transparencia, simplemente puede no usarlo cuando guarde la imagen y obtenga el archivo para un volumen más pequeño.
Desafortunadamente, el formato PNG tiene un inconveniente, no muy significativo, no le permite guardar la secuencia de imágenes, la llamada animación. GIF te permite hacerlo. Sucedió porque en el momento de la creación de un nuevo formato, la animación no se usó en casi ninguna parte, y no hubo necesidad especial para los sitios coloridos en 1995, por lo que la animación fue excluida del proyecto como innecesario. Hoy en día, el nicho de animación ocupó la tecnología Flash, que ningún formato gráfico ordinario es un competidor.
Si el formato PNG es tan bueno, entonces ¿por qué no se convirtió en superpoblado? La respuesta es simple: sus desarrolladores de otros programas. Fue especialmente influenciado por la mayoría de los usuarios de Internet utilizaban el navegador de Internet Explorer, y no entendía las imágenes en formato PNG, aunque los desarrolladores de otros navegadores inmediatamente incorporan ese apoyo en ellos. La situación se corrigió solo cuando apareció Internet Explorer 7, pero el tiempo de "promoción" ha pasado durante mucho tiempo.
Hoy en día, el formato PNG se incluye en los tres principales formatos más populares y recomendados en tecnologías web, junto con formatos GIF y JPG. Y, a menos que la falta de animación esté en desventaja, gana todos los parámetros en comparación con los demás. Una imagen de alta calidad sin pérdida de calidad, un archivo pequeño, transiciones suaves a un fondo transparente, e incluso sin una violación de los derechos de autor de alguien, ¿qué más se necesita para la felicidad al desarrollador del sitio?
PNG (gráficos de red portátiles) se pronuncia como "Ping": formato de almacenamiento de información gráfica ráster utilizando compresión sin pérdida. PNG se creó tanto para mejorar y reemplazar el formato GIF con un formato gráfico que no requiere una licencia para usar. PNG es un estándar internacional (ISO IEC 15948: 2003) y W3C oficialmente recomendado.
El formato PNG almacena información gráfica en forma comprimida. Y esta compresión se realiza sin "pérdidas", en contraste, por ejemplo, desde el estándar JPEG (incluso con el nivel de calidad más alto posible).
El formato PNG está diseñado para reemplazar el formato GIF desactualizado y más simple, así como en cierta medida, para reemplazar un formato TIFF significativamente más complejo.
Si estamos hablando de diseño web, en comparación con GIF, tiene las siguientes ventajas principales:
Compresión mejorada: En la mayoría de los casos, el tamaño de la imagen PNG es menos similar en formato GIF.
- Más colores en la imagen: un número prácticamente ilimitado de colores en la imagen, mientras que el límite para el GIF es igual a 256.
- Soporte opcional del canal alfa: mientras que GIF es compatible solo con la transparencia binaria, PGN le permite lograr un número ilimitado de efectos de transparencia al soportar el canal alfa.
Como falta, por supuesto, se destaca la falta de apoyo para la animación, como el GIF. Aunque, por supuesto, para la animación y hay un estándar similar llamado múltiplo, gráficos de red de imágenes (MNG), pero no está ampliamente extendido y, en consecuencia, no es compatible con los navegadores masivamente modernos.
Además, ser un formato PNG gratuito ofrece varias ventajas prácticas sobre el diseñador web GIF:
- Mejor compresión: para la mayoría de las imágenes PNG, alcanza un tamaño de archivo más pequeño que el GIF
- Profundidad de color grande: PNG ofrece TrueColor hasta 48 bits cuando solo tenemos una paleta de 256 colores en GIF
- Transparencia Alfa canal: cuando GIF ofrece solo transparencia binaria, PNG permite efectos de transparencia casi ilimitados, ofreciendo la transparencia del canal alfa
Es apropiado notar que PNG no permite hacer una animación cómo hace GIF. Pero hay una norma de gráficos de red de imagen múltiple (MNG), que permite, pero no es tan ampliamente compatible con los navegadores web y los editores gráficos.
Entonces, ¿por qué el GIF sigue siendo tan popular?
Probablemente se sorprenda por qué PNG no se usa tan ampliamente en el formato web, si es tan bueno cómo se anuncia. La respuesta, en su mayor parte, es la idea incorrecta del formato y su apoyo a los navegadores.
Debido al hecho de que Internet Explorer 6 y las versiones anteriores no admiten la gama completa de capacidades PNG (incluida la transparencia del canal alfa) queda por creer (aunque está incorrecto) que Internet Explorer no admite PNG en absoluto o al menos no Apoyo la transparencia. En realidad, Internet Explorer 5 y 6 soporta suficientes especificaciones PNG, lo que lo hace funcionalmente equivalente (o más) imágenes GIF intactas. Todos los demás navegadores de referencia, incluyendo Firefox, Netscape 6 y superior, Mozilla, Opera 6 y superior, Safari y Camino, totalmente compatibles con la transparencia PNG.
Además de este concepto incorrecto en el soporte del navegador, integrado en la animación del GIF fue (y sigue siendo) la razón principal por su éxito. Aunque, en pocos años, el uso de GIF se está volviendo menos popular en comparación con otras tecnologías (por ejemplo, Flash), que se vuelven más adecuadas para la animación.
La transparencia es la característica clave de GIF y PNG, que a menudo es la causa de la selección del formato de diseñador web usado. Aunque PNG ofrece un soporte de transparencia más completo, los diseñadores web a menudo necesitan crear una versión GIF de imágenes para adaptarse a los navegadores antiguos. Usando CSS es posible (y parcialmente trillado), a través del envío de imágenes GIF para navegadores antiguos y PNG de alta calidad en los navegadores que los entienden. Pero este es un trabajo doble para el diseñador web y, como resultado, las personas van a lo largo de una menor resistencia y continúan usando imágenes GIF.
Entonces, revisamos varias razones por las que GIF sigue siendo tan popular, pero la mayoría de ellos se basan en conceptos de malentendidos o utilizando el escenario de trabajo habitual. Armado con algunos conocimientos clave para trabajar con PNG y cómo se puede usar de forma segura en los navegadores, le dan la oportunidad de aprovechar todas las ventajas que ofrece.
¿Y qué pasa con JPEG?
JPEG es otro formato web ubiquible y en la mayoría de los casos, como fotos (u otras personas con ellos), es incluso mejor que PNG o GIF. PNG no está diseñado para competir con JPEG. La compresión JPEG realiza archivos significativamente más pequeños que PNG cuando se trabaja con fotos. Por otro lado, PNG produce archivos más pequeños cuando está dentro de las imágenes, hay texto, líneas de arte, logotipo, colores "suaves", etc.
Algunos ejemplos maravillosos de usar PNG modesto.
Ahora veamos cómo usar PNG en diseño web. Recopié todos los archivos para cada ejemplo en una carpeta separada disponible en los amigos de ED.
Degradado
En los últimos años, el gradiente es una transición suave entre dos o más colores, se ha convertido en los mejores diseñadores web. Los sofisticados, apenas distinguibles de gradiente, que no se apresuran a los ojos crean una sensación de profundidad y textura.
A veces GIF es la mejor opción para el gradiente. Si el gradiente es una simple transición de dos colores, GIF funciona perfectamente. Sin embargo, las limitaciones del GIF es solo que 256 colores a menudo crean una "pelada" notable y descuidada entre las transiciones de gradiente más complejas. JPEG, por otro lado, puede generar gradientes más bien picantes, pero a menudo cuesta más archivos. Y mientras que los gradientes JPEG suelen ser lo suficientemente buenos, debe recordar que JPEG usa una compresión de pérdida que significa que la imagen resultante nunca alcanzará la calidad de la imagen sin comprimir.
El estilo típico del gradiente de fondo se usa para botones, bloques o simplemente en otro lugar. Puede parecerse en la Figura 5-1. En el sentido de las agujas del reloj, desde la esquina superior izquierda, vemos la imagen original (sin comprimir), la versión GIF, la versión PNG y JPEG. Usted ve que PNG como resultado tiene el tamaño más pequeño (515 bytes). Esto es cuatro veces menos que la imagen GIF. JPEG Un poco más que PNG a 637 bytes y también es más bajo que la calidad debido a la compresión con pérdidas (la verdad es la posibilidad de un ojo humano para determinar la diferencia en la calidad de este simple ejemplo).
Figura 5-1.
Panel de Photoshopa - Guardar para Web,
Mostrando diferencias de archivos para la misma imagen en varios formatos.
Una imagen que debería trabajar en cualquier fondo.
A veces es necesario crear una imagen que funcione igualmente en diferentes sustratos. Algunos ejemplos comunes son logo e iconos. En tales situaciones, los archivos GIF tradicionalmente dominan, pero hay varias razones por las que PNG puede ser una mejor opción en esta situación. PNG, como regla general, gana en el tamaño del archivo para logotipos o cualquier otro "arte" simple. Además, la transparencia congénita PNG tiene una creación simple de archivos únicos que funcionan en la parte superior de cualquier fondo. PNG ofrece transparencia binaria como en GIF, pero también proporciona una versión mucho más deseable con un canal alfa, en el que los píxeles pueden ser parcialmente transparentes, en lugar de ser incluidos o apagados simplemente. El uso de este último aumenta el tamaño del archivo, a veces incluso más que GIF con transparencia binaria, pero le permite suavizar los bordes de su imagen y hacer que sea más elegante su ubicación en la parte superior del fondo.
Sin embargo, procesé su concepto utilizando una imagen blanca con símbolos de plantilla. Usaron un símbolo blanco sobre un fondo transparente, que, por regla general, podría ser bastante efectivo. En este caso, su color de fondo CSS se habría manifestado en un área cuadrada o rectangular alrededor del símbolo, en lugar del símbolo mismo.
Y Dan y PJ usaban GIF transparente en lugar de PNG. Cubierto completamente sus necesidades, y bajo el estilo de los iconos tenían que crear imágenes de píxeles. Uso de PNG, puede recibir una técnica similar, pero con cierta superioridad de antiasing y transparencia parcial para su uso en iconos más detallados.
Bueno, pero ¿en qué navegadores funciona?
Sé lo que crees: toda esta transparencia PNG se ve bien, pero ¿es práctico?
La buena noticia es que todos los navegadores modernos apoyan completamente las imágenes PNG, incluida la transparencia del canal alfa, las ventajas de las que mostré en los ejemplos. Safari (todas las versiones), Firefox (todas las versiones), Opera (versión 6 y superior), Netscape (versión 6 y superior), y Mozilla (todas las versiones) estarán con una explosión para resolver todo lo que les preguntaré. Pero hay una mala noticia: el único navegador que aún no he mencionado y que tiene la mayoría de sus usuarios: Internet Explorer.
Internet Explorer 6 y a continuación no admite la transparencia del canal alfa incrustado en formato PNG. Dado que el navegador más numerosos web se ha realizado (o no un elección), este agujero abierta contenía diseñadores web alejados de PNG. Pero, con Internet Explorer 7, recibimos apoyo total para la transparencia alfa de PNG en todos los navegadores significativos. ¿Qué sigue, hay maneras de trabajar con PNG de transparencia alfa en Internet Explorer 6 y más abajo? Entonces, si quieres usar este efecto, nada te detendrá. Internet Explorer 6 y sus primeras versiones requieren más de lo necesario, la atención, pero definitivamente es posible.
Hack para Internet Explorer: Alfaimageloader
Internet Explorer tiene varios filtros propios. Se utilizan en CSS, pero no son parte de la especificación oficial de CSS. En otras palabras, no están estandarizados en la web. Desafortunadamente, Internet Explorer 6 y a continuación no admite completamente el formato PNG (que es recomendado por W3C), Microsoft "y hay un filtro que elimina esta deficiencia: alfaimageloader.
De acuerdo con la sección en el sitio web oficial de Microsoft, Alfaimageloader, "muestra la imagen dentro de los límites del objeto y entre el objeto del objeto y su contenido". En otras palabras, Alfaimageloader carga la imagen PNG con su transparencia completa, pero lo carga como su propia capa, el contenido del objeto se encuentra en el que se aplica. Las imágenes PNG cargadas de tal manera actúan más como imágenes de fondo que las imágenes de primer plano de la imagen (aunque en realidad se encuentran "sentarse" desde arriba del fondo del objeto).
En general, simplemente puede aplicar Alfaimageloader en CSS en elementos de IMG y disfrute del resultado. Al principio, la imagen se descargará, la transparencia permanece, pero luego la imagen se cargará de nuevo, como el contenido delantero del objeto, con las áreas opacas (por lo tanto, "Shades" su versión transparente).
No puede usar un PNG transparente como una imagen de fondo CSS para el elemento HTML (X) (digamos por
Uso real de Alfaimageloader
Volvamos a uno de los primeros ejemplos y tratar de cargarlo correctamente en Internet Explorer. ¿Recuerdas el canal 49, la estación de TV en Topeka? Estoy seguro, sí. La Figura 5-21 muestra cómo se ve el sitio en Internet Explorer 6.
Figura 5-21
Encabezado 49ABCNEWS.com, derivado en Internet Explorer 6 para Windows, con Transparencia PNG intacta.
HTML para la parte superior asociada con el clima, parece que ya puede sugerir:
Actualmente en Topeka, KS:
82 ° Nublado.
Obtenga el pronóstico y más ...
Usted ve la imagen, y ciertamente es PNG, incluso Internet Explorer lo carga impecablemente. El ingrediente secreto de esto es JavaScript. De hecho, usé un poco de Sripting Dom para eliminar el elemento IMG sobre la marcha y reemplazarlo con un elemento div, lo que adivinó: utiliza alfaimagelooder. Javascript se describe dentro de los comentarios condicionales, el otro, pero completamente expresado, pero completamente pendiente de Microsoft incorporado en Internet Explorer. Los comentarios condicionales le permiten utilizar el código solo para la versión previamente conocida de Internet Explorer. El código es ignorado por todos los demás navegadores, por lo que no los afecta. En el elemento
Sitio web www.49abcnews.com, encontrará:
Gracias a la primera línea, IF LTE IE6, este script se incluirá en el documento dizable solo si se muestra en la versión de Internet Explorer menor o igual (esto se indica usando LTE) 6. Todos los demás navegadores, incluido el recién llegado Internet Explorer 7, lo ignorará completamente..
Entonces, ¿qué pasa con el archivo javascript fixweatherpn.js? Echar un vistazo:
Window.Attachevent ("Onload", FixWeatherpng); Función fixweatherpng () (var img \u003d document.getelementbyid ("weatherImage"); var src \u003d img.src; img.style.visibilidad \u003d "oculto"; var div \u003d document.createelement ("DIV"); DIV.style. Filter \u003d "progid: dximagetransform.microsoft. Alfaimageloader (+ src +" ", dimensionamiento \u003d" escala ")"; // Algunos 49ABCNews.com: el estilo de CSS específico se omitió para la brevedad. img.replacenode (DIV); )
Vamos a analizar, paso a paso, lo que hace el guión. Primero, decimos el navegador que queremos ejecutar la función FixWeatherpng cuando se carga la página. La parte restante del script es la función en sí.
Comenzamos, al principio estamos buscando la imagen con la que trabajaremos en su atributo ID y guardarlo en la variable IMG. Guarde el atributo SRC (URL en el archivo de imagen) en la variable SRC. Luego ocultamos el elemento IMG que expone la propiedad CSS de la visibilidad en oculta.
Como resultado, reemplazamos el elemento IMG original (que está oculto) al elemento DIV recién creado, a lo que Alfaimageloader se adjunta con éxito.
Usando Scripts DOM para insertar su alfaimageloadeador: los bits de filtro en la mosca, tiene su propio imparcial, pero el lado necesario es CSS incorrecto. Además, fuera de sus marcadores HTML (X) contendrá elementos DIV disectivos. Y mientras todo esto se describe dentro de los comentarios condicionales, no hay posibilidad de que otros navegadores se echen a perder por el código de Microsoft. (Handyblogger: aquí Jeff está tratando de indicar finamente la solución "correcta" de Microsoft)
Si tiene que hacer algo incorrecto, al menos puede extraerlo y guardarlo por separado de todo lo que no es necesario.
En custodia
PNG, como formato gráfico, ofrece muchas ventajas técnicas además de los utilizados ampliamente en GIF. De hecho, la comunidad es tan grande que PNG hace mucho tiempo podría tomar una posición dominante como un formato gráfico no relacionado con las imágenes de fotos. El apoyo insuficiente del Explorador de Internet de algunas capacidades PNG más significativas, como la transparencia del canal alfa, como resultado, asusta a muchos desarrolladores web. Pero hay dos razones muy buenas por las que no debes tener miedo de PNG.
Primero: incluso Internet Explorer 6 y sus versiones anteriores casi apoyan a PNG en términos de lo que GIF puede (por supuesto, con la excepción de la animación). PNG casi siempre muestra un tamaño de archivo más pequeño que les permite cargarlos más rápido y gastar menos recursos.
Segundo: Internet Explorer 7 ofrece soporte completo para la transparencia alfa PNG. Los efectos que se pueden obtener con una gama completa de opciones translúcidas son casi ilimitadas. Espero que los diseñadores que encuentren formas interesantes de usar la transparencia PNG, de acuerdo con el principio de las que se describen en este artículo, las puertas se abrirán a un nuevo nivel de estilos de aún sin precedentes. Le di las ideas útiles de lo que puedes crear utilizando la transparencia PNG, pero no te detengas. ¡Mira por ti mismo!
Extracto de la creatividad de los estándares web de Cameron Adams, Mark Boulton, Andy Clarke, Simon Collison, Jeff Croft, Ethan Marcotte, Derek Feathstone, Ian Lloyd, Dan Rubin y Rob Weychert; Publicado por amigos de ed. Copyright Jeff Croft 2007. Usado con APress, Inc.