{"id":7623,"date":"2019-11-07T17:13:18","date_gmt":"2019-11-07T22:13:18","guid":{"rendered":"https:\/\/webarpynet.arpynet.com\/?p=7623"},"modified":"2019-11-07T17:54:33","modified_gmt":"2019-11-07T22:54:33","slug":"como-optimizar-imagenes-para-la-web-y-conocer-su-mejor-rendimiento","status":"publish","type":"post","link":"https:\/\/webarpynet.arpynet.com\/?p=7623","title":{"rendered":"C\u00f3mo Optimizar Im\u00e1genes para la Web y conocer su Mejor Rendimiento"},"content":{"rendered":"\n<p>Conf\u00ede en nosotros, usted no desea que Google odie a su sitio web. Afortunadamente, puede reducir el tama\u00f1o del archivo de imagen para ayudar a mejorar el rendimiento de su sitio web. Un problema con el formato es que las modificaciones a menudo reducen su calidad (que a su vez puede hacer que el visitante le moleste&nbsp; su sitio web). Eso no es malo, siempre que no las haga feas. Hay algunos trucos y t\u00e9cnicas que permiten reducir el tama\u00f1o del archivo de imagen y a\u00fan mantenerla lo suficientemente atractiva para mostrar con orgullo en su sitio web.&nbsp;Entonces, cuando se trata de&nbsp;optimizar su sitio de WordPress, despu\u00e9s del contenido de video, \u00a1las im\u00e1genes son el primer lugar donde debe comenzar! (ya saben audiovisualmente impacta mucho).<\/p>\n\n\n\n<figure class=\"wp-block-image\" style=\"margin: 0\"><img loading=\"lazy\" decoding=\"async\" width=\"850\" height=\"450\" src=\"https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-1-min.png\" alt=\"\" class=\"wp-image-7625\" srcset=\"https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-1-min.png 850w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-1-min-768x407.png 768w\" sizes=\"auto, (max-width: 850px) 100vw, 850px\" \/><\/figure>\n\n\n\n\n\n\n\n<h2 class=\"wp-block-heading\">\u00bfQu\u00e9 Significa Optimizar Im\u00e1genes?<\/h2>\n\n\n\n<p>Las im\u00e1genes grandes ralentizan su p\u00e1gina web lo cual crea una experiencia del usuario inferior. La optimizaci\u00f3n de im\u00e1genes es el proceso de&nbsp;<strong>disminuir el tama\u00f1o<\/strong>&nbsp;de su archivo mediante el uso de un plugin o script el cual en cambio acelera el tiempo de carga de su p\u00e1gina. Compresi\u00f3n con o sin p\u00e9rdida son los dos m\u00e9todos com\u00fanmente utilizados.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Las Ventajas de Formatear sus Im\u00e1genes<\/strong><\/h2>\n\n\n\n<p>Primero, \u00bfpor qu\u00e9\nnecesita dar formato a sus im\u00e1genes? \u00bfCu\u00e1les son los beneficios? Hay numerosas\nventajas de optimizar las im\u00e1genes para el rendimiento. Seg\u00fan&nbsp;HTTP Archive, en Noviembre de 2018,&nbsp;<strong>las im\u00e1genes constituyen en promedio el 21% del peso total de la\np\u00e1gina web<\/strong>. <\/p>\n\n\n\n<p>As\u00ed que cuando se\ntrata de la optimizaci\u00f3n de su sitio WordPress, \u00a1deber\u00eda comenzar con las\nim\u00e1genes! Es m\u00e1s importante que los scripts y fuentes. E ir\u00f3nicamente, la\noptimizaci\u00f3n de la imagen es una de las cosas m\u00e1s f\u00e1ciles de implementar, sin\nembargo, muchos de los propietarios de los sitios web pasan por alto este\nhecho.<\/p>\n\n\n\n<p>Es m\u00e1s importante que los scripts y fuentes. E ir\u00f3nicamente, la\noptimizaci\u00f3n de la imagen es una de las cosas m\u00e1s f\u00e1ciles de implementar, sin\nembargo, muchos de los propietarios de los sitios web pasan por alto este\nhecho.<\/p>\n\n\n\n<figure class=\"wp-block-image\" style=\"margin: 0\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"944\" src=\"https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-2-min-1024x944.png\" alt=\"\" class=\"wp-image-7629\" srcset=\"https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-2-min-1024x944.png 1024w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-2-min-488x450.png 488w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-2-min-768x708.png 768w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-2-min.png 1503w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Aqu\u00ed est\u00e1 una lista de los principales beneficios.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Se mejorar\u00e1 la velocidad de carga de\nlas p\u00e1ginas (v\u00e9ase nuestro estudio de caso abajo: cu\u00e1nto afecta su velocidad).\n&nbsp;Si su p\u00e1gina tarda demasiado en cargarse sus visitantes podr\u00edan cansarse\nde esperar y pasar a otra p\u00e1gina. Para obtener m\u00e1s informaci\u00f3n sobre c\u00f3mo\noptimizar el tiempo de carga de las p\u00e1ginas vea nuestra p\u00e1gina web <a href=\"https:\/\/webarpynet.arpynet.com\">www.arpynet.com<\/a> <\/li><li>Mejore su&nbsp;<a href=\"https:\/\/kinsta.com\/es\/blog\/que-quiere-decir-seo\/\">SEO<\/a>. Su sitio\nclasifica m\u00e1s alto en los resultados del motor de b\u00fasqueda. Los archivos\ngrandes ralentizan el sitio y los motores de b\u00fasqueda odian los sitios lentos.\nEs probable tambi\u00e9n que Google rastree e indexe sus im\u00e1genes m\u00e1s r\u00e1pido para la\nb\u00fasqueda de im\u00e1genes de Google. \u00bfTiene curiosidad sobre qu\u00e9 porcentaje de su\ntr\u00e1fico viene de Google image serarch? Puede utilizar un segmento de Google\nAnalytics para verificar su seguimiento. <\/li><li>Crear copias de seguridad ser\u00e1 m\u00e1s\nr\u00e1pido.<\/li><li>Los tama\u00f1os de los archivos de imagen\nm\u00e1s peque\u00f1os utilizan menos ancho de banda. Las redes y navegadores apreciar\u00e1n\nesto.<\/li><li>Requiere menos espacio de\nalmacenamiento en el servidor (esto depende de la cantidad de miniaturas uno\noptimiza)<\/li><\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Las im\u00e1genes constituyen un promedio del 21% del peso total de una p\u00e1gina web. ? \u00a1Optim\u00edcelas!<\/p><\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">\u00bf<strong>C\u00f3mo Optimizar Im\u00e1genes para la Web y Mejor Rendimiento<\/strong><\/h2>\n\n\n\n<p>El objetivo principal de formatear\nsus im\u00e1genes es encontrar el&nbsp;<strong>equilibrio\nentre el tama\u00f1o de archivo menor y una calidad aceptable<\/strong>.\nHay m\u00e1s de una manera de realizar casi todas estas optimizaciones. Una de las\nformas m\u00e1s populares es simplemente comprimirlas antes de cargarlas a\nWordPress.&nbsp;Normalmente, esto se puede hacer mediante una herramienta como\nAdobe Photoshop o Affinity Photo. Algunas de estas tareas pueden realizarse\ntambi\u00e9n mediante plugins, de los que hablaremos m\u00e1s abajo.<\/p>\n\n\n\n<p>Los dos principales aspectos a\nconsiderar son el&nbsp;<strong>formato de archivo<\/strong>&nbsp;y\nel&nbsp;<strong>tipo de compresi\u00f3n<\/strong>&nbsp;que\nutilizan. Elegir la combinaci\u00f3n adecuada de formato de archivo y el tipo de\ncompresi\u00f3n puede reducir el tama\u00f1o de la imagen por tanto como 5 veces. Tendr\u00e1\nque experimentar con cada imagen o formato de archivo para ver cu\u00e1l funciona\nmejor.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Elija el Formato de Archivo Correcto<\/strong><\/h2>\n\n\n\n<p>Antes de empezar a modificar sus im\u00e1genes, aseg\u00farese de que haya elegido el mejor tipo de archivo. Existen varios tipos de archivos, puede utilizar:<br>\n\u2022    PNG \u2013 produce im\u00e1genes de mayor calidad, pero tambi\u00e9n tiene un tama\u00f1o de archivo mayor. Fue creado como un formato sin p\u00e9rdida sin embargo puede ser con p\u00e9rdida.<br>\n\u2022    JPEG \u2013 usa optimizaci\u00f3n con p\u00e9rdida y sin p\u00e9rdida. Puede ajustar el nivel de calidad de un buen equilibrio entre calidad y tama\u00f1o de archivo.<br>\n\u2022    GIF \u2013 s\u00f3lo utiliza 256 colores. Es la mejor opci\u00f3n para im\u00e1genes animadas. S\u00f3lo se utiliza compresi\u00f3n sin p\u00e9rdidas.<br>\nExisten varios otros, tales como JPEG XR y WebP, pero no son soportadas universalmente por todos los navegadores. Idealmente, usted deber\u00eda utilizar JPEG (o JPG) para im\u00e1genes con mucho color y PNG para im\u00e1genes sencillas<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Calidad de Compresi\u00f3n vs Tama\u00f1o<\/strong><\/h2>\n\n\n\n<p>Aqu\u00ed est\u00e1 un ejemplo de lo que puede suceder al comprimir una imagen demasiado. Lo primero es mediante una tasa de compresi\u00f3n muy baja, lo que se traduce en la m\u00e1xima calidad (pero tama\u00f1o de archivo m\u00e1s grande). La segunda es usando una tasa muy alta de compresi\u00f3n, lo que se traduce en una muy baja calidad de imagen (pero menor tama\u00f1o de archivo). Nota: La imagen original intacta mide 2.06 MB.<\/p>\n\n\n\n<figure class=\"wp-block-image\" style=\"margin: 0\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"686\" src=\"https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-3-min-1024x686.jpg\" alt=\"\" class=\"wp-image-7630\" srcset=\"https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-3-min.jpg 1024w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-3-min-672x450.jpg 672w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-3-min-768x515.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Baja compresi\u00f3n (alta calidad) \u2013 590 KB JPG<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\" style=\"margin: 0\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"686\" src=\"https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-4-min-1024x686.jpg\" alt=\"\" class=\"wp-image-7631\" srcset=\"https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-4-min.jpg 1024w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-4-min-672x450.jpg 672w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-4-min-768x515.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Alta compresi\u00f3n JPG (baja calidad) \u2013 68 KB<\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Como se puede ver la primera imagen de arriba es de 590 KB. \u00a1Que es bastante grande para una foto! Generalmente es mejor si usted puede mantener un peso total de la p\u00e1gina Web debajo de 1 \u00f3 2 MB de tama\u00f1o. 590 KB ser\u00eda un cuarto de eso ya. Obviamente la segunda imagen se ve horrible, pero mide s\u00f3lo 68 KB. Lo que usted quiere hacer es encontrar el equilibrio entre su tasa de compresi\u00f3n (calidad) y el tama\u00f1o del archivo.<\/p>\n\n\n\n<p>As\u00ed que tomamos la imagen de nuevo a una tasa de\ncompresi\u00f3n media y como puede ver a continuaci\u00f3n, la calidad se ve bien ahora y\nel tama\u00f1o del archivo es de 151 KB, que es aceptable para una fotograf\u00eda de\nalta resoluci\u00f3n. Esto es casi 4 veces m\u00e1s peque\u00f1a que la foto original con baja\ncompresi\u00f3n. Normalmente im\u00e1genes m\u00e1s sencillas como png deben estar por debajo\nde 100 KB o menos para obtener mejor rendimiento.<\/p>\n\n\n\n<figure class=\"wp-block-image\" style=\"margin: 0\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"686\" src=\"https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-5-min-1024x686.jpg\" alt=\"\" class=\"wp-image-7632\" srcset=\"https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-5-min.jpg 1024w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-5-min-672x450.jpg 672w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-5-min-768x515.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Optimizaci\u00f3n Con o Sin P\u00e9rdida<\/strong><\/h2>\n\n\n\n<p>Tambi\u00e9n es importante entender que hay dos tipos de compresi\u00f3n que\npuede utilizar, con p\u00e9rdida y sin p\u00e9rdida.<\/p>\n\n\n\n<p><strong>Con p\u00e9rdida<\/strong>&nbsp;\u2013 este es un\nfiltro que elimina algunos de los datos. Esto degradar\u00e1 la imagen, as\u00ed que\ntendr\u00e1 que tener cuidado cu\u00e1nto reducir de la calidad de la imagen. El tama\u00f1o\ndel archivo puede ser reducido por una cantidad grande. <\/p>\n\n\n\n<p>Puede utilizar\nherramientas como Adobe Photoshop, Affinity Photo u otros editores de imagen\npara ajustar la configuraci\u00f3n de calidad de imagen. En el ejemplo que hemos\nutilizado anteriormente hemos usado compresi\u00f3n con p\u00e9rdida.<\/p>\n\n\n\n<p><strong>Sin p\u00e9rdida<\/strong>&nbsp;\u2013 este es un\nfiltro que comprime los datos. Esto no reduce la calidad pero requerir\u00e1 que las\nim\u00e1genes sean descomprimidas antes de ser renderizadas. Puede realizar una\ncompresi\u00f3n sin p\u00e9rdida de datos en el escritorio usando herramientas como Photoshop,&nbsp;\nFileOptimizer, o&nbsp;ImageOptim.<\/p>\n\n\n\n<p>Conviene experimentar con sus t\u00e9cnicas de compresi\u00f3n para ver\nqu\u00e9 funciona mejor para cada imagen o formato. Si las herramientas tienen la\nopci\u00f3n aseg\u00farese de guardar la imagen para web. Esta es una opci\u00f3n en muchos\neditores de im\u00e1genes y le ofrecer\u00e1 ajustes de calidad para que usted pueda\nrealizar compresi\u00f3n \u00f3ptima. Se perder\u00e1 algo de calidad, as\u00ed que experimente\npara encontrar el mejor equilibrio que pueda encontrar sin que las im\u00e1genes se\nvean feas.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Programas y Herramientas de Optimizaci\u00f3n de Imagen<\/strong><\/h2>\n\n\n\n<p>Hay un mont\u00f3n de herramientas y programas, tanto premiums como gratis, que puede utilizar para optimizar sus im\u00e1genes. Algunos le proporcionan las herramientas para realizar sus propias optimizaciones y otras hacen el trabajo por usted. Personalmente somos grandes fans de\u00a0Affinity Photo, ya que es barata y le da caracter\u00edsticas casi id\u00e9nticas a las de Adobe Photoshop.<\/p>\n\n\n\n<figure class=\"wp-block-image\" style=\"margin: 0\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-6-min-1024x640.jpg\" alt=\"\" class=\"wp-image-7634\" srcset=\"https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-6-min.jpg 1024w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-6-min-720x450.jpg 720w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-6-min-768x480.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Aqu\u00ed est\u00e1n algunas herramientas adicionales y programas\npara mirar: <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Adobe\nPhotoshop<\/li><li>Gimp<\/li><li>Paint.NET<\/li><li>GIFsicle<\/li><li>JPEGtran<\/li><li><a href=\"http:\/\/www.jpegmini.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">JPEG Mini<\/a><\/li><li>OptiPNG<\/li><li>pngquant<\/li><li>FileOptimizer<\/li><li>ImageOptim<\/li><li>Trimage<\/li><li>ImageResize.org<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Redimensionando Im\u00e1genes para Escalarlas<\/strong><\/h2>\n\n\n\n<p>En el pasado fue muy\nimportante subir im\u00e1genes para escalar y no permitir que CSS las redimensione.\nSin embargo esto ya no es tan fundamental ya que WordPress 4.4 ahora\nsoporta&nbsp;im\u00e1genes receptivas&nbsp;(no disminuidas por CSS). \n\nB\u00e1sicamente WordPress\nautom\u00e1ticamente crea varios tama\u00f1os de cada imagen subidos a la biblioteca de\nmedios. Incluyendo los&nbsp;tama\u00f1os disponibles de una imagen en un\natributo&nbsp;<code>srcset<\/code>&nbsp;navegadores pueden elegir para descargar el&nbsp;tama\u00f1o m\u00e1s\napropiado e ignorar el resto. Vea un ejemplo de c\u00f3mo se ve su c\u00f3digo.<br><br><\/p>\n\n\n\n<figure class=\"wp-block-image\" style=\"margin: 0\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"223\" src=\"https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/imagen-7-min-1024x223.png\" alt=\"\" class=\"wp-image-7635\" srcset=\"https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/imagen-7-min.png 1024w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/imagen-7-min-850x185.png 850w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/imagen-7-min-768x167.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Ejemplo de srcset im\u00e1genes receptivas en el c\u00f3digo<\/figcaption><\/figure>\n\n\n\n<p>As\u00ed con m\u00e1s y m\u00e1s visualizaci\u00f3n de HiDPI es bueno\nencontrar un promedio. Digamos que 2 o 3 veces una columna de su sitio web pero\na\u00fan menor que el tama\u00f1o&nbsp;original. El navegador mostrar\u00e1 el elemento\ncorrecto dependiendo de la resoluci\u00f3n del dispositivo.<\/p>\n\n\n\n<p>La biblioteca multimedia WordPress\ncrea miniaturas basadas en su configuraci\u00f3n. Sin embargo, la imagen original se\nconserva de forma intacta. Si desea cambiar el tama\u00f1o de sus im\u00e1genes y ahorrar\nespacio en disco pero sin guardar el original, puede utilizar un plugin\ngratuito como&nbsp;Imsanity.<\/p>\n\n\n\n<figure class=\"wp-block-image\" style=\"margin: 0\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"828\" src=\"https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-8-min-1024x828.png\" alt=\"\" class=\"wp-image-7638\" srcset=\"https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-8-min.png 1024w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-8-min-557x450.png 557w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-8-min-768x621.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Ajustes de WordPress media<\/figcaption><\/figure>\n\n\n\n<p>Imsanity le permite establecer un l\u00edmite, de modo que\ntodas las im\u00e1genes cargadas estar\u00e1n restringidas a un tama\u00f1o razonable que\ntodav\u00eda es m\u00e1s que suficiente para satisfacer las necesidades de una t\u00edpica\np\u00e1gina web. Imsanity se engancha en WordPress inmediatamente despu\u00e9s de cargar\nla imagen, pero antes de que el procesamiento de WordPress suceda. Por lo que\nWordPress se comporta exactamente de la misma forma en todos los aspectos,\nexcepto que ser\u00e1 como si el contribuyente hubiera escalado la imagen a un\ntama\u00f1o razonable antes de cargar.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Plugins Que Puede Usar para Optimizar Im\u00e1genes<\/strong><\/h2>\n\n\n\n<p>Afortunadamente, con WordPress, no tiene que hacer todo el\ntrabajo de formateo o compresi\u00f3n a mano. Puede utilizar plugins para hacer por\nlo menos algunos de los trabajos autom\u00e1ticamente por usted. Hay varios plugins\nque optimizar\u00e1n autom\u00e1ticamente los archivos de imagen a medida que las cargue.\nEllos incluso optimizan im\u00e1genes que ya hab\u00eda subido. Esta es una caracter\u00edstica\nmuy \u00fatil, especialmente si usted ya tiene un sitio lleno de im\u00e1genes. He aqu\u00ed\nun vistazo a algunos de los mejores plugins para formatear las im\u00e1genes para\ntener un mejor rendimiento.<\/p>\n\n\n\n<p>Aunque es importante que no dependamos \u00fanicamente de los propios\nplugins. Por ejemplo, no deber\u00eda cargar im\u00e1genes de 2 MB a su biblioteca\nmultimedia WordPress. Esto puede acabar en comer el espacio en disco de su\nalojamiento realmente r\u00e1pido. El mejor m\u00e9todo es poder ajustar r\u00e1pidamente el\ntama\u00f1o de la imagen mediante una herramienta de edici\u00f3n fotogr\u00e1fica de antemano\ny luego cargar y utilizar uno de los siguientes plugins para reducirlas a\u00fan\nm\u00e1s.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Imagify\nImage Optimizer<\/li><li>ShortPixel\nImage Optimizer<\/li><li>Optimole<\/li><li>EWWW\nImage Optimizer Cloud<\/li><li>Optimus\nImage Optimizer<\/li><li>WP\nSmush<\/li><li>TinyPNG<\/li><li>ImageRecycle<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Imagify Image Optimizer<\/strong><\/h2>\n\n\n\n<p>Imagify es creado por\nel mismo equipo que desarroll\u00f3 WP Rocket, con el que la mayor\u00eda de ustedes\nprobablemente est\u00e1n familiarizados. Es compatible con WooCommerce, NextGen\nGallery y WP Retina. Tambi\u00e9n tiene una caracter\u00edstica de optimizaci\u00f3n en bloque\ny usted puede elegir entre tres diferentes niveles de compresi\u00f3n, normal,\nagresiva y ultra. Tiene una funci\u00f3n de restaurar as\u00ed que, si usted no est\u00e1\nsatisfecho con la calidad puede restaurar con un clic y volver a comprimir en\nun nivel que se adapte mejor a sus necesidades. Hay una versi\u00f3n gratis y una\nversi\u00f3n premium.&nbsp;Est\u00e1 limitado a una cuota de 25 MB de im\u00e1genes por mes\ncon la cuenta gratuita.<\/p>\n\n\n\n<figure class=\"wp-block-image\" style=\"margin: 0\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"428\" src=\"https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-9-min-1024x428.png\" alt=\"\" class=\"wp-image-7639\" srcset=\"https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-9-min.png 1024w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-9-min-850x355.png 850w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-9-min-768x321.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>ShortPixel Image Optimizer<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image\" style=\"margin: 0\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"332\" src=\"https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-10-min-1024x332.png\" alt=\"\" class=\"wp-image-7640\" srcset=\"https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-10-min-1024x332.png 1024w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-10-min-850x276.png 850w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-10-min-768x249.png 768w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-10-min.png 1635w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>ShortPixel Image Optimizer\u00a0es un plugin gratuito que va a comprimir 100 im\u00e1genes por mes y comprimir\u00e1 varios tipos de archivos incluidos PNG, JPG, GIF, WebP, e incluso archivos PDF. Lo har\u00e1 tanto con p\u00e9rdida y sin p\u00e9rdida de compresi\u00f3n de imagen. Va a convertir CMYK a RGB. Lleva a sus im\u00e1genes y miniaturas a la nube para su procesamiento y despu\u00e9s, las trae de nuevo a su sitio para sustituir a los originales. Crea una copia de seguridad de los archivos originales para que pueda restaurarlos manualmente si lo desea. \u00a1Convertir\u00e1 los archivos de la galer\u00eda en bloque! No hay l\u00edmite para el tama\u00f1o del archivo.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Optimole<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image\" style=\"margin: 0\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"329\" src=\"https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-11-min-1024x329.jpg\" alt=\"\" class=\"wp-image-7641\" srcset=\"https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-11-min-1024x329.jpg 1024w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-11-min-850x273.jpg 850w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-11-min-768x247.jpg 768w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-11-min.jpg 1539w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Optimole &nbsp;es un plugin de\nWordPress para la optimizaci\u00f3n de im\u00e1genes que reduce autom\u00e1ticamente el tama\u00f1o\nde las im\u00e1genes sin que sea necesario realizar ning\u00fan trabajo. Es una gran\nventaja cuando se trata de la velocidad de carga de su sitio, ya que est\u00e1\ncompletamente basada en la nube y nunca muestra im\u00e1genes que sean m\u00e1s grandes\nde lo que deber\u00edan, tambi\u00e9n muestra la imagen perfecta para la vista y el\nnavegador del visitante.<\/p>\n\n\n\n<p>Adem\u00e1s, el plugin proporciona una carga diferida y\nun reemplazo eficiente de la imagen \u2013 reduce la calidad de la imagen si el\nvisitante tiene una conexi\u00f3n a internet m\u00e1s lenta \u2013 lo hace destacar entre la\nmultitud. Tambi\u00e9n detecta autom\u00e1ticamente el navegador y el WebP del usuario si\nes compatible.<\/p>\n\n\n\n<p>Todas las im\u00e1genes que comprime Optimole se sirven\na trav\u00e9s de una CDN r\u00e1pida. Puede probar Optimole de forma gratuita o\nactualizarse al plan premium si necesita ancho de banda adicional y espacio de\nprocesamiento.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>EWWW Image Optimizer Cloud<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image\" style=\"margin: 0\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"329\" src=\"https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-12-min-1024x329.jpg\" alt=\"\" class=\"wp-image-7642\" srcset=\"https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-12-min-1024x329.jpg 1024w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-12-min-850x273.jpg 850w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-12-min-768x247.jpg 768w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-12-min.jpg 1539w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>ewww Image Optimizer\nCloud ayuda a hacer que sus im\u00e1genes sean m\u00e1s peque\u00f1as y que su sitio sea m\u00e1s\nr\u00e1pido con menos complicaciones al comenzar. Sin l\u00edmites de tama\u00f1o y mucha\nflexibilidad, puede utilizar los valores predeterminados o personalizar el\nplugin completamente a su gusto. Todos los usuarios de EWWW IO pueden usar Bulk\nOptimizer para comprimir sus im\u00e1genes existentes, o usar la lista de la\nBiblioteca de medios.<\/p>\n\n\n\n<p>Se pueden escanear carpetas adicionales para\nasegurarse de que cada imagen en su sitio est\u00e9 correctamente optimizada. EWWW\nIO incluso le permite convertir sus im\u00e1genes en formatos de pr\u00f3xima generaci\u00f3n\ncomo WebP, o encontrar el mejor formato de imagen para una imagen con opciones\nde conversi\u00f3n de m\u00faltiples formatos. La compresi\u00f3n de la imagen comienza en\nsolo $ 0.003 \/ imagen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Optimus Image Optimizer<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image\" style=\"margin: 0\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"332\" src=\"https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-13-min-1024x332.jpg\" alt=\"\" class=\"wp-image-7643\" srcset=\"https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-13-min-1024x332.jpg 1024w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-13-min-850x275.jpg 850w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-13-min-768x249.jpg 768w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-13-min.jpg 1349w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Optimus WordPress Image Optimizer \u00a0utiliza compresi\u00f3n sin p\u00e9rdida para optimizar sus im\u00e1genes. Sin p\u00e9rdida significa que usted no ver\u00e1 ninguna p\u00e9rdida de calidad. Soporta WooCoomerce y multi-sitio y tiene una bonita caracter\u00edstica de optimizaci\u00f3n en bloque para aquellos con grandes bibliotecas de medios ya existentes. Tambi\u00e9n es compatible con el plugin WP Retina de WordPress. Hay una versi\u00f3n gratuita y premium. En la versi\u00f3n premium, usted paga una vez al a\u00f1o y puede comprimir una cantidad ilimitada de im\u00e1genes. Si lo combina con su plugin Cache Enabler tambi\u00e9n puede bucear en im\u00e1genes WebP, que es un nuevo formato de imagen ligera de Google. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>WP Smush<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image\" style=\"margin: 0\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"330\" src=\"https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-14-1024x330.png\" alt=\"\" class=\"wp-image-7645\" srcset=\"https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-14-1024x330.png 1024w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-14-850x274.png 850w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-14-768x248.png 768w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-14.png 1637w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>WP Smush\u00a0tiene una versi\u00f3n gratuita y premium. Se reducir\u00e1 la informaci\u00f3n oculta de las im\u00e1genes para reducir el tama\u00f1o sin reducir la calidad. Va a escanear im\u00e1genes y reducirlas cuando as carga a su sitio. Tambi\u00e9n va a escanear las im\u00e1genes que ya hab\u00eda subido y reducirlas. Trabaja hasta con 50 archivos a la vez. Tambi\u00e9n puede usar el plugin manualmente si lo desea. Es trabaja con JPEG, GIF y PNG tipos de imagen. Los tama\u00f1os de los archivos est\u00e1n limitados a 1 MB.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>TinyPNG (JPGs comprimidos tambi\u00e9n)<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image\" style=\"margin: 0\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"330\" src=\"https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-15-1024x330.png\" alt=\"\" class=\"wp-image-7646\" srcset=\"https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-15-1024x330.png 1024w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-15-850x274.png 850w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-15-768x247.png 768w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-15.png 1639w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>TinnyPNG &nbsp;utiliza los\nservicios TinyPNG y TinyJPG (la cuenta gratuita permite comprimir alrededor de\n100 im\u00e1genes por mes) para optimizar sus im\u00e1genes JPG y PNG. Comprimir\u00e1\nautom\u00e1ticamente las nuevas im\u00e1genes en bloque y comprimir\u00e1 las im\u00e1genes ya\nexistentes. Va a convertir CMYK a RGB para ahorrar espacio. Puede comprimir las\nim\u00e1genes JPEG hasta un 60% y las im\u00e1genes PNG hasta un 80% sin p\u00e9rdida de\ncalidad de imagen visible. No tiene un l\u00edmite de tama\u00f1o de archivo.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>ImageRecycle<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image\" style=\"margin: 0\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"332\" src=\"https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-16-1024x332.png\" alt=\"\" class=\"wp-image-7648\" srcset=\"https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-16-1024x332.png 1024w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-16-850x275.png 850w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-16-768x249.png 768w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-16.png 1349w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>ImageRecycle\u00a0plugin\u00a0es un optimizador autom\u00e1tico de im\u00e1genes y optimizador de PDF. Este plugin no s\u00f3lo se centra en la compresi\u00f3n de la imagen, sino tambi\u00e9n de archivos PDF. Una caracter\u00edstica muy \u00fatil es la capacidad para establecer el tama\u00f1o de archivo m\u00ednimo para la compresi\u00f3n. Por ejemplo, si usted tiene im\u00e1genes que son de 80 KB de tama\u00f1o, puede autom\u00e1ticamente excluirlas de la compresi\u00f3n. Esto garantiza que im\u00e1genes y archivos nunca se compriman demasiado. Tambi\u00e9n incluye optimizaci\u00f3n autom\u00e1tica de imagen y tama\u00f1o en bloque. Nota: Tienen una prueba gratuita de 15 d\u00edas, pero este es un servicio premium, y las im\u00e1genes se cargan y se comprimen utilizando sus servidores. No cobran por mes, sino por el n\u00famero total de im\u00e1genes comprimidas, comenzando en $10 por 10,000.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Optimizar Im\u00e1genes para la Web \u2013 Estudio de Caso<\/strong><\/h2>\n\n\n\n<p>Decidimos hacer nuestro propio peque\u00f1o estudio de caso y pruebas\npara mostrar que optimizar sus im\u00e1genes para la web puede afectar la velocidad\nglobal de su sitio WordPress.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>JPGs No Comprimidos<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image\" style=\"margin: 0\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"324\" src=\"https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-17-min-1024x324.png\" alt=\"\" class=\"wp-image-7649\" srcset=\"https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-17-min.png 1024w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-17-min-850x269.png 850w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-17-min-768x243.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Primero hemos subido 6 JPGs sin comprimir, todas las cuales ten\u00edan m\u00e1s de 1 MB de tama\u00f1o, a nuestro sitio de prueba. (V\u00e9ase las originales sin comprimir en JPGs). Luego hicimos 5 pruebas a trav\u00e9s Pingdom y tomamos el promedio. Como se puede ver en la siguiente prueba de velocidad, nuestro tiempo de carga total fue de 1.55 segundos y el tama\u00f1o total de la p\u00e1gina fue de 14.7 MB.<\/p>\n\n\n\n<figure class=\"wp-block-image\" style=\"margin: 0\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"325\" src=\"https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-18-min-1024x325.png\" alt=\"\" class=\"wp-image-7650\" srcset=\"https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-18-min.png 1024w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-18-min-850x270.png 850w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-18-min-768x244.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Prueba de velocida \u2013 imagen sin compresi\u00f3n<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>JPGs Comprimidos<\/strong><\/h2>\n\n\n\n<p>A continuaci\u00f3n, hemos\ncomprimido JPGs utilizando el plugin Imagify de WordPress, usando la\nconfiguraci\u00f3n \u00abagresiva\u00bb. (V\u00e9ase las&nbsp;JPS comprimidas que a\u00fan se ven tan\nhermosas). Luego hicimos 5 pruebas a trav\u00e9s Pingdom y tomamos el promedio. Como\nse puede ver en la&nbsp;siguiente prueba de velocidad, nuestro tiempo de carga\ntotal se redujo a 476 ms y el tama\u00f1o total de la p\u00e1gina se redujo a 2.9 MB.\nNuestros tiempos de carga totales&nbsp;<strong>disminuyeron en 54.88%<\/strong>&nbsp;y\nel&nbsp;<strong>tama\u00f1o de la p\u00e1gina disminuy\u00f3 en 80.27%<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image\" style=\"margin: 0\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"653\" src=\"https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-19-min-1024x653.png\" alt=\"\" class=\"wp-image-7651\" srcset=\"https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-19-min.png 1024w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-19-min-706x450.png 706w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-19-min-768x490.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>No hay casi ning\u00fan otro tipo de\noptimizaci\u00f3n que puede hacer en su sitio web que le dar\u00e1 m\u00e1s del 50% de\ndisminuci\u00f3n en los tiempos de carga. Por eso es tan importante la optimizaci\u00f3n\nde las im\u00e1genes, el proceso anterior fue todo automatizado mediante un plugin.\nEs un m\u00e9todo automatizado para tener un sitio WordPress m\u00e1s r\u00e1pido.&nbsp;La\notra optimizaci\u00f3n dram\u00e1tica que podr\u00eda hacer ser\u00eda cambiar su host de\nWordPress. Muchos clientes que se desplazan a Kingsta&nbsp;experimentan m\u00e1s del\n45% de aumento de velocidad. \u00a1Imag\u00ednense migrar a Kinsta y optimizar sus\nim\u00e1genes!<\/p>\n\n\n\n<p>Mediante la optimizaci\u00f3n de sus im\u00e1genes, si est\u00e1\nutilizando una herramienta de edici\u00f3n de fotos o un WordPress plugin, tambi\u00e9n\npuede solucionar la advertencia de \u00abOptimizar im\u00e1genes\u00bb que obtiene en Google\nPageSpeed Insights (como se muestra a continuaci\u00f3n).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Utilizando\u00a0SVGs<\/strong><\/h2>\n\n\n\n<p>Otra recomendaci\u00f3n es utilizar SVGs junto con el\nresto de sus im\u00e1genes. SVG es una imagen vectorial en formato XML que funciona\nmuy bien para los logotipos, iconos, texto e im\u00e1genes sencillas. Aqu\u00ed hay un\npar de razones:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>SVGs son autom\u00e1ticamente escalables\ntanto en navegadores como herramientas de edici\u00f3n de fotos. \u00a1Esto hace un sue\u00f1o\npara dise\u00f1adores web y dise\u00f1adores gr\u00e1ficos!<\/li><li>Google indexa SVGs, de la misma\nmanera en que lo hace en caso de PNGs y JPGs, as\u00ed no tiene que preocuparse de\nSEO.<\/li><li>SVGs son tradicionalmente (no\nsiempre) m\u00e1s peque\u00f1os que el tama\u00f1o del archivo PNG o JPG. Esto puede resultar\ntiempos de carga m\u00e1s r\u00e1pidos.<\/li><\/ul>\n\n\n\n<p>Genki escribi\u00f3 un excelente art\u00edculo\ndonde se compara el tama\u00f1o Y&nbsp; a continuaci\u00f3n,\nse presentan algunos puntos clave de su prueba, en el que compar\u00f3 los tres\ndiferentes tipos de imagen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>JPG (tama\u00f1o optimizado: 81.4 KB)<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image\" style=\"margin: 0\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"428\" src=\"https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-20-min-1024x428.jpg\" alt=\"\" class=\"wp-image-7652\" srcset=\"https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-20-min-1024x428.jpg 1024w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-20-min-850x355.jpg 850w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-20-min-768x321.jpg 768w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-20-min.jpg 1280w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>PNG (tama\u00f1o optimizado:\u00a085.1 KB)<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image\" style=\"margin: 0\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"428\" src=\"https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-21-min-1024x428.png\" alt=\"\" class=\"wp-image-7653\" srcset=\"https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-21-min-1024x428.png 1024w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-21-min-850x355.png 850w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-21-min-768x321.png 768w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-21-min.png 1280w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>SVG (tama\u00f1o optimizado: 6.1 KB)<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image\" style=\"margin: 0\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"428\" src=\"https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-22-min-1024x428.png\" alt=\"\" class=\"wp-image-7654\" srcset=\"https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-22-min-1024x428.png 1024w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-22-min-850x355.png 850w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-22-min-768x321.png 768w, https:\/\/webarpynet.arpynet.com\/wp-content\/uploads\/2019\/11\/IMAGEN-22-min.png 1280w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Como puede ver, el SVG es\nuna disminuci\u00f3n en el tama\u00f1o de archivo de 92.51% en comparaci\u00f3n con el JPG. Y\ncuando se comparan con el PNG, 92.83%.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Las Mejores Pr\u00e1cticas<\/strong><\/h2>\n\n\n\n<p>Aqu\u00ed est\u00e1n algunas de las mejores pr\u00e1cticas\ngenerales cuando se trata de c\u00f3mo optimizar im\u00e1genes para la web:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Si utiliza un WordPress plugin,&nbsp;<strong>use uno que comprime y optimiza las im\u00e1genes\nexternamente<\/strong>&nbsp;en sus servidores. Esto en\ncambio reduce la carga en su propio sitio.<\/li><li>Utilizar im\u00e1genes vectoriales,\nsiempre que sea posible, junto con los PNGs y JPGs<\/li><li>Utilizar una CDN&nbsp;para servir sus\nim\u00e1genes r\u00e1pidamente a los visitantes de todo el mundo<\/li><li>Elimine datos de imagen innecesarios<\/li><li>Recorte el espacio blanco y recr\u00e9elo\nutilizando CSS para proporcionar el relleno<\/li><li>Utilizar efectos CSS3 tanto como sea\nposible<\/li><li>Guardar las im\u00e1genes en las\ndimensiones adecuadas, sin embargo recuerde que WordPress ahora soporta\nim\u00e1genes receptivas para servirlas sin redimensi\u00f3n con CSS.<\/li><li>Use las fuentes web en lugar de\ncolocar el texto dentro de las im\u00e1genes \u2013 se ven mejor cuando se escalan y\nocupan menos espacio<\/li><li>Use im\u00e1genes de trama s\u00f3lo para\nescenas con muchas formas y detalles<\/li><li>Reduzca la profundidad de bits a una\nm\u00e1s peque\u00f1a paleta de colores<\/li><li>Utilice compresi\u00f3n con p\u00e9rdida cuando\nsea posible<\/li><li>Experimente para encontrar los\nmejores ajustes para cada formato<\/li><li>Use GIF solo si necesita utilizar\nanimaci\u00f3n GIF (pero&nbsp;pero comprima sus im\u00e1genes GIF)<\/li><li>Use PNG si necesita el alto nivel de\ndetalle y alta resoluci\u00f3n<\/li><li>Use JPG para fotos y capturas de\npantalla generales<\/li><li>Quite cualquier metadatos de imagen\ninnecesarios<\/li><li>Automatice el proceso tanto como sea\nposible<\/li><li>En algunos casos, es posible que\ndesee trabajar con im\u00e1genes lady load para agilizar el procesamiento de primera\np\u00e1gina<\/li><li>Guarde las im\u00e1genes como \u00aboptimizadas\npara web\u00bb en herramientas como Photoshop<\/li><li>Use WebP en Chrome para servir en\nim\u00e1genes m\u00e1s peque\u00f1as<\/li><\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>No olvide optimizar sus im\u00e1genes, de lo contrario, su sitio de WordPress puede sentir que est\u00e1 en c\u00e1mara lenta. \u00a1Y sabe lo frustrante que es &#8216;lento&#8217;!<\/p><\/blockquote>\n\n\n\n<p>Una vez que haya formateado sus im\u00e1genes para un\nmejor rendimiento y seguido las mejores pr\u00e1cticas, su sitio ser\u00e1 mejor\napreciado por los motores de b\u00fasqueda, navegadores y redes y se cargar\u00e1 m\u00e1s\nr\u00e1pidamente para sus lectores. Oh, y aseg\u00farese de ver nuestro tutorial sobre Hotlinking,\npara evitar que personas se roben sus im\u00e1genes y ancho de banda.<\/p>\n\n\n\n<p>\u00bfHa formateado sus im\u00e1genes para mejorar el\nrendimiento? \u00bfLas ha formateado a mano o utiliza un plugin, o ambos? \u00bfHay otra\nherramienta o plugin que recomendar\u00eda? \u00bfTiene algo que a\u00f1adir? \u00a1D\u00e9jenos conocer\nsus t\u00e9cnicas y mejores pr\u00e1cticas en los comentarios de abajo!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Conf\u00ede en nosotros, usted no desea que Google odie a su sitio web. Afortunadamente, puede reducir el tama\u00f1o del archivo de imagen para ayudar a mejorar el rendimiento de su sitio web. Un problema con el formato es que las modificaciones a menudo reducen su calidad (que a su vez puede hacer que el visitante&#8230;<\/p>\n","protected":false},"author":1,"featured_media":7658,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[46,48,49,47],"class_list":["post-7623","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-marketing-digital","tag-imagenes","tag-optimizacion-de-imagenes","tag-plugins","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/webarpynet.arpynet.com\/index.php?rest_route=\/wp\/v2\/posts\/7623","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webarpynet.arpynet.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webarpynet.arpynet.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webarpynet.arpynet.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webarpynet.arpynet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7623"}],"version-history":[{"count":0,"href":"https:\/\/webarpynet.arpynet.com\/index.php?rest_route=\/wp\/v2\/posts\/7623\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webarpynet.arpynet.com\/index.php?rest_route=\/wp\/v2\/media\/7658"}],"wp:attachment":[{"href":"https:\/\/webarpynet.arpynet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7623"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webarpynet.arpynet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=7623"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webarpynet.arpynet.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=7623"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}