Menú
Está libre
registrarse
el principal  /  POR / PNG que tipo de archivo. ¿Qué es PNG? Información adicional sobre el formato PNG

PNG que tipo de archivo. ¿Qué es PNG? Información adicional sobre el formato PNG

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.

Porque Explorador de Internet. 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 admite 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, degradado - transición suave Entre dos o más colores, se convirtió en el mejor amigo de 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 es un poco más que PNG en 637 bytes y también es más bajo que la calidad debido a la compresión con pérdidas (la verdad es la oportunidad ojos humanos. Determinar la diferencia de calidad en este ejemplo simple permanece en cuestión).

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 en fondo transparenteque, como 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?

Buenas noticias son que todos los navegadores modernos apoyan completamente Imagen 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, tenemos apoyo total PNG de transparencia alfa 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 puedes usar PNG transparente como fondo imagen CSS para (x) elemento html (digamos por

) Y espero que Alfaimageloader hará este trabajo en Internet Explorer como debería. Recuerde que Alfaimageloader inserta su imagen entre el fondo y el primer plano del objeto. Por lo tanto, si bien enviará su imagen en toda su gloria transparente, también continuará enviándolo como una imagen de fondo CSS, y sin sus maravillosos píxeles translúcidos.

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 alfaimageloader. 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 usar código solo para avanzado conocido versión de internet Explorador. 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.

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 es adecuado para ninguna razón, le sugerimos familiarizarse con lista llena 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

En todas las versiones de la operación. sistemas de 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 con herramienta estándar Ver fotos. Para cambiar el programa para abrir, simplemente realice las mismas acciones seleccionando otro software.

En este artículo consideramos en detalle. formas simples Apertura de imágenes de formato PNG. Como puede ver, no hay nada complicado en este proceso, y todo se realiza literalmente para varias acciones.

Usted "RE aquí tiene una extensión de archivo que termina en .png. Los archivos con la extensión de archivo .png solo pueden ser lanzados por ciertas aplicaciones. Es posible que los archivos .png sean archivos de datos en lugar de documentos o medios, lo que significa que" re No destinado a ser visto en absoluto.

¿Qué es a & nbsp.png & nbspfile?

Los archivos PNG son archivos de imagen raster comprimidos generalmente implementados para elementos visuales que se encuentran en un sitio web, entre otros gráficos web. El contenido de la imagen de estos archivos .png consiste en colores índice integrados por imágenes de mapa de bits y especificaciones de codificación que se implementan es que estos archivos .png son similares a los estándares de compresión integrados en archivos GIF. También conocidos como gráficos de red portátiles, el formato PNG se desarrolló para levantar las limitaciones de las imágenes GIF, en términos de soporte de color y licencias de patentes. El canal de transparencia de estos archivos PNG se ha mejorado para implementar el soporte de 8 bits. El soporte de CMYK no está disponible en estos archivos PNG.

¿Cómo abrir un archivo .png?

Inicie un archivo .png, o cualquier otro archivo en su PC, haciendo doble clic en él. Si sus asociaciones de archivos se configuran correctamente, la aplicación que significa abrir su archivo .png se abrirá. Es posible que tenga que descargar o comprar la aplicación correcta. También es posible que tenga la aplicación correcta en su PC, pero los archivos .PNG no están asociados con él. En este caso, cuando intenta abrir un archivo .png, puede indicar a Windows qué aplicación es la correcta para ese archivo. A partir de entonces, abrir un archivo .png Abrirá la aplicación correcta.

aplicaciones que abren un archivo .png

Adobe Photoshop CS6 para Microsoft Windows

Adobe Photoshop. CS6 para Microsoft Windows. Es una imagen que edita y administra el software descargable en computadoras con Windows, a saber, Windows 7 (con SP1) y Windows XP con SP3. Este software viene con nuevas características y herramientas para Economía fácil, rápida, divertida y avanzada de imágenes digitales. Una característica que hace que este programa sea confiable para la edición de imágenes es el motor de gráficos de Adobe Mercury, que es una tecnología de motor que proporciona un rendimiento más rápido y de alta calidad. Las herramientas con conciencia de contenido son nuevas funciones diseñadas para retocar las imágenes con facilidad, ya que las imágenes de la COP con la facilidad afectan, el desenfoque automático correcto o las curvaturas de lente de gran angular, eliminan el ojo rojo y ajuste el equilibrio en color como el brillo y el contraste. Este editor de imágenes también se incluye con una función de recuperación automática que puede hacer una copia de seguridad de las imágenes no guardadas, la opción de guardar fondo, la galería de desenfoque, la herramienta de cultivo, la creación de video y mucho más. Todas estas nuevas características mejoradas y una moderna interfaz de usuario amigable, editando fotos digitales, nunca pueden ser tan divertidas y fáciles de Wort Photoshop CS6.

Adobe Photoshop CS6 para Mac

Adobe Photoshop CS6 para Mac

Adobe Photoshop CS6 para Mac es la versión del software de administración de imágenes de "Creative Suiteà ¢ â-" creativo diseñado exclusivamente para computadoras Mac, particularmente Mac OS X V10.6 a 10.7 en 64 bits. Este programa de edición de imágenes se incluye con un nuevo conjunto de características y herramientas, como el motor de gráficos de Mercury desarrollado por la misma compañía para el rendimiento de mejora de imágenes de alta calidad y de alta calidad, características de contenido de contenido, herramientas intuitivas re-imaginadas para el diseño de películas, flujos de trabajo , Blur Gallery, Herramienta de cultivo y mucho más. El motor de Adobe Mercury Graphics funciona de una manera que hace que la tarea de edición sea fácil y rápida para completar. Esto también permite compartir y la migración de imágenes con opciones de recuperación automática y ahorro de fondo Las nuevas herramientas con conciencia de contenido se realizan para una forma fácil y controlable de retencia o mejora de imágenes que resultan en una salida más satisfecha. Básicamente, permite a cualquier usuario a las imágenes correctas automáticas, recortarlas y corregir las curvaturas de lentes de gran angular.

ACD Systems Canvas 14

ACD Systems Canvas 14

ACD SYSTEMS INTERNATIONAL INC. Es el desarrollador de ACD Systems Canvas 14, que es un software de solución gráfica técnica, que permite a los usuarios analizar datos, mejorar los gráficos y compartir toda la información con facilidad y rápida. Este programa está diseñado con herramientas con todas las funciones que ayudan a usar en la fabricación de gráficos técnicos e ilustraciones con precisión. Consiste en la edición de herramientas que varían de la edición a las herramientas de ilustración de objetos. Cualquier resultado creado por este programa, haga buenas presentaciones para proyectos, propuestas y otros fines para cualquier línea de negocio relacionada con gráficos e ingeniería. Los usuarios pueden trabajar con imágenes rasteras y gráficos vectoriales utilizando los mismos objetos de generación de archivos, formas de dibujo, así como la inserción de accidentes cerebrovasculares y tintas o anchos. También hay una herramienta para agregar textos o etiquetas y dimensiones de formato, además de crear gráficos. Con este programa, los usuarios pueden compartir proyectos terminados a través de presentaciones o publicaciones.

ACD Systems ACDSEE 15

ACD Systems ACDSEE 15

ACD Systems ACDSEE 15 es un organizador de fotos, cuenta con un organizador de imágenes, visor y programas de editor de imagen / ruda / de imagen para Microsoft Windows y Mac OS X 10.6 (Windows XP con Service Pack 2, Vista, 7 y 8; Mac OS X 10.5, 10.6 10.7 y león de montaña). Fue desarrollado por ACD Systems International, Inc. Y se distribuyó originalmente como una aplicación de 16 bits que luego se actualizó con una versión de 32 bits. Este requisito mínimo de hardware para esta aplicación es un procesador Intel Pentium III / AMD Athlon o equivalente con 512 MB de RAM (con un espacio de disco duro libre de 310 MB), un adaptador de pantalla de color de alto color a una resolución de 1024 x 768 y un quemador de CD / DVD. ACDSEE administra y admite archivos de video y audio en formatos que incluyen GIF, BMP, JPG, PNG, MP3, PSD, WAV, MPEG y TIFF. Los usuarios pueden ver, editar, agregar efectos y organizar colecciones de fotos y videos que se pueden compartir en línea. Las fotos se pueden organizar, ya que se importan desde la cámara u otro dispositivo de almacenamiento. También cuenta con la vista del mapa y el soporte de etiquetado geográfico que permiten a los usuarios ver la ubicación de las imágenes de las cámaras habilitadas para GPS. Las características como la navegación rápida, el escaneo, la edición y las opciones de copia de seguridad facilitan la clasificación de fotos por fecha y evento, y almacenamiento de copias de copia de seguridad a CD, DVD y Blu-ray.

El archivo PNG es una imagen raster guardada en formato gráfico de red portátil. Cada dibujo PNG contiene una paleta, un conjunto de colores utilizados. Para reducir el tamaño del archivo, la compresión se aplica sin pérdida de calidad de acuerdo con el algoritmo de deformación. Se utiliza principalmente en Internet como imágenes para páginas web. El formato fue diseñado para reemplazar GIF, que, además de sus deficiencias, antes de 2004 tuvo restricciones para su uso en libertad. software. Nuevo formato PNG resolvió estos problemas. En particular, implementa el soporte del canal alfa de 8 bits y que soporta la profundidad de color a 48 bits. Mientras está en formato GIF, solo la transparencia completa y la paleta de colores se limitan solo a 256 colores (8 bits). Sin embargo, en contraste con el predecesor, este formato no admite la animación. Para este propósito, se creó otro formato MNG. En los archivos PNG, también es imposible usar la paleta CMYK, porque este formato no está diseñado para trabajar profesional con gráficos. Los archivos PNG se pueden abrir en cualquier navegador y prácticamente en cualquier programa para ver y editar imágenes. EN Archivo de Windows. Con la extensión PNG, puede abrir un doble clic del mouse.

Extensión de archivo. PNG es un patrón PNG. Vista y procesamiento imagen de la trama En formato PNG, es posible usar los siguientes programas: fotos de Microsoft Windows, Microsoft Windows Photo Viewer, Microsoft Paint, Adobe Photoshop CC. También los programas enumerados pueden convertir imágenes, imágenes y dibujos de este formato.

El archivo de formato PNG se abre con programas especiales. Para abrir este formato, descargue uno de los programas propuestos.

La extensión PNG es un formato de archivo utilizado para almacenar imágenes sin pérdida de calidad. Este es el formato más popular de fotos en Internet diseñado específicamente para su uso en la red.

Archivo con la extensión de archivo PNG es un archivo Gráficos de red portátiles.. El formato utiliza la compresión sin pérdida y generalmente se considera como una alternativa al GIF. Pero a diferencia de GIF, una animación no es compatible con archivos PNG.

El formato PNG tiene tanto fotos en tonos de capas grises y a todo color, son compatibles con capas transparentes. La compresión PNG suele ser mejor que la utilizada en GIF. JPG A veces tiene más ventajas sobre PNG, pero después de dicha compresión, los defectos pueden ocurrir en imágenes con texto o alrededor de las regiones de alto contraste.

Cómo abrir un archivo PNG

Para abrir archivos PNG, puede usar cualquier navegador en línea o editor gráfico. Y la plataforma de Windows OS y Mac OS tienen mecanismos incorporados para ver tales imágenes.

¿Para qué es el formato PNG?

Programa PNG: la visualización de las fotos de Windows de forma predeterminada se usa a menudo para abrir archivos PNG, ya que es un sistema sistémico programa de Windows. Pero hay muchas otras formas de verlos.

Todos los navegadores (por ejemplo, Chrome, Firefox, Internet Explorer Etc.) verá automáticamente los archivos PNG que abre en Internet, lo que significa que no necesita descargarla a la computadora cada archivo PNG que desea ver. También puede usar el navegador para abrir los archivos ya disponibles en la computadora PNG usando una combinación. llaves ctrl + O. La mayoría de estos programas también admiten arrastrar y soltar, para que simplemente pueda arrastrar el archivo PNG al navegador para abrirlo.

También hay varias opciones autónomas para abrir tales imágenes: estos son especiales editor gráfico. Algunos populares - xnview , Irfanview. , Visor de imágenes de Faststone. , Google Drive. , Ojo de gnomo y gthumb. Puede usar casi cualquiera de los programas listados, aplicaciones para editar archivos PNG. Pintura. y Paint.net., Popular utilidad GIMP, así como la conocida Adobe Photoshop.

Conversión PNG.

Los archivos de imagen se pueden convertir diferentes caminos, por ejemplo, convertir a PNG y de él usando varios programas y servicios en línea. Por ejemplo, le permite hacer un editor PNG, un convertidor de fotos.

El archivo de imagen que se almacena en formato de gráfico de red portátil (PNG). Contiene la matriz de colores de los colores y utiliza la compresión sin pérdida, cerca del archivo.gif, pero sin restricciones en la copia. Generalmente se utiliza para almacenar gráficos de imágenes web.

Formato PNG (lee como APG) fue creado en respuesta a las restricciones formato GIFPrincipalmente para aumentar el soporte de colores y proporcionar un formato de imagen sin una licencia de patente. Además de esto archivos gif Mantenga solo píxeles opacos o completamente transparentes, las imágenes PNG pueden incluir un canal de transparencia de 8 bits que le permite cambiar de colores de opaco a transparente.

Las imágenes PNG no se pueden animar como imágenes GIF. Pero asociado con ellos. MNG puede ser animado. Las imágenes PNG no proporcionan soporte CMYK porque no están destinadas a ser utilizadas en el campo de los gráficos profesionales. Las imágenes PNG son compatibles con la mayoría de los navegadores web.

Mac OS X 10.4 y las versiones posteriores almacenan capturas de pantalla como archivos PNG. Ubuntu Linux También almacena las capturas de pantalla de impresión en formato PNG.

Tipo MIME: Imagen / PNG

Descargar programa para formato PNG.

En este artículo quiero contar sobre uno muy. características desagradables "Photoshop", que se manifiesta mientras mantiene imágenes transparentes en PNG24. Tome la imagen original y copie un poco de fragmento en PNG24. Hice esto: el uso de la herramienta de lazo poligonal asignó un fragmento, copiado y puesto en nuevo documento, después de lo cual retenido a través de Guardar para web:


PNG24, 456 KB

Como descubrimos en la primera parte, en PNG24, la imagen, de hecho, consta de dos capas: RGB que contiene datos sobre el color de cada píxel, y el canal alfa con información sobre su transparencia.

Formato gráfico PNG: procesamiento y visualización

Es lógico suponer que, en áreas absolutamente transparentes, debe haber un solo color para empacar de manera más eficiente la imagen. Sin embargo, eso es lo que salvé el "Photoshop" en la capa RGB (lo vi a través del editor de la orilla del mar):

Y el ojo desnudo muestra que había grandes fragmentos de información absolutamente innecesaria:

Si no desea utilizar otros editores (por ejemplo, no noté una escasez de fuegos artificiales Adobe), propongo una manera sencilla de eliminar este defecto en "Photoshop". Nuestra tarea es reemplazar toda la información en áreas absolutamente transparentes de algún color (preferiblemente negro, para no dudar de que estas áreas tendrán el peso más pequeño en bytes).

1. Abra un ejemplo en "Photoshop" y resalte la imagen en la capa: CTRL + Haga clic en la imagen de la capa pequeña en el panel Capas.

2. Vamos a cambiar al modo de máscara rápida (tecla Q).

3. Uso de la imagen → Ajustes → Umbral, solo dejaremos las máscaras cuyo color es negro. Para hacer esto, tire del control deslizante a la posición más a la izquierda.

4. Nos fuimos de la máscara rápida (clave Q) e invierte la selección → Inverso o Ctrl + Shift + i). Solo los píxeles absolutamente transparentes permanecieron resaltados.

5. Vierta el área seleccionada en negro (Métodos, por ejemplo, por ejemplo, a través de Editar → Rellenar).

6. Nuevamente invirtiendo la selección y agregue una capa de la máscara (icono en la paleta de la capa).

7. Ahora hagamos guardar para web y ver cómo la imagen "perdió" maravillosamente "perdida" por 122 kb.

Una vez más, repito que todas las acciones están muy convenientemente registradas en las acciones, después de lo cual se realiza con una pulsación de la tecla.

Continuará.

Comunicando con sus colegas en varios seminarios y en el estudio, llegué a la conclusión de que, para muchos, la única ventaja del formato PNG es la presencia de la fair translúcida. Si busca información sobre este formato en Internet, es fácil notar a los desarrolladores web divididos en dos campamentos. La primera escritura sobre qué tipo de formato es maravilloso, operando datos puramente técnicos, codificadores y diseñadores convencionales incomprensibles (por ejemplo, sobre la superioridad de los algoritmos de deformación de la compresión sobre LZW), otros dejan comentarios de diferentes grados de tonterías sobre la inigualidad. de PNG, sin haber molestado incluso en la esencia de las cosas descritas en la especificación.

Intentemos averiguar qué ventajas le da a este formato para aprenderlos a usar al preparar ilustraciones para la web.

Vamos a empezar con la terminología. Supongo que la mayoría de los lectores usan Photoshop y cumplimos con los nombres de PNG-8 y PNG-24 allí. Estos no son dos formatos diferentes, sino solo las variaciones del mismo PNG. El formato le permite almacenar tres tipos de imágenes: Greyscale (para describir la imagen, se usa un canal - blanco), color indexado (paleta de colores usados, como en GIF) y TrueColor (se usan tres canales). RGB).

La ventaja más importante del formato PNG es, por supuesto, los nuevos algoritmos de compresión. ¿Todos recuerdan que GIF comprime eficazmente las áreas monocromáticas horizontales? Acerca de esta restricción ahora se puede olvidar:

Gif, 2568 bytes

PNG-24, 372 byte

La segunda ventaja importante es el filtrado de cadenas (filtrado de línea de escaina o filtros Delta), debido a que el paquete PNG puede obtener datos mucho más convenientes para la compresión.

Considera el ejemplo de cómo funcionan. Tome una imagen de 5 × 5 píxeles con un gradiente horizontal y muestre esquemáticamente cómo se puede guardar en el archivo (cada número es un color único).

Como se puede ver en el ejemplo, el codificador GIF daría una línea a comprimir, que están mal embalados horizontalmente (porque los mismos colores se distribuyen verticalmente). Pero, ¿cómo puede convertir este codificador PNG de datos:

En frente de cada línea, apareció un dígito 2. Este es un filtro que se aplicó a la cadena. En este caso, este es un filtro arriba, que dice decodificador: "Para el píxel actual, tome el valor de píxeles arriba y agregue el valor actual a él". En nuestro caso, esto es 0, porque los colores de los píxeles actuales y superiores no difieren. Y estos datos pueden ser más efectivos si tenemos una imagen bastante grande.

¿Por qué escribí? lata? Porque en nuestro caso idealizado, tal esquema sería más eficiente:

Se aplica el filtro 1 llamado sub, que dice decodificador: "Tome el valor del píxel a la izquierda de la corriente y agregue el valor actual". En este caso, 1.

Después de filtrar, todas las líneas (junto con los valores de filtro) se combinan en una secuencia, que luego se comprime por algoritmos de deformación (su discusión está más allá del alcance de este artículo).

Compruebe los filtros funcionan:

El lector atento puede notar que los filtros se aplican no en todo el archivo por completo, sino a las filas.

Archivo de formato PNG - ¿Qué es?

Esto significa que cada La cadena puede tener su propio filtrar. Resulta que los métodos de filtrado de una imagen pueden ser de 5 altura de la imagen. En general, la tarea de un buen codificador es solo para recoger dichos valores de filtros a los que el volumen del archivo será mínimo. Desafortunadamente, Photoshop no siempre se enfrenta bien con su trabajo, por lo que varios servicios públicos como Oppipng y PNGCRush vienen al rescate, que en una gran cantidad de pases recogen diferentes métodos Filtrado y estrategias para comprimir datos, reduciendo significativamente el volumen de algunas imágenes complejas. Sin embargo, vale la pena recordar que estos programas no garantizan una disminución en el volumen para cada archivo, simplemente intentan encontrar el método óptimo de la codificación de datos.

Otra inyección de pacientes Photoshop para no saber cómo guardar imágenes en el modo Greyscale, es decir, no sabe cómo bajar la profundidad del color. Aquí volveremos a guardar las utilidades mencionadas anteriormente, que, si es posible, reducir la profundidad de color, no empeorando la calidad de la imagen.

PNG-24 (Photoshop → TrueColor),
8167 byte

PNG-24 (Photoshop + Optipng → Greyscale),
6132 byte

Las ventajas de Greyscale sobre TrueColor son obvias: por ejemplo, el blanco en el primer caso se registra (en el número decimal) número 255, y en el segundo - 16777215.

Ahora, armado con el almacenamiento de conocimiento en formato PNG, podemos aplicarlos en la preparación de imágenes para la web. Esto está en los siguientes artículos.

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.

Tiendas de formato PNG 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.