casa / POR / Png qué tipo de archivo. ¿Qué es PNG? Información PNG adicional

Png qué tipo de archivo. ¿Qué es PNG? Información PNG adicional

Además, al ser un formato PNG gratuito, el diseñador web ofrece varias ventajas prácticas sobre los GIF:

Mejor compresión: para la mayoría de las imágenes PNG, alcanza un tamaño de archivo más pequeño que GIF
Gran profundidad de color: PNG ofrece color verdadero de hasta 48 bits, cuando en GIF solo tenemos 256 paletas de colores
Transparencia de canal alfa: cuando GIF ofrece solo transparencia binaria, PNG permite efectos de transparencia casi ilimitados, ofreciendo un canal alfa para transparencia

Vale la pena señalar que PNG no le permite hacer animaciones como GIF. Pero existe el estándar de gráficos de red de imágenes múltiples (MNG) que permite esto, 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 de por qué PNG no se usa tanto en el formato web si es tan bueno como se anuncia. La respuesta, en su mayor parte, es una idea errónea sobre el formato y su soporte por parte de los navegadores.

Debido al hecho de que Internet Explorer 6 y versiones anteriores no son compatibles con la gama completa de funciones PNG (incluida la transparencia del canal alfa), las personas deben creer (aunque esto no es cierto) que Internet Explorer no es compatible con PNG o al menos no es compatible con la transparencia. De hecho, Internet Explorer 5 y 6 admiten suficientes especificaciones PNG, lo que lo hace funcionalmente equivalente (o más que eso) a las imágenes GIF no animadas. Todos los demás navegadores mencionados, incluidos Firefox, Netscape 6 y superior, Mozilla, Opera 6 y superior, Safari y Camino, son totalmente compatibles con la transparencia PNG.

Además de este concepto incorrecto de compatibilidad con el navegador, la animación GIF incorporada fue (y sigue siendo) la razón principal de su éxito. Aunque, a lo largo de los años, el uso de GIF se está volviendo cada vez menos popular en comparación con otras tecnologías (como Flash), que son cada vez más adecuadas para la animación.

La transparencia es una característica clave de GIF y PNG, que a menudo es la razón para elegir el formato de diseñador web utilizado. Aunque PNG ofrece un soporte de transparencia más completo, los diseñadores web a menudo necesitan crear una versión GIF de la imagen para adaptarse a los navegadores más antiguos. Es posible usar CSS (y en parte cursi), enviando imágenes GIF para navegadores antiguos y PNG de alta calidad a navegadores que los entiendan. Pero este es un doble trabajo para un diseñador web y, como resultado, las personas optan por menos resistencia y continúan usando imágenes GIF.

Entonces, observamos varias razones por las cuales los GIF siguen siendo tan populares, pero la mayoría de ellos se basan en un malentendido de los conceptos o en un escenario de trabajo familiar. Armado con algunos conocimientos clave para trabajar con PNG y cómo se puede usar de manera confiable en los navegadores, tiene la oportunidad de aprovechar todas las ventajas que ofrece.

¿Qué hay de JPEG?

JPEG es otro formato web omnipresente y, en la mayoría de los casos, como fotografías (u otros), es incluso mejor que PNG o GIF. PNG no está destinado a competir con JPEG. La compresión JPEG crea archivos mucho más pequeños que PNG cuando se trabaja con fotos. PNG, por otro lado, produce archivos más pequeños cuando hay texto, líneas artísticas, logotipos, colores "pares", etc. dentro de las imágenes.

Algunos buenos ejemplos de uso de un PNG modesto

Ahora veamos cómo usar PNG en diseño web. Recopilé todos los archivos para cada ejemplo en una carpeta separada disponible en amigos de ED.

Degradado

En los últimos años, el gradiente, una transición suave entre dos o más colores, se ha convertido en el mejor amigo de los diseñadores web. Particularmente populares son los rellenos degradados refinados, apenas distinguibles, que, sin ser llamativos, crean una sensación de profundidad y textura.
A veces, los GIF son la mejor opción para un gradiente. Si el gradiente es una transición simple de dos colores, el GIF funciona perfectamente. Sin embargo, la limitación de los GIF a solo 256 colores a menudo crea una racha notable y desordenada entre las transiciones de gradiente más complejas. JPEG, por otro lado, puede mostrar gradientes bastante agradables, pero a menudo a costa de un archivo de mayor tamaño. Y aunque los gradientes JPEG son generalmente lo suficientemente buenos, debe recordar que JPEG utiliza compresión con pérdida, lo que significa que la imagen resultante nunca alcanzará la calidad de una imagen sin comprimir.

El típico estilo de degradado de fondo en cuestión se usa para botones, bloques o simplemente en otro lugar. Esto puede parecerse a 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. Como resultado, verá que PNG es el tamaño más pequeño (515 bytes). Esto es cuatro veces más pequeño que la imagen GIF. JPEG es un poco más grande que PNG en 637 bytes y también es de menor calidad debido a la compresión con pérdida (aunque la capacidad del ojo humano para determinar la diferencia de calidad en este simple ejemplo sigue siendo cuestionable).

Figura 5-1
Panel de Photoshop: Guardar para Web,
mostrando diferencias de tamaño de archivo para la misma imagen en diferentes formatos

Una imagen que debería funcionar en cualquier fondo.

A veces necesita crear una imagen que funcione igual en diferentes sustratos. Algunos ejemplos comunes son logotipos e íconos. Los GIF han sido tradicionalmente dominantes en tales situaciones, pero hay varias razones por las cuales PNG puede ser una mejor opción en esta situación. PNG generalmente gana en tamaño de archivo para logotipos o algún otro "arte" simple. Además, la transparencia PNG nativa facilita la creación de archivos únicos que funcionan sobre cualquier fondo. PNG ofrece transparencia binaria, como en GIF, pero también proporciona una opción mucho más deseable con un canal alfa en el que los píxeles pueden ser parcialmente transparentes, en lugar de simplemente encenderse o apagarse. El uso de este último aumenta el tamaño del archivo, a veces incluso más que los GIF con transparencia binaria, pero esto le permite suavizar los bordes de su imagen y hacer que sea más elegante colocarla sobre el fondo.

Sin embargo, modifiqué su concepto utilizando una imagen blanca con símbolos: plantillas. Utilizaron un símbolo blanco sobre un fondo transparente que, como regla, podría ser bastante efectivo. En este caso, el color de fondo de su CSS aparecerá en un área cuadrada o rectangular alrededor del carácter, en lugar del carácter en sí.

Tanto Dan como PJ usaron GIF transparentes en lugar de PNG. Esto cubrió por completo sus necesidades y, bajo el estilo de los iconos, tuvieron que crear imágenes de píxeles. Usando PNG, puede obtener una técnica similar, pero con cierta superioridad debido al suavizado y la transparencia parcial para usarlo en iconos más detallados.

Ok, pero ¿en qué navegadores funciona esto?

Sé lo que piensas: toda esta transparencia PNG se ve bien, pero ¿es práctica?

La buena noticia es que todos los navegadores modernos son totalmente compatibles con las imágenes PNG, incluida la transparencia del canal alfa, cuyas ventajas mostré en los ejemplos. Safari (todas las versiones), Firefox (todas las versiones), Opera (versiones 6 y superiores), Netscape (versiones 6 y superiores) y Mozilla (todas las versiones) resolverán alegremente todo lo que les pido. Pero hay una mala noticia: el único navegador que aún no he mencionado que tienen la mayoría de sus usuarios: Internet Explorer.

Internet Explorer 6 y versiones anteriores no admiten la transparencia del canal alfa incrustado en formato PNG. Dado que la elección (o no elección) del navegador se hizo para la mayoría de los muchos internautas, este agujero enorme ha mantenido a los diseñadores web lejos de PNG. Pero, con el lanzamiento de Internet Explorer 7, obtuvimos soporte completo para la transparencia alfa PNG en todos los navegadores importantes. A continuación, ¿hay formas de trabajar con la transparencia alfa de PNG en Internet Explorer 6 y versiones posteriores? Entonces, si quieres usar este efecto, nada te detendrá. Internet Explorer 6 y sus versiones anteriores requieren más atención de la necesaria, pero esto es definitivamente posible.

Hack para Internet Explorer: AlphaImageLoader

Internet Explorer tiene varios filtros nativos. Se usan en CSS, pero no forman parte de la especificación oficial de CSS. En otras palabras, no están estandarizados en la web. Desafortunadamente, Internet Explorer 6 y versiones posteriores no son totalmente compatibles con el formato PNG (que es recomendado por W3C), Microsoft tiene un filtro que elimina este inconveniente: AlphaImageLoader.

Según una sección del sitio web oficial de Microsoft, AlphaImageLoader "muestra una imagen dentro de los límites del objeto y entre el fondo del objeto y su contenido". En otras palabras, AlphaImageLoader carga una imagen PNG con su transparencia total, pero la carga como su propia capa, en la parte inferior de la cual se encuentra el contenido del objeto sobre el que se aplica. Las imágenes PNG cargadas de esta manera actúan más como imágenes de fondo que como imágenes de primer plano (aunque en realidad se "sientan" sobre el fondo del objeto).

En general, simplemente puede aplicar AlphaImageLoader en CSS en elementos img y disfrutar del resultado. Al principio, la imagen se cargará, la transparencia permanecerá, pero luego la imagen se volverá a cargar, como el contenido frontal del objeto, con áreas opacas (de esta manera, su versión transparente está "sombreada").

No puede usar PNG transparente como imagen de fondo CSS para un elemento (X) HTML (digamos para

) y esperamos que AlphaImageLoader haga que esto funcione en Internet Explorer como debería. Recuerde que AlphaImageLoader inserta su imagen entre el fondo y el primer plano del objeto. Por lo tanto, aunque cargará su imagen en toda su belleza transparente, también continuará cargándola como una imagen de fondo CSS, y sin sus maravillosos píxeles translúcidos.

Uso real de AlphaImageLoader

Volvamos a uno de los ejemplos anteriores e intentemos cargarlo correctamente en Internet Explorer. ¿Recuerdas el canal 49, una estación de televisión 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, que se muestra en Internet Explorer 6 para Windows, con transparente transparencia PNG.

El HTML para la parte superior relacionada con el clima parece que ya lo habrás adivinado:

Actualmente en Topeka, KS:
82 ° Cubierto
Obtenga el pronóstico y más ...

Ves la imagen, y ciertamente es PNG, incluso Internet Explorer la descarga sin problemas. El ingrediente secreto para esto es JavaScript. De hecho, usé un poco de secuencias de comandos DOM para eliminar el elemento img sobre la marcha y reemplazarlo con un elemento div que, lo adivinaste, usa AlphaImageLoader. JavaScript se describe dentro de los comentarios condicionales, otro idioma disponible pero completamente no estandarizado de Microsoft integrado en Internet Explorer. Los comentarios condicionales le permiten usar código solo para una versión previamente conocida de Internet Explorer. El resto de los navegadores ignoran el código, por lo que no los afecta de ninguna manera. En el artículo sitio web www.49abcnews.com, encontrará:

Gracias a la primera línea, si lte IE6, este script se incluirá en el documento dibujado solo si se muestra en la versión de Internet Explorer menor o igual (esto está indicado por lte) 6. Todos los demás navegadores, incluido el nuevo Internet Explorer 7, ignorarán esto por completo. .

Entonces, ¿qué hay en el archivo JavaScript fixWeatherPng.js? Echar un vistazo:

Window.attachEvent ("onload", fixWeatherPng); función fixWeatherPng () (var img \u003d document.getElementById ("weatherImage"); var src \u003d img.src; img.style.visibility \u003d "hidden"; var div \u003d document.createElement ("DIV"); div.style. filter \u003d "progid: DXImageTransform.Microsoft. AlphaImageLoader (+ src +" ", sizing \u003d" scale ")"; // Algunos estilos CSS específicos de 49abcnews.com se omiten por brevedad. img.replaceNode (div); )

Analicemos, paso a paso, lo que hace el guión. Primero, le decimos al navegador que queremos ejecutar la función fixWeatherPng cuando se carga la página. El resto del script es la función misma.

Comenzamos, primero buscamos una imagen con la que trabajaremos por su atributo id y la guardamos en la variable img. Guardamos el atributo src (URL del archivo de imagen) en la variable src. Luego, ocultamos el elemento img exponiendo la propiedad de visibilidad CSS a oculto.

Como resultado, reemplazamos el elemento img original (que está oculto) con el elemento div recién creado, al que AlphaImageLoader se adjunta con éxito.

El uso de secuencias de comandos DOM para insertar su AlphaImageLoader, el bit de filtrado sobre la marcha, tiene su lado poco favorecedor pero necesario: CSS incorrecto. Además, los elementos div no semánticos estarán contenidos fuera de su marcado HTML (X). Y aunque todo esto se describe dentro de los comentarios condicionales, no hay posibilidad de que otros navegadores se corrompan por el código de Microsoft. (Handyblogger: Aquí Jeff está intentando señalar sutilmente una solución "torpe" 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 las ampliamente utilizadas en GIF. De hecho, los beneficios son tan grandes que PNG, hace mucho tiempo, podría haber tomado una posición dominante como formato gráfico no relacionado con las imágenes fotográficas. Como resultado, la falta de soporte de Internet Explorer para algunas de las funciones PNG más importantes, como la transparencia del canal alfa, asusta a muchos desarrolladores web. Pero hay dos muy buenas razones por las que no debes temer a PNG.

Primero: incluso Internet Explorer 6 y sus versiones anteriores admiten casi por completo PNG en términos de lo que puede hacer GIF (por supuesto, excepto la animación). PNG casi siempre muestra un tamaño de archivo más pequeño, lo que les permite cargar más rápido y consumir menos recursos.

Segundo: Internet Explorer 7 ofrece soporte completo para la transparencia alfa PNG. Los efectos que se pueden obtener con toda la gama de opciones translúcidas son casi ilimitados. Espero que los diseñadores que encuentren formas interesantes de usar la transparencia PNG, por el principio de los descritos en este artículo, abran las puertas a un nuevo nivel de estilos que aún no se había visto antes. Te he dado ideas útiles de lo que puedes crear con transparencia PNG, pero no te detengas allí. ¡Mira por ti mismo!

Extracto de Creatividad de estándares web de Cameron Adams, Mark Boulton, Andy Clarke, Simon Collison, Jeff Croft, Ethan Marcotte, Derek Featherstone, Ian Lloyd, Dan Rubin y Rob Weychert; publicado por amigos de ED. Copyright Jeff Croft 2007. Usado con permiso de Apress, Inc.

El formato de imagen PNG es uno de los más populares y ofrece a los usuarios almacenar imágenes comprimidas sin perder su calidad. La mayoría de PNG se usa para editar gráficos o en Internet. A continuación, veremos algunas formas simples en que puede abrir un archivo de este formato en su computadora.

Existen varios métodos diferentes que le permiten abrir archivos PNG para verlos y editarlos. Solo necesita seguir las instrucciones proporcionadas a continuación, y abrir la imagen no es difícil.

Método 1: visores de 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 trabajar con imágenes sea lo más cómodo posible. Considere el proceso de abrir una imagen PNG usando el ejemplo del programa GIMP:

Si GIMP por alguna razón no le conviene, le sugerimos que se familiarice con la lista completa de programas para ver imágenes en nuestro artículo en el siguiente enlace. Allí definitivamente encontrarás algo adecuado.

En caso de que necesite realizar varias manipulaciones con una imagen abierta, use editores gráficos especiales con funcionalidad avanzada y la presencia de una gran cantidad de herramientas diferentes. Puede encontrar más detalles en nuestro artículo en el siguiente enlace.

Método 2: herramienta estándar de Windows

Todas las versiones del sistema operativo Windows tienen un programa incorporado para ver imágenes. Con su ayuda, también se abre el archivo PNG. Echemos un vistazo más de cerca a este proceso:

Si desea que todas las imágenes PNG se abran a través del visor de fotos estándar de Windows, siga estos pasos:

Ahora, por defecto, todos los archivos PNG se abrirán usando el visor de fotos estándar. Para cambiar el programa para que se abra, simplemente siga los mismos pasos y elija un software diferente.

En este artículo, analizamos a fondo formas simples de abrir imágenes PNG. Como puede ver, no hay nada complicado en este proceso, y todo se hace en unos pocos pasos.

Estás aquí porque tienes un archivo que tiene una extensión de archivo que termina en .png. Los archivos con la extensión de archivo .png solo pueden ser iniciados por ciertas aplicaciones. Es posible que los archivos .png sean archivos de datos en lugar de documentos o medios , lo que significa que no están destinados a ser vistos en absoluto.

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

Los archivos PNG son archivos de imágenes ráster comprimidas, 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 de índice integrados por imágenes de mapa de bits, y las especificaciones de codificación y compresión de imágenes digitales sin pérdida que se implementan en estos archivos .png son similares a los estándares de compresión integrados en los archivos GIF. También conocido como gráficos de red portátiles, el formato PNG se desarrolló para eliminar las limitaciones de las imágenes GIF, en términos de soporte de color y licencia de patentes. El canal de transparencia de estos archivos PNG se ha mejorado para implementar el soporte de 8 bits. El soporte 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 están configuradas correctamente, la aplicación que está destinada a abrir su archivo .png lo abrirá. Es posible que necesite descargar o comprar la aplicación correcta. También es posible que tenga la aplicación correcta en su PC, pero los archivos .png aún no están asociados con ella. En este caso, cuando intentas abrir un archivo .png, puedes decirle a Windows qué aplicación es la correcta para ese archivo. A partir de entonces, al abrir un archivo .png se abrirá la aplicación correcta.

aplicaciones que abren un archivo .png

Adobe Photoshop CS6 para Microsoft Windows

Adobe Photoshop CS6 para Microsoft Windows es un software de edición y gestión de imágenes descargable en computadoras con Windows, es decir, Windows 7 (sin SP y con SP1) y Windows XP con SP3. Este software viene con nuevas funciones y herramientas para una edición 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 Adobe Mercury Graphics Engine, que es una tecnología de motor que proporciona un rendimiento más rápido y de alta calidad. Las herramientas Content-Aware son nuevas características diseñadas para retocar imágenes con facilidad, ya que puede recortar imágenes sin ningún efecto, corregir automáticamente el desenfoque o las curvaturas de lentes gran angular, eliminar los ojos rojos y ajustar el balance de color como el brillo y el contraste. Este editor de imágenes también incluye la función de recuperación automática que puede hacer una copia de seguridad de las imágenes no guardadas, la opción Guardar fondo, Galería de desenfoque, herramienta Recortar, creación de video y mucho más. Con todas estas nuevas funciones mejoradas y una interfaz moderna y amigable para el usuario, editar fotos digitales nunca puede ser tan divertido y fácil sin Photoshop CS6.

Adobe Photoshop CS6 para Mac

Adobe Photoshop CS6 para Mac es la versión del software de administración de imágenes "Creative Suite", 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 funciones y herramientas, como el Mercury Graphics Engine desarrollado por la misma compañía para un rendimiento de mejora de imagen rápido y de alta calidad, funciones de Content-Aware, herramientas intuitivas reimaginadas para el diseño de películas, flujos de trabajo , Galería de desenfoque, herramienta de recorte y mucho más. Adobe Mercury Graphics Engine funciona de manera que hace que la tarea de edición sea fácil y rápida de completar. Esto también permite compartir y migrar imágenes con las opciones de recuperación automática y Guardar en segundo plano. Las nuevas herramientas Content-Aware están hechas para una forma fácil y controlable de retocar o mejorar imágenes que dan como resultado una salida más satisfecha. Básicamente, permite a cualquier usuario corregir automáticamente las imágenes, recortarlas y corregir las curvaturas de la lente gran angular.

Sistemas ACD Canvas 14

ACD Systems International Inc. es el desarrollador de ACD Systems Canvas 14, que es un software técnico de solución de gráficos, que permite a los usuarios analizar datos, mejorar gráficos y compartir toda la información con facilidad y rapidez. Este programa está diseñado con herramientas completas que ayudan a los usuarios a hacer gráficos técnicos e ilustraciones con precisión. Consiste en herramientas de edición que varían desde la edición de imágenes hasta las herramientas de ilustración de objetos. Cualquier resultado creado por este programa hace buenas presentaciones para proyectos, propuestas y otros propósitos para cualquier línea de negocios relacionada con gráficos e ingeniería. Más información sobre las características, los usuarios pueden trabajar con imágenes ráster y gráficos vectoriales utilizando el mismo archivo con la opción de editar cambiando el tamaño y escalando objetos, dibujando formas, así como insertando trazos y tintas o anchos de relleno. 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.

Sistemas ACD ACDSee 15

ACD Systems ACDSee 15 es un software de fotografía que cuenta con un organizador de imágenes, un visor y un programa RAW / editor de imágenes 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 originalmente distribuido 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 310 MB de espacio libre en el disco duro), un adaptador de pantalla a color de alta resolución a 1024 x 768 y una grabadora 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 a medida que se importan desde la cámara u otro dispositivo de almacenamiento. También cuenta con vista de mapa y soporte de geoetiquetado que permite a los usuarios ver la ubicación de las imágenes de las cámaras con 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 el almacenamiento de copias de seguridad en CD, DVD y Blu-Ray.

Archivo PNG: una imagen ráster guardada en el formato Portable Network Graphic. Cada imagen PNG contiene una paleta, un conjunto de colores utilizados. Para reducir el tamaño del archivo, se utiliza la compresión sin pérdidas mediante el algoritmo Deflate. Se utiliza principalmente en Internet como imágenes para páginas web. El formato fue desarrollado para reemplazar GIF, que, además de sus defectos, hasta 2004 tenía limitaciones para su uso en software libre. El nuevo formato PNG resolvió estos problemas. En particular, implementa soporte para un canal alfa de 8 bits y soporte para profundidades de color de hasta 48 bits. Mientras que en formato GIF solo es posible una transparencia total y la paleta de colores está limitada a solo 256 colores (8 bits). Sin embargo, a diferencia de su predecesor, este formato no admite animación. Para este propósito, se creó otro formato MNG. En los archivos PNG, también es imposible usar la paleta CMYK, ya que este formato no está destinado al trabajo profesional con gráficos. Los archivos PNG se pueden abrir en cualquier navegador y en casi cualquier programa para ver y editar imágenes. En Windows, un archivo con la extensión PNG se puede abrir con un doble clic.

La extensión de archivo .png es una imagen PNG. Es posible ver y procesar una imagen ráster en formato PNG utilizando los siguientes programas: Microsoft Windows Photos, Microsoft Windows Photo Viewer, Microsoft Paint, Adobe Photoshop CC. Además, los programas enumerados pueden convertir imágenes, imágenes y dibujos de este formato.

Se abre un archivo PNG 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 de fotografía más popular en Internet, especialmente diseñado para su uso en la Web.

Un archivo con una extensión de archivo PNG es un archivo Gráficos de red portátiles.. El formato utiliza compresión sin pérdidas y generalmente se considera una alternativa al GIF. Pero a diferencia de los GIF, las animaciones no son compatibles con los archivos PNG.

El formato PNG tiene fotografías en escala de grises y a todo color, se admiten 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 tales defectos de compresión pueden ocurrir en imágenes con texto o alrededor de áreas de alto contraste.

Cómo abrir un archivo PNG

Para abrir archivos PNG, puede usar cualquier navegador de Internet o editor de imágenes. Tanto las plataformas Windows como Mac OS tienen mecanismos incorporados para ver tales imágenes.

¿Para qué sirve el formato PNG?

Png - Ver fotos de Windows por defecto se usa a menudo para abrir archivos PNG porque es un programa del sistema de Windows. Pero hay muchas otras formas de verlos.

Todos los navegadores (p. Ej. Chrome, Firefox, Internet Explorer etc.) buscará automáticamente los archivos PNG que abra en Internet, lo que significa que no necesita descargar todos los archivos PNG que desea ver en su computadora. También puede usar el navegador para abrir archivos PNG que ya están en la computadora usando el método abreviado de teclado Ctrl + O. La mayoría de estos programas también admiten arrastrar y soltar, por lo que simplemente puede arrastrar y soltar el archivo PNG en el navegador para abrirlo.

También hay varias opciones independientes para abrir tales imágenes: estos son editores gráficos especiales. Algunos populares - XnView , Irfanview , FastStone Image Viewer , Google Drive , Ojo de GNOME y gThumb. Para editar archivos PNG, puede usar casi cualquiera de los programas y aplicaciones enumerados Pintar y Paint.net, una popular utilidad GIMP, así como el conocido Adobe Photoshop.

Conversión PNG

Los archivos de imagen se pueden convertir de varias maneras, por ejemplo, convertidos ay desde png usando varios programas y servicios en línea. Por ejemplo, esto le permite hacer el editor Png - Photoconverter.

Un archivo de imagen que se almacena en el formato Portable Network Graphic (PNG). Contiene una matriz de bits de colores y utiliza una compresión sin pérdidas cerca del archivo .GIF, pero sin restricciones de copia. Comúnmente utilizado para almacenar gráficos en imágenes web.

El formato PNG (leído como PNG) se creó en respuesta a las limitaciones del formato GIF, principalmente para aumentar el soporte de color y proporcionar un formato de imagen sin una licencia de patente. Además de esto, aunque los archivos GIF solo admiten píxeles opacos o totalmente transparentes, las imágenes PNG pueden incluir un canal de transparencia de 8 bits que le permite cambiar los colores de opaco a transparente.

Las imágenes PNG no pueden ser animadas como imágenes GIF. Pero el formato .MNG asociado puede ser animado. Las imágenes PNG no proporcionan soporte CMYK porque no están destinadas para su uso en gráficos profesionales. Las imágenes PNG son compatibles con la mayoría de los navegadores web.

Mac OS X 10.4 y posteriores almacenan capturas de pantalla como archivos PNG. Ubuntu Linux también almacena capturas de pantalla impresas en formato PNG.

Tipo MIME: image / png

Descargue el programa para el formato PNG

En este artículo quiero hablar sobre una característica muy desagradable de Photoshop, que se manifiesta al guardar imágenes transparentes en PNG24. Tome la imagen original y copie un fragmento a PNG24. Lo hice de esta manera: usando la herramienta Lazo poligonal, seleccioné un fragmento, lo copié y lo pegué en un nuevo documento, y luego lo guardé a través de Guardar para Web:

PNG24, 456 Kb

Como descubrimos en la primera parte, en PNG24 la imagen consiste esencialmente en dos capas: RGB, que contiene datos sobre el color de cada píxel, y un 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 cualquier color para empacar de manera eficiente la imagen. Sin embargo, esto es lo que Photoshop guardó en la capa RGB (lo vi a través del editor Seashore):

Y a simple vista, puede ver que hay grandes fragmentos de información absolutamente innecesaria:

Si no desea utilizar otros editores (por ejemplo, no noté una falla de este tipo en Adobe Fireworks), le propongo una forma sencilla de solucionar este defecto en Photoshop. Nuestra tarea es reemplazar toda la información en áreas completamente transparentes con cualquier color (preferiblemente negro, para no dudar que estas áreas tendrán el menor peso en bytes).

1. Abra el ejemplo en Photoshop y seleccione la imagen en la capa: Ctrl + clic en la imagen pequeña de la capa en la paleta Capas.

2. Vaya al modo de máscara rápida (Q).

3. Usando Imagen → Ajustes → Umbral, deje solo aquellos píxeles de la máscara cuyo color era negro. Para hacer esto, arrastre el control deslizante a la posición más a la izquierda.

4. Salga del modo de máscara rápida (Q) e invierta la selección (Seleccionar → Invertir o Ctrl + Shift + I). Solo quedaron seleccionados píxeles absolutamente transparentes.

5. Rellene el área seleccionada con negro (hay muchas formas, por ejemplo, a través de Editar → Rellenar).

6. Invierta la selección nuevamente y agregue una máscara a la capa (un icono en la paleta de capas).

7. Ahora guardamos para Web y observamos cómo la imagen milagrosamente "perdió peso" en 122 KB.

Repito una vez más que todas las acciones se registran muy convenientemente en Actions, después de lo cual se realizan con una sola pulsación de tecla.

Continuará.

Al comunicarme con mis 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 una translucidez honesta. Si busca en Internet información sobre este formato, es fácil notar que los desarrolladores web se dividen en dos campos. El primero escribe sobre lo maravilloso que es este formato, utilizando datos puramente técnicos incomprensibles para los codificadores y diseñadores comunes (por ejemplo, sobre la superioridad de los algoritmos de compresión desinflados sobre LZW), mientras que otros dejan comentarios de diversos grados de estupidez sobre la inutilidad de PNG, sin siquiera molestarse en profundizar en La esencia de las cosas descritas en la especificación.

Tratemos de descubrir qué ventajas ofrece este formato para aprender cómo usarlos al preparar ilustraciones para la web.

Comencemos con la terminología. Supongo que la mayoría de los lectores usan Photoshop y han encontrado los nombres PNG-8 y PNG-24 allí. Estos no son dos formatos diferentes, sino solo variaciones del mismo PNG. El formato le permite almacenar tres tipos de imágenes: escala de grises (se usa un canal para describir la imagen - blanco), color indexado (se usa la paleta de colores, como en GIF) y color verdadero (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 efectivamente comprime solo áreas monocromas horizontales? Ahora puedes olvidarte de esta restricción:

GIF, 2568 bytes

PNG-24, 372 bytes

La segunda ventaja importante es el filtrado de la línea de exploración o los filtros delta, gracias a los cuales el empaquetador PNG puede obtener datos mucho más convenientes para la compresión.

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

Como puede ver en el ejemplo, el codificador GIF comprimiría líneas mal empaquetadas horizontalmente (porque los mismos colores se propagan verticalmente). Y así es como un codificador PNG puede convertir estos datos:

El número 2 aparece delante de cada línea, este es el filtro que se aplicó a la línea. En este caso, es el filtro Up, que le dice al decodificador: "Para el píxel actual, tome el valor de píxel anterior y agréguele el valor actual". En nuestro caso, esto es 0, porque los colores de los píxeles actuales y superiores no difieren. Y estos datos se pueden empaquetar de manera más eficiente si tenemos una imagen suficientemente grande.

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

Aquí aplicamos un filtro 1 llamado Sub, que le dice al decodificador: "Tome el valor de píxel a la izquierda del actual y agréguele el valor actual". En este caso, 1.

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

Verifique el funcionamiento de los filtros:

Un lector atento puede notar que los filtros se aplican no a todo el archivo, sino a las líneas.

Archivo PNG - ¿que es?

Esto significa que cada la cuerda puede tener su filtrar. Resulta que puede haber 5 formas de filtrar una sola imagen. En general, la tarea de un buen codificador es precisamente seleccionar dichos valores de filtro en los que el tamaño del archivo será mínimo. Desafortunadamente, Photoshop no siempre hace bien su trabajo, por lo que varias utilidades como OptiPNG y PNGCrush vienen al rescate, que en una gran cantidad de pasadas seleccionan diferentes métodos de filtrado y estrategias de compresión de datos, reduciendo significativamente la cantidad de algunas imágenes complejas. Sin embargo, vale la pena recordar que estos programas no garantizan una reducción en el volumen de cada archivo, solo están tratando de encontrar la mejor manera de codificar los datos.

Otra foto dolorosa para Photoshop porque no sabe cómo guardar imágenes en modo de escala de grises, es decir, no sabe cómo reducir la profundidad del color. Aquí, las utilidades mencionadas anteriormente nos salvarán nuevamente, lo que, si es posible, reduce la profundidad de color, sin comprometer la calidad de la imagen.

PNG-24 (photoshop → truecolor),
8167 bytes

PNG-24 (Photoshop + OptiPNG → escala de grises),
6132 bytes

Las ventajas de la escala de grises sobre el color verdadero son obvias: por ejemplo, el blanco en el primer caso se registra (en notación decimal) con el número 255, y en el segundo - 16777215.

Ahora, armados con el conocimiento de almacenar datos PNG, podemos usarlos para preparar imágenes para la web. Sobre esto - en los siguientes artículos.

PNG (Portable Network Graphics), pronunciado "ping" es un formato ráster para almacenar información gráfica que utiliza compresión sin pérdidas. PNG se creó 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 lo recomienda oficialmente.

El formato PNG almacena información gráfica en forma comprimida. Además, esta compresión se realiza sin "pérdida", en contraste, por ejemplo, con JPEG estándar (incluso con el nivel de calidad más alto posible).

El formato PNG está diseñado para reemplazar el formato GIF obsoleto y más simple, y también, en cierta medida, para reemplazar el formato TIFF mucho más complejo.

Si hablamos 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 más pequeño que el formato GIF correspondiente.
- Más colores en la imagen: colores casi ilimitados en la imagen, mientras que el límite para GIF es 256.
- Soporte de canal alfa opcional: mientras que GIF solo admite transparencia binaria, PGN le permite lograr un número ilimitado de efectos de transparencia a través del soporte de canal alfa.

Un inconveniente es, por supuesto, la falta de soporte para animaciones, como GIF. Aunque, por supuesto, existe un estándar similar para la animación llamado Gráficos de red de imágenes múltiples (MNG), sin embargo, no está muy extendido y, en consecuencia, no es compatible con navegadores masivamente modernos.