Desafortunadamente, muchos propietarios de sitios web todav\u00eda no entienden qu\u00e9 tipos de archivos de imagen elegir para los diferentes casos de uso. \u00bfEl resultado? Acaban ralentizando la velocidad de carga de su sitio<\/a> porque sus im\u00e1genes no tienen el mejor formato disponible, ni est\u00e1n optimizadas.<\/p>\n En este art\u00edculo, repasaremos todas las extensiones de archivos de imagen m\u00e1s importantes y cu\u00e1ndo deber\u00edas usarlas para proporcionar la mejor experiencia de usuario posible a tus visitantes.<\/p>\n Los tipos y formatos de archivos de imagen se dividen en dos categor\u00edas principales: archivos de im\u00e1genes rasterizadas y archivos de im\u00e1genes vectoriales.<\/p>\n Echemos un vistazo m\u00e1s de cerca a cada categor\u00eda.<\/p>\n Los formatos de imagen m\u00e1s comunes para la web (JPEG, GIF y PNG<\/a>) est\u00e1n todos bajo la categor\u00eda de raster.<\/p>\n Los tipos de archivos de im\u00e1genes rasterizadas muestran im\u00e1genes est\u00e1ticas en las que cada p\u00edxel tiene un color, una posici\u00f3n y una proporci\u00f3n definidos en funci\u00f3n de su resoluci\u00f3n (por ejemplo, 1280×720).<\/p>\n Como son est\u00e1ticas, no se puede cambiar el tama\u00f1o de las im\u00e1genes de manera eficiente, el dise\u00f1o original y los p\u00edxeles simplemente se estirar\u00e1n para llenar el espacio extra. Esto termina creando una imagen borrosa, pixelada o distorsionada de alguna manera.<\/p>\n La gran mayor\u00eda de las fotograf\u00edas o im\u00e1genes que ves en Internet utilizan un formato de imagen rasterizada.<\/p>\n SVG<\/a>, EPS, AI y PDF<\/a> son ejemplos de tipos de archivos de im\u00e1genes vectoriales.<\/p>\n A diferencia de los formatos de archivos de imagen rasterizados est\u00e1ticos, donde cada forma y color del dise\u00f1o est\u00e1 ligado a un p\u00edxel, estos formatos son m\u00e1s flexibles.<\/p>\n Los gr\u00e1ficos vectoriales utilizan en cambio un sistema de l\u00edneas y curvas en un plano cartesiano, escalado en comparaci\u00f3n con el \u00e1rea total, no un solo p\u00edxel.<\/p>\n Esto significa que se puede ampliar infinitamente la resoluci\u00f3n de la imagen original sin ninguna p\u00e9rdida de calidad o distorsi\u00f3n.<\/p>\n Como puedes ver, la diferencia de calidad cuando se ampl\u00eda 7 veces es completamente incomparable.<\/p>\n Como el SVG calcula las posiciones bas\u00e1ndose en un porcentaje del \u00e1rea total, y no en p\u00edxeles, no hay ninguna pixelaci\u00f3n.<\/p>\n\n A continuaci\u00f3n, repasaremos todos los formatos de archivos gr\u00e1ficos principales, desde im\u00e1genes web rasterizadas, a vectoriales, hasta archivos de software de edici\u00f3n de im\u00e1genes.<\/p>\n Haremos una inmersi\u00f3n profunda y analizaremos los pros y los contras, el navegador y el soporte del sistema operativo, y los casos de uso ideales para cada formato.<\/p>\n JPEG (o JPG)<\/a> es un formato de archivo de imagen rasterizado con una compresi\u00f3n con p\u00e9rdida<\/a> que lo hace adecuado para compartir im\u00e1genes. Los JPEG son im\u00e1genes \u00abcon p\u00e9rdida\u00bb, lo que significa que reducen el tama\u00f1o del archivo, pero tambi\u00e9n la calidad de las im\u00e1genes cuando se utiliza el formato.<\/p>\n JPEG sigue siendo uno de los tipos de archivos de imagen m\u00e1s utilizados en Internet debido a su compresi\u00f3n y su soporte virtualmente universal para los navegadores y los sistemas operativos.<\/p>\n La mayor\u00eda de las plataformas de medios sociales<\/a> (como Facebook e Instagram) convierten autom\u00e1ticamente los archivos de imagen cargados en JPEG. Tambi\u00e9n utilizan tama\u00f1os de imagen de medios sociales<\/a> \u00fanicos para controlar la resoluci\u00f3n de tus fotos.<\/p>\n PNG es un formato de gr\u00e1ficos rasterizados que soporta una compresi\u00f3n sin p\u00e9rdidas, manteniendo el detalle y el contraste entre los colores.<\/p>\n En particular, el PNG ofrece una mejor legibilidad del texto que el JPEG.<\/p>\n Esto hace que PNG sea una opci\u00f3n m\u00e1s popular para las infograf\u00edas, los banners<\/a>, las capturas de pantalla y otros gr\u00e1ficos que incluyen tanto im\u00e1genes como texto.<\/p>\n El GIF es otro tipo de archivo de imagen que cae dentro del formato raster. Utiliza una compresi\u00f3n sin p\u00e9rdidas pero \u00abrestringe\u00bb la imagen a 8 bits por p\u00edxel y una paleta limitada de 256 colores.<\/p>\n El formato GIF<\/a> es el m\u00e1s famoso (y m\u00e1s utilizado) para las im\u00e1genes animadas porque su limitaci\u00f3n de 8 bits mantiene el tama\u00f1o de los archivos de animaciones peque\u00f1os y f\u00e1ciles de usar en Internet.<\/p>\n WebP es un formato de imagen desarrollado espec\u00edficamente para proporcionar una mejor compresi\u00f3n de im\u00e1genes sin p\u00e9rdidas y con p\u00e9rdidas.<\/p>\n Cambiar de JPEG y PNG a WebP puede ayudar a ahorrar espacio en el disco del servidor<\/a> y un ancho de banda significativo, con hasta un 35% de archivos de imagen m\u00e1s peque\u00f1os para una calidad id\u00e9ntica.<\/p>\n Un formato que no puede faltar en esta gu\u00eda de tipos de archivos de imagen, tenemos el TIFF.<\/p>\n TIFF, que es la abreviatura de Tagged Image File Format, es un formato de imagen rasterizado que se utiliza m\u00e1s com\u00fanmente para almacenar y editar im\u00e1genes que m\u00e1s tarde se utilizar\u00e1n para la impresi\u00f3n.<\/p>\n Aunque admite la compresi\u00f3n con p\u00e9rdidas, suele utilizarse como formato de imagen sin p\u00e9rdidas. Adem\u00e1s, la mayor\u00eda de las aplicaciones gr\u00e1ficas profesionales que admiten TIFF (Photoshop, Illustrator, etc.) no utilizan la compresi\u00f3n. Por lo tanto, es habitual que las im\u00e1genes TIFF tengan un gran tama\u00f1o de archivo.<\/p>\n El Bitmap (BMP) es un formato de archivo de imagen pr\u00e1cticamente obsoleto que mapea los p\u00edxeles individuales con poca o ninguna compresi\u00f3n. Esto significa que los archivos BMP pueden f\u00e1cilmente llegar a ser extremadamente grandes y son poco pr\u00e1cticos de almacenar o manejar.<\/p>\n HEIF, abreviatura de High Efficiency Image File Format, es un formato de imagen desarrollado por el equipo que est\u00e1 detr\u00e1s del formato de v\u00eddeo MPEG<\/a> para ser un competidor directo de JPEG.<\/p>\n En teor\u00eda, la compresi\u00f3n es casi el doble de eficiente que el JPEG, lo que permite obtener im\u00e1genes de hasta el doble de calidad con tama\u00f1os de archivo id\u00e9nticos.<\/p>\n Es un formato de imagen rasterizado, basado en el mapeo de p\u00edxeles, lo que significa que no se pueden ampliar las im\u00e1genes sin perder calidad.<\/p>\n El formato de archivo Scalable Vector Graphics, normalmente conocido como SVG, fue desarrollado por el W3C como un lenguaje de marcado para renderizar im\u00e1genes bidimensionales directamente en el navegador.<\/p>\n No se basa en p\u00edxeles como un formato rasterizado, sino que utiliza texto XML para contornear formas y l\u00edneas de forma similar a como las ecuaciones matem\u00e1ticas crean los gr\u00e1ficos.<\/p>\n Esto significa que puedes ampliar las im\u00e1genes SVG infinitamente sin p\u00e9rdida de calidad.<\/p>\n En esencia, un archivo EPS (PostScript Encapsulado) es un archivo de imagen vectorial utilizado para almacenar ilustraciones en Adobe Illustrator y otros programas de ilustraci\u00f3n como CorelDraw.<\/p>\n Al igual que los archivos SVG, el EPS es en realidad un documento basado en texto que traza formas y l\u00edneas con c\u00f3digo, en lugar de mapear p\u00edxeles y colores. Como resultado, los archivos EPS tambi\u00e9n soportan el escalado sin p\u00e9rdidas.<\/p>\n Probablemente asocies el PDF con el almacenar, guardar y leer de documentos basados principalmente en texto. Eso es perfectamente comprensible – el documento est\u00e1 ah\u00ed en el nombre despu\u00e9s de todo.<\/p>\n Pero los archivos PDF est\u00e1n basados en el mismo lenguaje PostScript que impulsa los archivos de im\u00e1genes vectoriales EPS y pueden ser usados para guardar im\u00e1genes e ilustraciones tambi\u00e9n.<\/p>\n Es el formato de imagen elegido para almacenar ilustraciones, portadas de revistas y m\u00e1s para su posterior impresi\u00f3n. Tambi\u00e9n es la elecci\u00f3n preferida para nuestros libros electr\u00f3nicos de Kinsta<\/a>.<\/p>\n Como su nombre indica, el formato de archivo PSD es un formato de imagen utilizado para guardar documentos de imagen y trabajos en curso con Adobe Photoshop.<\/p>\n No es un formato de imagen seguro para la web<\/strong>, por lo que no es compatible con ning\u00fan navegador, o visualizador, o editor de im\u00e1genes est\u00e1ndar.<\/p>\n La IA es otro formato de imagen desarrollado espec\u00edficamente por Adobe para no solo guardar la imagen, sino tambi\u00e9n el estado del proyecto.<\/p>\n Al igual que el PSD, no est\u00e1 dise\u00f1ado para su uso en la web <\/strong>y no es compatible con ning\u00fan navegador, ni con la mayor\u00eda de los visualizadores de im\u00e1genes predeterminados.<\/p>\n A diferencia de los archivos PSD, puedes ampliar libremente los archivos AI sin p\u00e9rdida de calidad.<\/p>\n XCF, que significa eXperimental Computing Facility, es un tipo de archivo de imagen nativo del editor de im\u00e1genes de c\u00f3digo abierto GIMP<\/a>. Es el equivalente a los archivos PSD y guarda rutas, transparencia, filtros y m\u00e1s.<\/p>\n Una vez m\u00e1s, se trata de un tipo de archivo nativo para almacenar proyectos y no es compatible con ning\u00fan navegador <\/strong>o visualizador de im\u00e1genes predeterminado.<\/p>\n El INDD es un tipo de archivo nativo para los usuarios de Adobe InDesign donde puedes guardar los archivos del proyecto incluyendo el contenido de la p\u00e1gina, estilos, muestras y m\u00e1s.<\/p>\n Aunque a veces se denomina formato de archivo de imagen, tiende a vincularse a elementos visuales m\u00e1s all\u00e1 del texto.<\/p>\n No est\u00e1 soportado por ning\u00fan navegador o visualizador de im\u00e1genes por defecto, ya que no es un formato seguro para la web<\/strong>.<\/p>\n Los formatos de imagen en bruto son los tipos de archivo que una c\u00e1mara digital utiliza para almacenar im\u00e1genes de calidad total para su posterior post-producci\u00f3n y edici\u00f3n.<\/p>\n Los principales tipos de archivos de im\u00e1genes en bruto por el fabricante de la c\u00e1mara:<\/p>\n En lugar de los 256 tonos por canal de color (8 bits) disponibles en un archivo JPEG, los archivos RAW ofrecen hasta 16.384 tonos por canal de color (14 bits) en una sola imagen. Eso te da m\u00e1s flexibilidad a la hora de ajustar los colores y el contraste en el post-procesamiento.<\/p>\n Las im\u00e1genes Raw no est\u00e1n pensadas para la web <\/strong>o para ser compartidas y no son compatibles con ning\u00fan navegador o\u00a0 visualizador de im\u00e1genes importante.<\/p>\n Seg\u00fan los datos relacionados con el uso de la web, los tres tipos de archivos de imagen m\u00e1s comunes son PNG, JPEG y SVG.<\/p>\n Examinemos qu\u00e9 es lo que los hace tan populares abajo.<\/p>\n Dado que el PNG como formato se presta mejor para el texto dentro de la imagen, se utiliza m\u00e1s a menudo para capturas de pantalla, banners (dependiendo del tama\u00f1o del anuncio<\/a>), y m\u00e1s.<\/p>\n Dado que utiliza la compresi\u00f3n sin p\u00e9rdidas, tambi\u00e9n es utilizada por dise\u00f1adores y fot\u00f3grafos para mostrar im\u00e1genes de alta calidad en los sitios web de sus portafolios<\/a>, por ejemplo.<\/p>\n Estos dos factores, junto con el soporte universal del navegador y del sistema operativo, lo convierten en el tipo de archivo de imagen m\u00e1s popular de la web. Los PNG est\u00e1n presentes en un impresionante 77% de los sitios web.<\/p>\n La compresi\u00f3n con p\u00e9rdida significa que JPEG es una mejor opci\u00f3n para mostrar im\u00e1genes en todo el contenido. La p\u00e9rdida de calidad es apenas visible para el usuario medio de Internet, y puedes ahorrar un considerable espacio en disco y ancho de banda.<\/p>\n Por eso es el segundo formato m\u00e1s popular en Internet, usado por casi el 72% de los sitios web. La mayor\u00eda de los sitios usan tanto PNG como JPEG para diferentes prop\u00f3sitos.<\/p>\n Como un recordatorio: No hay diferencia entre JPG vs JPEG<\/a>, son dos acr\u00f3nimos y extensiones de archivo diferentes para el mismo formato.<\/p>\n Los archivos SVG son archivos vectoriales escalables que son perfectos para iconos, logotipos, gr\u00e1ficos e ilustraciones simples. La imagen puede incluso ser insertada directamente en la p\u00e1gina como c\u00f3digo CSS<\/a>.<\/p>\n Es por eso que los SVG est\u00e1n en tercer lugar, utilizados por el 27% de los sitios web.<\/p>\n Aunque raramente es el formato elegido para las im\u00e1genes est\u00e1ticas, el GIF ha vuelto a ser la opci\u00f3n n\u00famero uno para compartir animaciones.<\/p>\n Como resultado, alrededor del 22% de los sitios web usan GIF en sus p\u00e1ginas, aunque probablemente tambi\u00e9n usen PNG y JPEG como formatos est\u00e1ndar.<\/p>\n Los formatos de imagen Raw son de la m\u00e1s alta calidad pero tienen tama\u00f1os de archivo irrazonablemente grandes de hasta cientos de megabytes.<\/p>\n Para las im\u00e1genes de la web, el formato de archivo WebP ofrece tama\u00f1os de archivo entre 25 y 35 % m\u00e1s peque\u00f1os<\/a> que el JPEG para las fotos de la misma calidad, lo que significa que puedes subir im\u00e1genes de mayor calidad para el mismo espacio de disco y acelerar tu sitio<\/a>.<\/p>\n HEIF es otra alternativa de JPEG con una compresi\u00f3n m\u00e1s eficiente, pero actualmente no es soportada por ninguno de los principales navegadores.<\/p>\n Los archivos PNG ofrecen una compresi\u00f3n sin p\u00e9rdidas, pero eso significa que los tama\u00f1os de los archivos ser\u00e1n excesivamente grandes y lentos de cargar. Un solo archivo PNG puede tener a menudo de cientos de KB o incluso m\u00e1s de 1 MB. Sin embargo, si aprovechas algunas t\u00e1cticas como la carga lenta (disponible en el n\u00facleo desde WordPress 5.5)<\/a> y un CDN<\/a>, todav\u00eda podr\u00edas tener un sitio r\u00e1pido.<\/p>\n Los tipos de archivos de imagen m\u00e1s comunes para la web que soportan la transparencia son PNG, WebP, GIF, e incluso SVG.<\/p>\n La mayor\u00eda de los tipos de archivos de imagen de proyectos nativos como PSD, XCF y AI tambi\u00e9n soportan la transparencia.<\/p>\n Por otro lado, el popular formato de imagen JPEG no soporta <\/strong>la transparencia.<\/p>\n La principal diferencia entre PNG y JPEG es que PNG es un formato de imagen sin p\u00e9rdidas, mientras que JPEG es un formato con p\u00e9rdidas. Esto significa b\u00e1sicamente que PNG utiliza t\u00e9cnicas de compresi\u00f3n sin sacrificar la calidad original o el detalle de la imagen.<\/p>\n Para el texto de las im\u00e1genes, las capturas de pantalla del tutorial, y cuando se quiere que los signos u otros elementos finos sean 100% visibles en una foto, PNG es el formato adecuado.<\/p>\n\u00bfCu\u00e1les son los diferentes tipos de archivos de imagen?<\/h2>\n
Formatos de archivos de im\u00e1genes rasterizadas<\/h3>\n
![\"Imagen](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/raster-image-jpg.jpg\")
Formatos de archivos de im\u00e1genes vectoriales<\/h3>\n
![\"Ampliaci\u00f3n](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/vector-image.jpg\")
Los 15 tipos de archivos de imagen m\u00e1s populares<\/h2>\n
1.JPEG (y JPG) – Joint Photographic Experts Group (Grupo Conjunto de Expertos en Fotograf\u00eda)<\/b><\/h3>\n
![\"Tiger](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/tiger-jpg.jpg\")
Ventajas y desventajas<\/h4>\n
\n
Soporte para los navegadores y los sistemas operativos<\/h4>\n
\n
Casos de uso<\/h4>\n
\n
2. PNG – Portable Network Graphics (Gr\u00e1ficos de Red Port\u00e1tiles)<\/b><\/h3>\n
![\"El](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/kinsta-resource-center-png-image.png\")
Ventajas y desventajas<\/h4>\n
\n
Soporte para los navegadores y los sistemas operativos<\/h4>\n
\n
Casos de uso<\/h4>\n
\n
3. GIF \u2014 Graphics Interchange Format (Formato de Intercambio de Gr\u00e1ficos)<\/b><\/h3>\n
![\"Ejemplo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/turtle-dancing-gif.gif\")
Ventajas y desventajas<\/h4>\n
\n
Soporte para los navegadores y los sistemas operativos<\/h4>\n
\n
Casos de uso<\/h4>\n
\n
4. WebP<\/h3>\n
![\"Ejemplo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/webp-image-compression.jpg\")
Ventajas y desventajas<\/h4>\n
\n
Soporte para los navegadores y los sistemas operativos<\/h4>\n
\n
Casos de uso<\/h4>\n
\n
5. TIFF<\/h3>\n
![\"Icono](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/tiff-icon.jpg\"){kind=icon}
Ventajas y desventajas<\/h4>\n
\n
Soporte para los navegadores y los sistemas operativos<\/h4>\n
\n
Casos de uso<\/h4>\n
\n
6. BMP \u2014 Bitmap<\/h3>\n
![\"bmp](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/bmp-vs-gif.png\")
Ventajas y desventajas<\/strong><\/h4>\n
\n
Soporte para los navegadores y los sistemas operativos<\/h4>\n
\n
Casos de uso<\/h4>\n
\n
7. HEIF – High Efficiency Image File Format (Formato de Archivo de Imagen de Alta Eficiencia)<\/h3>\n
![\"Formato](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/jpeg-vs-heif.jpg\")
Ventajas y desventajas<\/h4>\n
\n
Soporte para los navegadores y los sistemas operativos<\/h4>\n
\n
Casos de uso<\/h4>\n
\n
8. SVG \u2014 Scalable Vector Graphics (Gr\u00e1ficos Vectoriales Escalables)<\/b><\/h3>\n
![\"Logotipo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/1200px-SVG_logo.svg.png\"){kind=logo}
Ventajas y desventajas<\/h4>\n
\n
Soporte para los navegadores y los sistemas operativos<\/h4>\n
\n
Casos de uso<\/h4>\n
\n
9. EPS \u2014 Encapsulated Postscript (PostScript Encapsulado)<\/b><\/h3>\n
![\"Icono](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/pasted-image-0-3.png\")
Ventajas y desventajas<\/h4>\n
\n
Soporte para los navegadores y los sistemas operativos<\/h4>\n
\n
Casos de uso<\/h4>\n
\n
10. PDF \u2014 Portable Document Format (Formato de Documento Port\u00e1til)<\/h3>\n
![\"Ejemplo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/adobe-pdf.png\")
Ventajas y desventajas<\/h4>\n
\n
Soporte para los navegadores y los sistemas operativos<\/h4>\n
\n
Casos de uso<\/h4>\n
\n
11. PSD \u2014 Photoshop Document (Documento de Photoshop)<\/h3>\n
![\"El](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/psd-logo.png\"){kind=logo}
Ventajas y desventajas<\/h4>\n
\n
Casos de uso<\/h4>\n
\n
12. AI – Adobe Illustrator Artwork<\/h3>\n
![\"Icono](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/adobe-illustrator-file-icon.png\"){kind=icon}
Ventajas y desventajas<\/h4>\n
\n
Casos de uso<\/h4>\n
\n
13. XCF \u2014 eXperimental Computing Facility (Desenvoltura Inform\u00e1tica Experimental)<\/h3>\n
![\"Icono](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/xcf-icon.png\"){kind=icon}
Ventajas y desventajas<\/h4>\n
\n
Casos de uso<\/h4>\n
\n
14. INDD \u2014 Adobe InDesign Document<\/h3>\n
![\"Icono](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/adobe-indesign-icon.png\"){kind=icon}
Ventajas y desventajas<\/h4>\n
\n
Casos de uso<\/h4>\n
\n
15. Raw Image File Types (Formato de Im\u00e1genes Raw)<\/b><\/h3>\n
\n
Ventajas y desventajas<\/h4>\n
\n
Casos de uso<\/h4>\n
\n
Preguntas frecuentes sobre los tipos de archivos de imagen<\/h2>\n
\u00bfCu\u00e1les son los 3 tipos de archivos m\u00e1s comunes de un archivo de imagen?<\/h3>\n
![\"Estad\u00edsticas](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/09\/image-file-types-stats.png\")
1. PNG: Capturas de pantalla, banners, infograf\u00edas, fotos…<\/h4>\n
2. JPEG: Fotos<\/h4>\n
3. SVG: Logos, iconos e ilustraciones<\/h4>\n
Menci\u00f3n de honor: Im\u00e1genes GIF animadas<\/h4>\n
![\"Ejemplo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/comeback-gif.gif\")
\u00bfQu\u00e9 formato de imagen es el de mayor calidad?<\/h3>\n
\u00bfQu\u00e9 formatos de archivo soportan la transparencia?<\/h3>\n
\u00bfEs PNG mejor que JPEG?<\/h3>\n