{"id":24157,"date":"2024-01-07T12:45:44","date_gmt":"2024-01-07T12:45:44","guid":{"rendered":"https:\/\/yorkshiredesign.co.uk\/?page_id=24157"},"modified":"2025-04-17T12:01:12","modified_gmt":"2025-04-17T11:01:12","slug":"optimizacion-de-imagen","status":"publish","type":"page","link":"https:\/\/yorkshiredesign.co.uk\/es\/guia-de-velocidad-de-pagina\/optimizacion-de-imagen\/","title":{"rendered":"Optimizaci\u00f3n de imagen"},"content":{"rendered":"
<\/span><\/div><\/div><\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

Imagen Mejoramiento<\/span><\/h1>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div><\/div><\/div>
\n
\n
\n \n\t
\n\t\t
\n\t\t\t

Estrujar<\/span> esos kb<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t

\n\t\t\n\t\t
\n\t\t\t
\"Servicio<\/div>\n\t\t<\/figure>\n\t<\/div>\n\n\t
\n\t\t
\n\t\t\t

La optimizaci\u00f3n de im\u00e1genes adelgaza su sitio web<\/p>\n

Menos peso, m\u00e1s velocidad<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n Ir a imaginar<\/span>\n \t

\n\t \t\n\t \t\t\n\t \t\t\tIr a imaginar\t\t\t\t<\/span>\t\n\t \t<\/span>\n\t \t\t \t
<\/div>\n\t <\/div>\n\t<\/a> <\/div>\n <\/div>\n<\/div>
\n
\n
\n \n\t
\n\t\t
\n\t\t\t

Qu\u00e9 es Imagen<\/span> \u00bfMejoramiento?<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t

\n\t\t
\n\t\t\t

La optimizaci\u00f3n de im\u00e1genes es un proceso muy simple. Tambi\u00e9n es lo que acelerar\u00e1 m\u00e1s tu sitio, especialmente si tienes un sitio web con muchas im\u00e1genes. En esencia, optimizar una imagen es simplemente reducir el tama\u00f1o del archivo. La tecnolog\u00eda est\u00e1 en constante evoluci\u00f3n y hoy en d\u00eda los mejores formatos de imagen para usar son WEBP y AVIF. Ambos formatos son totalmente compatibles con los navegadores modernos y hay informaci\u00f3n detallada sobre los aspectos t\u00e9cnicos de estas t\u00e9cnicas de compresi\u00f3n de im\u00e1genes disponible en Este desarrollador web<\/strong><\/a> p\u00e1gina.<\/p>\n

Debido a la calidad de las c\u00e1maras modernas y las im\u00e1genes de archivo disponibles, los tama\u00f1os de los archivos de imagen pueden ser muy grandes, algunos incluso de 5 a 10 MB o m\u00e1s. Las im\u00e1genes de este tama\u00f1o simplemente no se pueden utilizar en sitios web, ya que tardan demasiado en descargarse y afectar\u00e1n a su puntuaciones de velocidad de p\u00e1gina<\/a> gravemente. Lo que hay que hacer es recortarlos en tama\u00f1o. Aqu\u00ed es donde entra en juego el software de optimizaci\u00f3n de im\u00e1genes.<\/p>\n

La optimizaci\u00f3n de la imagen se puede realizar de dos formas: manualmente o con software. El m\u00e9todo manual es excelente si est\u00e1s haciendo un nuevo sitio web<\/a>, pero para los sitios web existentes que a menudo tienen cientos o m\u00e1s im\u00e1genes, es mucho m\u00e1s rentable utilizar un software de optimizaci\u00f3n de im\u00e1genes. Hay bastantes complementos de optimizaci\u00f3n de im\u00e1genes disponibles, pero el que m\u00e1s recomiendo es imaginar<\/strong><\/a>. Es gratuito para hasta 200 im\u00e1genes al mes, es compatible con WEBP y, en mi experiencia, funciona con todo tipo de sitios web.<\/p>\n

Como antes, proporcionar\u00e9 un buen v\u00eddeo que resume sus caracter\u00edsticas principales, mientras escribo consejos y cosas a tener en cuenta a lo largo del camino.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n <\/div>\n <\/div>\n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>

\n
\n
\n \n\t
\n\t\t
\n\t\t\t

Estrujar<\/span> esos kb<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t

\n\t\t\n\t\t
\n\t\t\t
\"Servicio<\/div>\n\t\t<\/figure>\n\t<\/div>\n\n\t
\n\t\t
\n\t\t\t

La optimizaci\u00f3n de im\u00e1genes adelgaza su sitio web<\/p>\n

Menos peso, m\u00e1s velocidad<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n Ir a imaginar<\/span>\n \t

\n\t \t\n\t \t\t\n\t \t\t\tIr a imaginar\t\t\t\t<\/span>\t\n\t \t<\/span>\n\t \t\t \t
<\/div>\n\t <\/div>\n\t<\/a>\n\t
\n\t\t
\n\t\t\t

Qu\u00e9 es Imagen<\/span> \u00bfMejoramiento?<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t

\n\t\t
\n\t\t\t

La optimizaci\u00f3n de im\u00e1genes es un proceso muy simple. Tambi\u00e9n es lo que acelerar\u00e1 m\u00e1s tu sitio, especialmente si tienes un sitio web con muchas im\u00e1genes. En esencia, optimizar una imagen es simplemente reducir el tama\u00f1o del archivo. La tecnolog\u00eda est\u00e1 en constante evoluci\u00f3n y hoy en d\u00eda los mejores formatos de imagen para usar son WEBP y AVIF. Ambos formatos son totalmente compatibles con los navegadores modernos y hay informaci\u00f3n detallada sobre los aspectos t\u00e9cnicos de estas t\u00e9cnicas de compresi\u00f3n de im\u00e1genes disponible en Este desarrollador web<\/strong><\/a> p\u00e1gina.<\/p>\n

Debido a la calidad de las c\u00e1maras modernas y las im\u00e1genes de archivo disponibles, los tama\u00f1os de los archivos de imagen pueden ser muy grandes, algunos incluso de 5 a 10 MB o m\u00e1s. Las im\u00e1genes de este tama\u00f1o simplemente no se pueden utilizar en sitios web, ya que tardan demasiado en descargarse y afectar\u00e1n gravemente las puntuaciones de velocidad de la p\u00e1gina. Lo que hay que hacer es recortarlos en tama\u00f1o. Aqu\u00ed es donde entra en juego el software de optimizaci\u00f3n de im\u00e1genes.<\/p>\n

La optimizaci\u00f3n de la imagen se puede realizar de dos formas: manualmente o con software. El m\u00e9todo manual es excelente si est\u00e1 creando un sitio web nuevo, pero para sitios web existentes que a menudo tienen cientos o m\u00e1s im\u00e1genes, es mucho m\u00e1s eficiente en t\u00e9rminos de tiempo utilizar un software de optimizaci\u00f3n de im\u00e1genes. Hay bastantes complementos de optimizaci\u00f3n de im\u00e1genes disponibles, pero el que m\u00e1s recomiendo es imaginar<\/strong><\/a>. Es gratuito para hasta 200 im\u00e1genes al mes, es compatible con WEBP y, en mi experiencia, funciona con todo tipo de sitios web.<\/p>\n

Como antes, proporcionar\u00e9 un buen v\u00eddeo que resume sus caracter\u00edsticas principales, mientras escribo consejos y cosas a tener en cuenta a lo largo del camino.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n <\/div>\n <\/div>\n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>

\n
\n
\n \n\t
\n\t\t
\n\t\t\t

Qu\u00e9 es Imagen<\/span> \u00bfMejoramiento?<\/h1>\n\n\t\t<\/div>\n\t<\/div>\n\n\t
\n\t\t
\n\t\t\t

La optimizaci\u00f3n de im\u00e1genes es un proceso simple. Tambi\u00e9n es lo que acelerar\u00e1 m\u00e1s tu sitio, especialmente si tienes un sitio web con muchas im\u00e1genes. En esencia, optimizar una imagen es simplemente reducir el tama\u00f1o del archivo.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t

\n\t\t\n\t\t
\n\t\t\t
\"Servicio<\/div>\n\t\t<\/figure>\n\t<\/div>\n\n\t
\n\t\t
\n\t\t\t

La tecnolog\u00eda est\u00e1 en constante evoluci\u00f3n y hoy en d\u00eda los mejores formatos de imagen para usar son WEBP y AVIF.<\/p>\n

Ambos formatos son totalmente compatibles con los navegadores modernos y hay informaci\u00f3n detallada sobre los aspectos t\u00e9cnicos de estas t\u00e9cnicas de compresi\u00f3n de im\u00e1genes disponible en Este desarrollador web<\/strong><\/a> p\u00e1gina.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t

\n\t\t
\n\t\t\t

Debido a la calidad de las c\u00e1maras modernas y las im\u00e1genes de archivo disponibles, los tama\u00f1os de los archivos de imagen pueden ser muy grandes, algunos incluso de 5 a 10 MB o m\u00e1s. Las im\u00e1genes de este tama\u00f1o simplemente no se pueden utilizar en sitios web, ya que tardan demasiado en descargarse y afectar\u00e1n gravemente las puntuaciones de velocidad de la p\u00e1gina. Lo que hay que hacer es recortarlos en tama\u00f1o. Aqu\u00ed es donde entra en juego el software de optimizaci\u00f3n de im\u00e1genes.<\/p>\n

La optimizaci\u00f3n de la imagen se puede realizar de dos formas: manualmente o con software. El m\u00e9todo manual es excelente si est\u00e1 creando un sitio web nuevo, pero para sitios web existentes que a menudo tienen cientos o m\u00e1s im\u00e1genes, es mucho m\u00e1s eficiente en t\u00e9rminos de tiempo utilizar un software de optimizaci\u00f3n de im\u00e1genes.<\/p>\n

Hay bastantes complementos de optimizaci\u00f3n de im\u00e1genes disponibles, pero el que m\u00e1s recomiendo es imaginar<\/strong><\/a>. Es gratuito para hasta 200 im\u00e1genes al mes, es compatible con WEBP y, en mi experiencia, funciona con todo tipo de sitios web.<\/p>\n

Como antes, proporcionar\u00e9 un buen v\u00eddeo que resume sus caracter\u00edsticas principales, mientras escribo consejos y cosas a tener en cuenta a lo largo del camino.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n <\/div>\n <\/div>\n<\/div><\/div><\/div><\/div><\/div><\/div>

<\/span><\/div><\/div><\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

C\u00f3mo utilizar imaginar<\/span><\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>

<\/div>
<\/span><\/div><\/div><\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

C\u00f3mo Optimizar<\/span> Tus im\u00e1genes<\/h2>\n\n\t\t<\/div>\n\t<\/div>\n
\n
\n

\n \n <\/span>\n <\/span>\n <\/span>\n Lo que pasa con la marca<\/span>\n <\/h3>\n<\/div>\n
\n
\n \n\t
\n\t\t
\n\t\t\t

Imagify ofrece tres niveles de optimizaci\u00f3n: est\u00e1ndar, agresivo y ultra. Estos niveles tienen que ver esencialmente con la calidad de la imagen. Una de las desventajas de la optimizaci\u00f3n de im\u00e1genes es que se pierde calidad de imagen. Es s\u00f3lo peque\u00f1o y normalmente imperceptible, pero puede volverse perceptible si para usted es importante una calidad de imagen ultra alta. Este suele ser el caso en sitios web como sitios de fotograf\u00eda, arte o joyer\u00eda, etc.<\/p>\n

Lo hace Degradar<\/span> \u00bfMuchas im\u00e1genes?<\/p>\n

Mucho depende del tipo de im\u00e1genes que utilices. Por ejemplo, la calidad est\u00e1ndar no los degradar\u00e1 en absoluto, mientras que la ultra los pixelar\u00e1 un poco, pero no demasiado. Este sitio web est\u00e1 configurado con la calidad "agresiva" como ejemplo. La ventaja es que las im\u00e1genes son mucho m\u00e1s peque\u00f1as que la configuraci\u00f3n est\u00e1ndar y, por lo tanto, se cargan m\u00e1s r\u00e1pido, sin apenas p\u00e9rdida de calidad de imagen.<\/p>\n

Algunas personas van directamente a la configuraci\u00f3n ultra y realmente notan la diferencia. Cuando empiezas a optimizar, Aseg\u00farate de marcar la casilla para conservar los originales.<\/strong>. De esa manera, si no te gusta la configuraci\u00f3n ultra, puedes volver a una calidad superior.<\/p>\n

Generalmente, la configuraci\u00f3n agresiva degradar\u00e1 sus im\u00e1genes en aproximadamente 15% en calidad a un nivel de 85%. Esto es imperceptible para el ojo humano y en el entorno m\u00e1s com\u00fan. Si la calidad de la imagen no es vital, o si est\u00e1 utilizando gr\u00e1ficos de estilo dibujos animados en lugar de fotograf\u00edas, opte por la ultra. Sigue siendo perfectamente aceptable. Normalmente, con una configuraci\u00f3n ultra, reducir\u00e1 alrededor de 85% el tama\u00f1o de su imagen. Esto significa que una imagen de 1 MB se reducir\u00e1 a un tama\u00f1o de entre 100 y 150 lb, lo que marca una enorme diferencia en el tiempo de carga de la p\u00e1gina y velocidad de la p\u00e1gina<\/a> puntuaciones.<\/p>\n

Puedo Haz todo<\/span> \u00bfMis im\u00e1genes encendidas una vez?<\/p>\n

S\u00ed, puedes: mira el v\u00eddeo para obtener una gu\u00eda sobre c\u00f3mo funciona Imagify. A El mejor consejo es incluir tambi\u00e9n tu tema.<\/a> carpeta en las optimizaciones. Su tema tendr\u00e1 muchas im\u00e1genes, algunas de las cuales se utilizar\u00e1n en su sitio web. Al incluir las im\u00e1genes de su tema, maximizar\u00e1 las im\u00e1genes que puede optimizar en su sitio web.<\/p>\n

Para calcular cu\u00e1ntas im\u00e1genes necesita optimizar, busque en su biblioteca multimedia. Te dir\u00e1 cu\u00e1ntas im\u00e1genes tienes. Luego multiplica esto por 4 (en promedio). Esto se debe a que WordPress crea m\u00faltiples versiones de sus im\u00e1genes para un dise\u00f1o responsivo (miniatura, 300 x 300 px, etc.). Necesitas optimizar cada versi\u00f3n de cada imagen<\/a> para obtener todos los beneficios de la optimizaci\u00f3n de im\u00e1genes en todos los dispositivos.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n <\/div>\n<\/div>

\n

\n \n <\/span>\n <\/span>\n <\/span>\n Optimizaci\u00f3n manual<\/span>\n <\/h3>\n<\/div>\n
\n
\n \n\t
\n\t\t
\n\t\t\t

La optimizaci\u00f3n manual de im\u00e1genes es realmente para los puristas. Una ventaja de esto es que cargas una imagen completamente optimizada, con el tama\u00f1o correcto y, por lo tanto, no tienes que ejecutar ning\u00fan software de optimizaci\u00f3n de im\u00e1genes. Tambi\u00e9n ahorra espacio en el servidor ya que no tiene im\u00e1genes de tama\u00f1o completo all\u00ed. Sin embargo, requiere bastante tiempo, por lo que para la mayor\u00eda de las personas recomendar\u00eda simplemente usar Imageify.<\/p>\n

Tengo El tiempo<\/span> \u2013 \u00bfQu\u00e9 est\u00e1 involucrado?<\/p>\n

En primer lugar, necesita saber las dimensiones de la imagen que est\u00e1 utilizando. Hay una buena gu\u00eda sobre tama\u00f1os de imagen y mejores pr\u00e1cticas<\/strong><\/a> en esta p\u00e1gina. Una vez que conozca el tama\u00f1o de sus im\u00e1genes, puede recortar cualquier imagen grande al tama\u00f1o exacto utilizando cualquier herramienta de software de im\u00e1genes. pintura.net<\/strong><\/a> es gratis y normalmente lo suficientemente bueno para esto.<\/p>\n

Una vez que haya creado sus im\u00e1genes con el tama\u00f1o correcto, puede optimizarlas utilizando una herramienta en l\u00ednea. Uno de los mejores que ha existido durante a\u00f1os es TinyPNG.com<\/strong><\/a>. Simplemente cargue sus im\u00e1genes y luego descargue la versi\u00f3n mucho m\u00e1s peque\u00f1a que se crear\u00e1. Dos consejos a la hora de subir estas im\u00e1genes a WordPress:<\/p>\n

En primer lugar, suena tonto, pero aseg\u00farese de cargar la versi\u00f3n reci\u00e9n optimizada en su sitio web desde la carpeta "Descargas". Es muy f\u00e1cil cargar el incorrecto desde su escritorio o desde cualquier lugar donde almacene sus im\u00e1genes. En segundo lugar, utilice un nombre ligeramente diferente para el t\u00edtulo de la nueva imagen. Esto se debe al almacenamiento en cach\u00e9. Es posible que su instalaci\u00f3n de WordPress no reconozca el nuevo tama\u00f1o de imagen durante bastante tiempo si carga la imagen con el mismo nombre de archivo.<\/p>\n

Una vez que haya hecho esto, puede ir un paso m\u00e1s all\u00e1 y convertir las im\u00e1genes reci\u00e9n optimizadas al formato WEBP. Haga esto antes de cargarlos. Ve a la NubeConvertir<\/strong><\/a> sitio web. Sigue exactamente el mismo proceso que TinyPNG, excepto que elige convertirlos a WEBP. Luego descargue los archivos y c\u00e1rguelos en su servidor.<\/p>\n

Usar software como Imagify es mucho m\u00e1s f\u00e1cil, pero al final tendr\u00e1s im\u00e1genes sin procesar optimizadas cargadas, por lo que no necesitar\u00e1s usar herramientas de conversi\u00f3n de im\u00e1genes ni tener conversiones WEBP ejecut\u00e1ndose todo el tiempo.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n <\/div>\n<\/div>

\n

\n \n <\/span>\n <\/span>\n <\/span>\n \u00bfDeber\u00eda utilizar WEBP?<\/span>\n <\/h3>\n<\/div>\n
\n
\n \n\t
\n\t\t
\n\t\t\t

WEBP es un formato de imagen m\u00e1s nuevo desarrollado por Google. Sus im\u00e1genes son mucho m\u00e1s peque\u00f1as que los formatos tradicionales JPG y PNG, por lo que s\u00ed debes usarlas, siempre que tu servidor admita la conversi\u00f3n de im\u00e1genes tradicionales a WEBP.<\/p>\n

En realidad, WEBP surgi\u00f3 en 2010, pero a pesar de ello todav\u00eda se considera un formato "emergente". Puede leer que necesita las im\u00e1genes JPG\/PNG originales como respaldo, as\u00ed como los formatos WEBP, pero la verdad es que Chrome, Firefox, Safari y todos los dem\u00e1s navegadores principales s\u00ed lo admiten, por lo que ahora est\u00e1 bien tener solo versiones WEBP.<\/p>\n

\u00bfMi servidor Apoyo<\/span> \u00bfA ellos?<\/p>\n

Imagify tiene una configuraci\u00f3n autom\u00e1tica para habilitarlo en su servidor. La mayor\u00eda de los optimizadores de im\u00e1genes que convierten a WEBP hacen esto. Verificar\u00e1 y le dir\u00e1 si su servidor no servir\u00e1 im\u00e1genes WEBP. B\u00e1sicamente, lo que debe suceder es que WordPress necesite reescribir sus archivos de imagen en una de dos formas para funcionar. Algunos servidores lo permiten, otros no:<\/p>\n

La mejor manera es mediante etiquetas de im\u00e1genes. Este es un comando HTML5 que reemplazar\u00e1 el parte a un etiqueta. Es bastante simple, pero no todos los servidores lo admiten. La segunda forma es reescribir los archivos mediante el archivo .htaccess. Esta no es la forma preferida de hacerlo, ya que aumenta las solicitudes del servidor al cargar la p\u00e1gina. Sin embargo, sigue siendo beneficioso utilizar WEBP si tiene que hacerlo de esta manera.<\/picture>\n

Kinsta es NGINX y ya est\u00e1 configurado para WEBP en caso de que tenga una configuraci\u00f3n de servidor no compatible.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n <\/div>\n<\/div>

\n

\n \n <\/span>\n <\/span>\n <\/span>\n \u00bfCu\u00e1nto tiempo se tarda?<\/span>\n <\/h3>\n<\/div>\n
\n
\n \n\t
\n\t\t
\n\t\t\t

Imagify es un proceso automatizado que es muy r\u00e1pido. El tiempo necesario realmente depende de los tama\u00f1os de imagen que est\u00e9 utilizando. Una imagen normal de menos de 1 MB tardar\u00e1 unos segundos en optimizarse.<\/p>\n

Recuerde multiplicar la cantidad de im\u00e1genes que se muestran en su biblioteca multimedia por 4 para permitir optimizar todos los tama\u00f1os responsivos. Digamos que tiene 100 im\u00e1genes, se optimizar\u00e1n 400. Multiplica eso por un promedio de, digamos, 5 segundos cada uno y te haces una idea. Tardar\u00e1 poco m\u00e1s de media hora en completarse.<\/p>\n

Las im\u00e1genes m\u00e1s grandes pueden tardar m\u00e1s y las tiendas pueden tardar mucho en completarse. Por ejemplo, si tiene 10.000 im\u00e1genes de biblioteca multimedia, necesita optimizar 40.000 im\u00e1genes responsivas. Multiplique eso por 5 segundos cada uno y obtendr\u00e1 2\/3 d\u00edas para optimizar sus im\u00e1genes.<\/p>\n

Sin embargo, el sitio web promedio no tiene esta cantidad de im\u00e1genes, por lo que el proceso deber\u00eda completarse en aproximadamente una hora.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n <\/div>\n<\/div><\/div><\/div><\/div><\/div>

\n\t
\n\t\t
\n\t\t\t

Imag\u00ednate \u2013 Mira el v\u00eddeo<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t

\n\t\t
\n\t\t\t\n\t\t\t