{ "id": 37022, "slug": "2018-09-26_optimizacion-de-imagenes-para-la-web-y-el-rendimiento", "url": "https://agents.willem.com/es/posts/2018-09-26_optimizacion-de-imagenes-para-la-web-y-el-rendimiento/", "source_url": "https://willem.com/es/2018-09-26_optimizacion-de-imagenes-para-la-web-y-el-rendimiento/", "language": "es", "date": "2018-09-26", "published": "2018-09-26T00:00:00+02:00", "created": "2025-06-26T22:10:20.991000+02:00", "updated": "2026-10-20T09:19:12.822000+02:00", "title": "Optimización de imágenes para la web y el rendimiento", "subtitle": "Reduce el tamaño de los archivos con jpegoptim, optipng, pngcrush y pngquant", "summary": "Una forma de hacer más rápido tu sitio web es hacerlo más pequeño. No con letras diminutas, ¡sino con menos bytes! Más de la mitad del peso de un sitio web medio son imágenes. Aun así, muy poca gente las optimiza para la web y el rendimiento. ¡Es hora de descubrir cuántos bytes puedes ahorrar!", "topics": [ "cloud", "data", "howto", "networking", "programming", "server", "web", "webdesign", "work" ], "author": { "name": "Willem L. Middelkoop", "url": "https://willem.com" }, "provenance": { "kind": "model", "method": "Gemini translation (2025), reviewed and corrected by Claude Sonnet (20 Oct 2026) against a glossary and hunspell", "date": "2026-10-20", "reviewed_by_native_reader": false, "language": "es", "source_language": "en" }, "translations": [ { "language": "en", "title": "Optimising images for the web and performance", "url": "https://agents.willem.com/en/posts/2018-09-26_optimising-images-for-the-web-and-performance/", "source_url": "https://willem.com/en/2018-09-26_optimising-images-for-the-web-and-performance/" }, { "language": "nl", "title": "Afbeeldingen optimaliseren voor web en performance", "url": "https://agents.willem.com/nl/posts/2018-09-26_afbeeldingen-optimaliseren-voor-web-en-performance/", "source_url": "https://willem.com/nl/2018-09-26_afbeeldingen-optimaliseren-voor-web-en-performance/" }, { "language": "de", "title": "Bilder für Web und Performance optimieren", "url": "https://agents.willem.com/de/posts/2018-09-26_bilder-fur-web-und-performance-optimieren/", "source_url": "https://willem.com/de/2018-09-26_bilder-fur-web-und-performance-optimieren/" }, { "language": "fr", "title": "Optimiser les images pour le web et les performances", "url": "https://agents.willem.com/fr/posts/2018-09-26_optimiser-les-images-pour-le-web-et-les-performances/", "source_url": "https://willem.com/fr/2018-09-26_optimiser-les-images-pour-le-web-et-les-performances/" }, { "language": "it", "title": "Ottimizzare le immagini per il web e le prestazioni", "url": "https://agents.willem.com/it/posts/2018-09-26_ottimizzare-le-immagini-per-il-web-e-le-prestazioni/", "source_url": "https://willem.com/it/2018-09-26_ottimizzare-le-immagini-per-il-web-e-le-prestazioni/" }, { "language": "pt", "title": "Otimizar imagens para a web e para o desempenho", "url": "https://agents.willem.com/pt/posts/2018-09-26_otimizar-imagens-para-a-web-e-para-o-desempenho/", "source_url": "https://willem.com/pt/2018-09-26_otimizar-imagens-para-a-web-e-para-o-desempenho/" }, { "language": "pap", "title": "Optimalisá imagen pa web i rendimentu", "url": "https://agents.willem.com/pap/posts/2018-09-26_optimalisa-imagen-pa-web-i-rendimentu/", "source_url": "https://willem.com/pap/2018-09-26_optimalisa-imagen-pa-web-i-rendimentu/" }, { "language": "fy", "title": "Ôfbyldings optimalisearje foar it web en prestaasje", "url": "https://agents.willem.com/fy/posts/2018-09-26_ofbyldings-optimalisearje-foar-it-web-en-prestaasje/", "source_url": "https://willem.com/fy/2018-09-26_ofbyldings-optimalisearje-foar-it-web-en-prestaasje/" } ], "image": "https://willem.com/global/images/c806bdb54964.webp", "image_width": 2560, "images": [ { "url": "https://willem.com/global/images/ec02ee9672ec.webp", "description": "Peso medio de una página web, por tipo de recurso (HttpArchive, septiembre de 2018)", "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_37022_images-1.jpg" }, { "url": "https://willem.com/global/images/e94033e684f1.webp", "description": "Las imágenes de mapa de bits son como tableros de ajedrez, donde los píxeles son casillas", "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_37022_images-2.png" }, { "url": "https://willem.com/global/images/3640b9482061.webp", "description": "Diapositiva típica de pace-cme.org", "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_37022_images-3.jpg" }, { "url": "https://willem.com/global/images/4c08bf11faa4.webp", "description": "Imagen de prueba, con colores lisos, contenido fotográfico y texto", "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_37022_images-4.jpg" }, { "url": "https://willem.com/global/images/19c8b9866186.webp", "description": "Inspeccionando la calidad: a la izquierda el original, a la derecha pngquant", "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_37022_images-5.jpg" } ], "text": "Optimiza tu sitio web\nSi optimizas tu sitio web, cargará más rápido. Como mucha gente prefiere los sitios rápidos, buscadores como Google empezaron a medir la velocidad de las páginas para decidir en qué posición de los resultados de búsqueda sale el tuyo.\nTamaño medio de una página\nAunque muchos creadores de sitios web se fijan primero en el HTML y los scripts, la mayor parte del peso de un sitio web medio son imágenes (fuente: HttpArchive (https://httparchive.org/reports/page-weight), peso de las páginas, septiembre de 2018).\nUna buena optimización de imágenes puede, por tanto, tener efectos increíbles en la velocidad de tu sitio.\n¿Qué es optimizar imágenes?\nUna imagen digital es como un tablero de ajedrez: un rectángulo de 8x8 casillas blancas y negras. Si guardaras el tablero sin comprimir, anotarías el color de cada casilla una a una (\"la casilla uno es blanca, la dos es negra, la tres es blanca, la cinco es negra, etc.\"). Harían falta 64 líneas para describir el tablero entero. Es exacto, pero no muy eficiente.\nOptimizar una imagen es buscar maneras más eficientes de describir sus colores. Podrías describir todo el tablero en una sola línea de texto: \"alterna entre blanco y negro, empieza por blanco\", o aún mejor: \"repite blanco, negro\". En las imágenes digitales esto se llama compresión: el algoritmo intenta identificar secuencias de colores que se repiten.\nHay distintos algoritmos, cada uno con sus puntos fuertes y débiles. Algunos funcionan mejor con fotos (con millones de colores) y otros con imágenes de menos colores (como una diapositiva de PowerPoint). Elegir el algoritmo adecuado es tu primer empujón de rendimiento.\nFormatos de imagen habituales\n- JPG es un tipo de archivo muy común, con una compresión eficaz para imágenes con muchos colores distintos, como las fotos. Este formato existe desde 1992 y lo admite casi cualquier dispositivo.\n- GIF es otro formato antiguo, desarrollado en 1987. Es popular porque admite animación. Técnicamente es muy limitado: solo 256 colores distintos por imagen.\n- PNG se desarrolló en 1994 para sustituir al GIF, por la polémica en torno al algoritmo de compresión de este. Es popular porque casi cualquier dispositivo lo admite y soporta millones de colores, transparencia incluida. Permite la compresión sin pérdida, que garantiza textos y líneas nítidos, y por eso es ideal para gráficos y logotipos.\nHace poco Google (WebP) y Apple (HEIF) presentaron nuevos formatos con una compresión aún mejor que la de JPG, GIF y PNG. Pero todavía no se han generalizado.\nElegir el formato de imagen adecuado\nEl mejor formato depende del contenido real de tu imagen. No hay una regla universal que diga cuál es el mejor para cada caso. Lo mejor es probarlo tú mismo: mira qué pasa con el tamaño del archivo si guardas la imagen en distintos formatos. Muchos programas de escritorio te dejan elegir el formato al seleccionar \"Guardar como\".\nPuedes empezar con JPG para fotos y PNG para imágenes con pocos colores, como un logotipo, un gráfico o una diapositiva de PowerPoint. Formatos como JPG ofrecen distintos niveles de calidad de compresión, que afectan a la calidad de la imagen y al tamaño del archivo. Una calidad más baja reduce la calidad de la imagen a cambio de un archivo más pequeño; intenta encontrar un buen equilibrio entre calidad y tamaño.\nCompresión con pérdida y sin pérdida\nLos algoritmos de compresión que sacrifican calidad a cambio de tamaño se llaman algoritmos de compresión con pérdida. Los que conservan la calidad original de la imagen se llaman algoritmos de compresión sin pérdida.\nCómo optimizar imágenes\nCuando ya tienes tu imagen JPG o PNG, puedes optimizarla eligiendo los ajustes adecuados del algoritmo de compresión. No te preocupes, no hace falta hacerlo a mano: hay software de optimización automática que encuentra los mejores ajustes para cada imagen.\nOptimizar imágenes JPG\nSi usas Photoshop, puedes usar su función Guardar para web para obtener una imagen JPG bastante bien optimizada.\nTambién puedes usar una utilidad de línea de comandos como jpegoptim. Esta herramienta reduce los archivos JPG optimizando las tablas de Huffman internas, con lo que mejora el rendimiento del algoritmo de compresión. De media, puedes esperar una mejora del 10-15 % sin perder calidad de imagen.\nOtra forma de optimizar imágenes JPG es un optimizador en línea, como TinyJPG (https://tinyjpg.com) o ImageOptim (https://imageoptim.com/api).\nSi usas WordPress, puedes plantearte un plugin que optimice las imágenes por ti, como Imagify de xtremerain (https://www.xtremerain.com/imagify-advanced-optimization/).\nOptimizar imágenes PNG\nLos archivos PNG se pueden optimizar con Photoshop usando la función Guardar para web. Para optimizarlos aún mejor, puedes usar una app especializada, como ImageAlpha (https://pngmini.com) para Mac o PNGGauntlet (https://pnggauntlet.com) para Windows.\nTambién hay optimizadores en línea para archivos PNG, como TinyPNG (https://tinypng.com) y Compressor.io (https://compressor.io).\nO puedes usar programas de línea de comandos como optipng, pngcrush o pngquant. Merece la pena meterse un poco más a fondo con estas herramientas PNG.\nProbando optipng, pngcrush y pngquant\nEn mi trabajo como desarrollador web integro la optimización de imágenes en sistemas de gestión de contenidos, para que a mis clientes les resulte más fácil tener sus imágenes optimizadas automáticamente. Al crecer mucho el número de clientes, me topé con problemas de rendimiento.\nPara ganar rendimiento decidí probar optipng, pngcrush y pngquant. Esperaba encontrar una buena optimización de imágenes con menos potencia de proceso del servidor, lo que mejoraría el rendimiento para mis clientes.\nPACE-CME\nUno de esos clientes es PACE-CME, un sitio web (https://pace-cme.org) con recursos de formación cardiovascular para médicos. Contiene miles de diapositivas de PowerPoint guardadas como archivos PNG.\nPara medir el rendimiento usé una imagen de prueba especial, más grande y pesada que una diapositiva de PowerPoint normal. Es una imagen de alta resolución con contenido mixto: en parte fotos, en parte texto y colores lisos.\nMétodo\nHice las pruebas en un servidor Intel XEON de cuatro núcleos con 8 GB de RAM. Con cada herramienta de optimización de PNG usé tanto los ajustes más extremos (para ver hasta dónde podía reducir el archivo) como los predeterminados (para ver cuánto más rápidos son y cómo se comparan con los mejores ajustes de compresión).\nResultados\n- Imagen de prueba original: 2897 KB\n- optipng extremo (-o7): 2510 KB en 2 minutos y 36 segundos / predeterminado: 2536 KB en 4,9 segundos\n- pngcrush extremo (-brute): 2510 KB en 1 minuto y 42 segundos / predeterminado: 2531 KB en 9,2 segundos\n- pngquant extremo (-s 1): 744 KB en 5,2 segundos / predeterminado: 746 KB en 4,2 segundos\nEl rendimiento de pngquant es increíble: es mucho más rápido y además da un archivo mucho más pequeño. Pero no es magia: usa otro algoritmo, con pérdida. Es decir, las imágenes optimizadas con pngquant pierden un poco de calidad. Las comparé de cerca y no noté la diferencia.\nConclusión\nOptimizar las imágenes para la web y el rendimiento es muy importante. Como han mostrado mis pruebas, elegir el algoritmo adecuado puede marcar la diferencia.\nPara mí eso significó elegir pngquant, pero tu decisión puede ser otra según el tipo de imágenes que quieras optimizar.\nLo que debes llevarte de esta entrada del blog es que te importen las imágenes. Tu sitio web será mucho más rápido, ¿y a quién no le gusta un sitio web rápido?", "word_count": 1203, "markdown_url": "https://agents.willem.com/es/posts/2018-09-26_optimizacion-de-imagenes-para-la-web-y-el-rendimiento/post.md" }