{"id":55001,"date":"2020-01-30T22:16:39","date_gmt":"2020-01-30T16:46:39","guid":{"rendered":"https:\/\/git-staging.wpastra.com\/?p=55001"},"modified":"2023-12-28T16:09:16","modified_gmt":"2023-12-28T10:39:16","slug":"optimze-your-wordpress-images","status":"publish","type":"post","link":"https:\/\/git-staging.wpastra.com\/es\/guides-and-tutorials\/optimze-your-wordpress-images\/","title":{"rendered":"C\u00f3mo optimizar im\u00e1genes para WordPress - Gu\u00eda paso a paso"},"content":{"rendered":"<div id=\"bsf_rt_marker\"><\/div>\n<p>Las im\u00e1genes son muy importantes para fomentar la participaci\u00f3n, a\u00f1adir inter\u00e9s y romper lo que de otro modo ser\u00eda un muro de texto.<\/p>\n\n\n\n<p>Sin embargo, las im\u00e1genes suponen un reto. Suelen ser archivos grandes que pueden ralentizar la velocidad de carga de la p\u00e1gina.<\/p>\n\n\n\n<p>Dado que Google y la mayor\u00eda de los usuarios de la web prefieren tiempos de carga m\u00e1s r\u00e1pidos, esto es algo que debemos evitar absolutamente.<\/p>\n\n\n\n<p>Entonces, \u00bfc\u00f3mo puede incluir im\u00e1genes en su sitio web WordPress sin ralentizarlo?<\/p>\n\n\n\n<p>Optimizando sus im\u00e1genes.<\/p>\n\n\n\n<p>Vamos a resumir qu\u00e9 es la optimizaci\u00f3n de im\u00e1genes, c\u00f3mo funciona y c\u00f3mo puede optimizar las im\u00e1genes de su sitio web de WordPress con o sin un plugin.<\/p>\n\n\n\t\t\t\t<div class=\"wp-block-uagb-table-of-contents uagb-toc__align-left uagb-toc__columns-1  uagb-block-b1aecb9f\"\n\t\t\t\t\tdata-scroll= \"1\"\n\t\t\t\t\tdata-offset= \"30\"\n\t\t\t\t\tstyle=\"\"\n\t\t\t\t>\n\t\t\t\t<div class=\"uagb-toc__wrap\">\n\t\t\t\t\t\t<div class=\"uagb-toc__title\">\n\t\t\t\t\t\t\tTabla de contenidos\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"uagb-toc__list-wrap\">\n\t\t\t\t\t\t<ol class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#what-is-image-optimization\" class=\"uagb-toc-link__trigger\">\u00bfQu\u00e9 es la optimizaci\u00f3n de im\u00e1genes?<\/a><li class=\"uagb-toc__list\"><a href=\"#benefits-of-optimizing-images\" class=\"uagb-toc-link__trigger\">Ventajas de optimizar las im\u00e1genes<\/a><li class=\"uagb-toc__list\"><a href=\"#types-of-image-optimization\" class=\"uagb-toc-link__trigger\">Tipos de optimizaci\u00f3n de im\u00e1genes<\/a><li class=\"uagb-toc__list\"><a href=\"#how-to-optimize-wordpress-images\" class=\"uagb-toc-link__trigger\">C\u00f3mo optimizar las im\u00e1genes de WordPress<\/a><ul class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#how-to-optimize-images-for-web-performance\" class=\"uagb-toc-link__trigger\">C\u00f3mo optimizar las im\u00e1genes para el rendimiento web<\/a><li class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#use-a-wordpress-plugin-to-optimize-images\" class=\"uagb-toc-link__trigger\">Utilice un plugin de WordPress para optimizar las im\u00e1genes<\/a><li class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#benefits-of-image-optimization-plugins\" class=\"uagb-toc-link__trigger\">Ventajas de los plugins de optimizaci\u00f3n de im\u00e1genes<\/a><\/li><\/ul><\/li><li class=\"uagb-toc__list\"><a href=\"#image-optimization-tests-before-and-after\" class=\"uagb-toc-link__trigger\">Pruebas de optimizaci\u00f3n de im\u00e1genes - Antes y despu\u00e9s<\/a><ul class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#results-before-image-optimization\" class=\"uagb-toc-link__trigger\">Resultados antes de la optimizaci\u00f3n de im\u00e1genes<\/a><li class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#results-after-optimole-image-optimization\" class=\"uagb-toc-link__trigger\">Resultados tras la optimizaci\u00f3n de la imagen Optimole<\/a><\/li><\/ul><\/li><\/ul><\/li><li class=\"uagb-toc__list\"><a href=\"#other-ways-to-optimize-images\" class=\"uagb-toc-link__trigger\">Otras formas de optimizar im\u00e1genes<\/a><ul class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#lazy-loading\" class=\"uagb-toc-link__trigger\">Carga lenta<\/a><li class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#svgs-and-vector-images\" class=\"uagb-toc-link__trigger\">SVG e im\u00e1genes vectoriales<\/a><li class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#use-content-delivery-network-cdn\" class=\"uagb-toc-link__trigger\">Utilizar la red de distribuci\u00f3n de contenidos (CDN)<\/a><li class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#convert-gifs-to-video\" class=\"uagb-toc-link__trigger\">Convertir GIF en v\u00eddeo<\/a><li class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#smart-cropping\" class=\"uagb-toc-link__trigger\">Recorte inteligente<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li><li class=\"uagb-toc__list\"><a href=\"#wrapping-up\" class=\"uagb-toc-link__trigger\">Conclusi\u00f3n<\/a><\/ul><\/ul><\/ul><\/ol>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\n\n\n<h2 class=\"wp-block-heading\"><a id=\"post-116396-_26vhvaj0yr5a\"><\/a>\u00bfQu\u00e9 es la optimizaci\u00f3n de im\u00e1genes?<\/h2>\n\n\n\n<p>La optimizaci\u00f3n de im\u00e1genes consiste en reducir el tama\u00f1o de los archivos de imagen sin perder calidad. Lo ideal es presentar im\u00e1genes de alta calidad en su sitio web sin ralentizar las p\u00e1ginas con archivos de gran tama\u00f1o.<\/p>\n\n\n\n<p>Todo el mundo deber\u00eda prestar especial atenci\u00f3n a la optimizaci\u00f3n de im\u00e1genes porque es uno de los <a href=\"https:\/\/git-staging.wpastra.com\/es\/guides-and-tutorials\/speed-up-wordpress\/\" target=\"_blank\" data-type=\"URL\" rel=\"noreferrer noopener\">formas m\u00e1s comunes de aumentar la velocidad de un sitio web<\/a>.<\/p>\n\n\n\n<p>Lo bueno de la optimizaci\u00f3n de im\u00e1genes es que no requiere conocimientos de desarrollo, por lo que es f\u00e1cil de conseguir para cualquier propietario de un sitio web.<\/p>\n\n\n\n<p>Puedes hacer un seguimiento de cada imagen que subas a tu sitio y asegurarte de ajustarla y redimensionarla manualmente, o puedes utilizar un <a href=\"https:\/\/git-staging.wpastra.com\/es\/plugins\/best-wordpress-image-optimization-plugins\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/git-staging.wpastra.com\/plugins\/best-wordpress-image-optimization-plugins\/\" rel=\"noreferrer noopener\">plugin que optimizar\u00e1 todas las im\u00e1genes para usted<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><a id=\"post-116396-_kq8vl4cxu3f\"><\/a>Ventajas de optimizar las im\u00e1genes<\/h2>\n\n\n\n<p>La optimizaci\u00f3n de im\u00e1genes consiste en reducir el tama\u00f1o de los archivos de imagen sin perder calidad. Lo ideal es presentar im\u00e1genes de alta calidad en su sitio web sin ralentizar las p\u00e1ginas con archivos de gran tama\u00f1o.<\/p>\n\n\n\n<p>Todo el mundo deber\u00eda prestar especial atenci\u00f3n a la optimizaci\u00f3n de im\u00e1genes porque es una de las formas m\u00e1s comunes de aumentar la velocidad de un sitio web.<\/p>\n\n\n\n<p>Lo bueno de la optimizaci\u00f3n de im\u00e1genes es que no requiere conocimientos de desarrollo, por lo que es f\u00e1cil de conseguir para cualquier propietario de un sitio web.<\/p>\n\n\n\n<p>Optimizar las im\u00e1genes tiene algunas ventajas clave. Mejora los tiempos de carga de la p\u00e1gina, mejora la experiencia del usuario y puede mejorar el SEO de su sitio web.<\/p>\n\n\n\n<h3 class=\"\u2013 uagb-toc-hide-heading wp-block-heading\"><a id=\"post-116396-_mwtl1egu1iqu\"><\/a>Mejora el tiempo de carga de las p\u00e1ginas<\/h3>\n\n\n\n<p>Como dec\u00edamos al principio, la mayor\u00eda de los usuarios prefieren los sitios web que se cargan r\u00e1pido. Eso es especialmente cierto para el creciente n\u00famero de personas que utilizan tel\u00e9fonos para navegar por la web.<\/p>\n\n\n\n<p>Todos somos personas ocupadas que tenemos muchas cosas que hacer y toleramos poco la lentitud de las p\u00e1ginas web.<\/p>\n\n\n\n<p>Seg\u00fan <a href=\"https:\/\/unbounce.com\/landing-pages\/7-page-speed-stats-for-marketers\/\" target=\"_blank\" rel=\"noreferrer noopener\">Unbounce<\/a>, las p\u00e1ginas que se cargan m\u00e1s r\u00e1pido de dos segundos tienen una tasa media de rebote de 9%, mientras que las p\u00e1ginas que tardan cinco segundos en cargarse tienen una tasa de rebote de 38%. Esto se traduce en un menor compromiso de los usuarios y menos tasas de conversi\u00f3n.<\/p>\n\n\n\n<h3 class=\"\u2013 uagb-toc-hide-heading wp-block-heading\"><a id=\"post-116396-_1xsfwl5u7gc\"><\/a>Mejorar la experiencia del usuario<\/h3>\n\n\n\n<p>Los tiempos de carga m\u00e1s r\u00e1pidos garantizan que los usuarios puedan acceder a las p\u00e1ginas r\u00e1pidamente y participar de inmediato.<\/p>\n\n\n\n<p>Si les hace esperar, corre el riesgo de que se aburran y se vayan a otro sitio.<\/p>\n\n\n\n<p>Si sus p\u00e1ginas est\u00e1n dise\u00f1adas para convertir, captar clientes potenciales o vender, \u00a1cada visitante perdido es un ingreso perdido!<\/p>\n\n\n\n<h3 class=\"\u2013 uagb-toc-hide-heading wp-block-heading\"><a id=\"post-116396-_u9h5duwww29r\"><\/a>Mejorar el SEO del sitio web<\/h3>\n\n\n\n<p>Optimizaci\u00f3n de im\u00e1genes <a href=\"https:\/\/git-staging.wpastra.com\/es\/guides-and-tutorials\/wordpress-seo-ultimate-guide\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/git-staging.wpastra.com\/guides-and-tutorials\/wordpress-seo-ultimate-guide\/\" rel=\"noreferrer noopener\">mejora su posicionamiento SEO<\/a>. \u00bfC\u00f3mo es eso? Es cosa de Google. A partir de 2010, Google anunci\u00f3 oficialmente que la velocidad de la p\u00e1gina desempe\u00f1ar\u00e1 un papel importante en el algoritmo de clasificaci\u00f3n.<\/p>\n\n\n\n<p>Por lo tanto, si tiene un sitio web lento, sus posibilidades de ver su sitio en los primeros puestos de las SERP disminuyen.<\/p>\n\n\n\n<p>Incluso 12 a\u00f1os despu\u00e9s, esa misma medida de clasificaci\u00f3n de velocidad sigue siendo de vital importancia para la clasificaci\u00f3n de Google de su sitio web.<\/p>\n\n\n\n<p>Cuanto m\u00e1s r\u00e1pidas sean sus p\u00e1ginas, mejor se clasificar\u00e1n. Cuanto m\u00e1s lentas, peor.<\/p>\n\n\n\n<p>La optimizaci\u00f3n de im\u00e1genes puede hacerse manualmente o con una herramienta que se encargue de todo el trabajo duro por ti en modo autom\u00e1tico.<\/p>\n\n\n\n<p>M\u00e1s adelante, hablaremos de c\u00f3mo puede optimizar las im\u00e1genes de WordPress autom\u00e1ticamente y evitar el trabajo extra de hacerlo usted mismo.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><a id=\"post-116396-_tc9sqi4xkdfk\"><\/a>Tipos de optimizaci\u00f3n de im\u00e1genes<\/h2>\n\n\n\n<p>Hay tres formas principales de optimizar una imagen para obtener el mejor rendimiento: cambiar el formato del archivo, comprimir el archivo de imagen y cambiar las dimensiones de la imagen.<\/p>\n\n\n\n<h3 class=\"\u2013 uagb-toc-hide-heading wp-block-heading\"><a id=\"post-116396-_xox1o3h3n6lo\"><\/a>Cambiar el formato de archivo de imagen<\/h3>\n\n\n\n<p>Las im\u00e1genes suelen tener tres formatos principales: PNG, JPEG o GIF. Cada uno de ellos funciona en p\u00e1ginas web, pero son ideales para tipos espec\u00edficos de imagen.<\/p>\n\n\n\n<p><strong>PNG<\/strong> - Los archivos .png son ideales para im\u00e1genes de alta calidad, pero son archivos m\u00e1s grandes. El formato PNG es mejor para im\u00e1genes de menor resoluci\u00f3n, como banners, infograf\u00edas o capturas de pantalla.<\/p>\n\n\n\n<p><strong>JPEG<\/strong> &#8211; <a href=\"https:\/\/git-staging.wpastra.com\/es\/comparison\/jpg-vs-jpeg\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/git-staging.wpastra.com\/comparison\/jpg-vs-jpeg\/\" rel=\"noreferrer noopener\">Archivos .jpg o .jpeg<\/a> son muy comunes en Internet, ya que se pueden comprimir de forma eficaz, haci\u00e9ndolas mucho m\u00e1s peque\u00f1as de lo que ser\u00edan de otro modo. Los JPEG son \u00fatiles para p\u00e1ginas web, blogs e im\u00e1genes de productos.<\/p>\n\n\n\n<p><strong>GIF<\/strong> - Los archivos .gif son otro formato de archivo habitual en Internet. Se utilizan sobre todo para im\u00e1genes sencillas o animaciones, ya que su formato de 8 bits limita el color y el detalle. Los GIF son \u00fatiles para a\u00f1adir im\u00e1genes a los contenidos y para ilustraciones o gr\u00e1ficos b\u00e1sicos.<\/p>\n\n\n\n<h3 class=\"\u2013 uagb-toc-hide-heading wp-block-heading\"><a id=\"post-116396-_8c5bl19lbnd9\"><\/a>Compresi\u00f3n de im\u00e1genes<\/h3>\n\n\n\n<p><a href=\"https:\/\/git-staging.wpastra.com\/es\/plugins\/wordpress-image-compression-plugins\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/git-staging.wpastra.com\/plugins\/wordpress-image-compression-plugins\/\" rel=\"noreferrer noopener\">Compresi\u00f3n de im\u00e1genes<\/a> utiliza un algoritmo para reducir el tama\u00f1o de los archivos de imagen. Dependiendo de si el formato del archivo de imagen es con p\u00e9rdida o sin p\u00e9rdida, el algoritmo eliminar\u00e1 los datos innecesarios del archivo de imagen.<\/p>\n\n\n\n<p>La compresi\u00f3n con p\u00e9rdidas reducir\u00e1 la calidad de la imagen al eliminar datos y, al mismo tiempo, reducir\u00e1 significativamente el tama\u00f1o del archivo.<\/p>\n\n\n\n<p>La compresi\u00f3n sin p\u00e9rdidas comprime los datos de la imagen en lugar de eliminar datos del archivo.<\/p>\n\n\n\n<p>Los archivos PNG y JPEG pueden ser con o sin p\u00e9rdidas en funci\u00f3n de la imagen de origen, mientras que el GIF utiliza compresi\u00f3n sin p\u00e9rdidas.<\/p>\n\n\n\n<h3 class=\"\u2013 uagb-toc-hide-heading wp-block-heading\"><a id=\"post-116396-_mtti93lr88dq\"><\/a>Cambiar las dimensiones de la imagen<\/h3>\n\n\n\n<p>Cambiar la dimensi\u00f3n de la imagen es el \u00faltimo m\u00e9todo para optimizarla.<\/p>\n\n\n\n<p>Cuanto mayor es la imagen, m\u00e1s datos contiene y, por tanto, mayor es el archivo. Reducir el tama\u00f1o de la imagen al requerido en la p\u00e1gina reduce al m\u00e1ximo ese tama\u00f1o de archivo.<\/p>\n\n\n\n<p>Le recomendamos que ajuste el tama\u00f1o de sus im\u00e1genes a las dimensiones deseadas utilizando un editor de im\u00e1genes antes de subirlas a WordPress. Tambi\u00e9n puedes optimizar y comprimir las im\u00e1genes antes o despu\u00e9s de subirlas.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">C\u00f3mo optimizar las im\u00e1genes de WordPress<\/h2>\n\n\n\n<p>En esta gu\u00eda, aprenderemos a optimizar las im\u00e1genes de WordPress a trav\u00e9s de dos m\u00e9todos.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>C\u00f3mo optimizar manualmente las im\u00e1genes de WordPress<\/li>\n\n\n\n<li>C\u00f3mo optimizar im\u00e1genes con un plugin de WordPress <\/li>\n<\/ol>\n\n\n\n<p>Vamos a sumergirnos.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">C\u00f3mo optimizar las im\u00e1genes para el rendimiento web<\/h3>\n\n\n\n<p>As\u00ed que ahora que ya sabes un poco m\u00e1s sobre la optimizaci\u00f3n de im\u00e1genes y en qu\u00e9 consiste, vamos a ponernos manos a la obra.&nbsp;<\/p>\n\n\n\n<p>Vamos a tratar la optimizaci\u00f3n manual de im\u00e1genes, el uso de Photoshop y el uso de una herramienta en l\u00ednea.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Optimizar im\u00e1genes manualmente<\/h4>\n\n\n\n<p>Si te gusta hacerlo t\u00fa mismo, puedes optimizar manualmente todas las im\u00e1genes que utilices en tu sitio web de WordPress.<\/p>\n\n\n\n<p>T\u00fa mismo puedes redimensionar y recortar las im\u00e1genes antes de subirlas. Es importante que primero averig\u00fces el tama\u00f1o m\u00e1ximo de visualizaci\u00f3n de tus im\u00e1genes para no superar el l\u00edmite de tama\u00f1o.<\/p>\n\n\n\n<p>El tama\u00f1o m\u00e1ximo de visualizaci\u00f3n es, en realidad, la mayor resoluci\u00f3n con la que se puede mostrar una imagen en un sitio web.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Dependiendo de a qui\u00e9n preguntes, ser\u00e1 de unos 1200 x 628 p\u00edxeles para las im\u00e1genes de cabecera y de entre 640 x 480 y 1024 x 768 para las im\u00e1genes est\u00e1ndar.<\/p>\n\n\n\n<p><b>Optimizaci\u00f3n de im\u00e1genes con Photoshop<\/b><\/p>\n\n\n\n<p>Como Photoshop es uno de los editores de im\u00e1genes m\u00e1s populares, vamos a optimizar manualmente una imagen utiliz\u00e1ndolo.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Abra Photoshop y seleccione <b>Archivo <\/b>&gt; <b>Abrir<\/b><\/li>\n\n\n\n<li>Selecciona tu imagen para que se cargue en Photoshop<\/li>\n\n\n\n<li>Seleccione <b>Imagen<\/b> &gt; <b>Tama\u00f1o de la imagen<\/b> en el men\u00fa superior<\/li>\n\n\n\n<li>Establezca la altura y la anchura deseadas para la imagen<\/li>\n\n\n\n<li>Fije el <b>Resoluci\u00f3n<\/b> en el mismo men\u00fa<\/li>\n\n\n\n<li>Seleccione <b>Archivo<\/b> &gt; <b>Exportar<\/b> &gt; <b>Guardar para Web<\/b><\/li>\n\n\n\n<li>Seleccione JPEG en el men\u00fa<\/li>\n\n\n\n<li>Establezca un valor de calidad de imagen de entre 40 y 60 (puede ser necesario experimentar)<\/li>\n\n\n\n<li>Establecer <b>Progresiva<\/b> y <b>Incrustar perfil de color<\/b> a S\u00ed<\/li>\n\n\n\n<li>Convertir a sRGB y guardar el archivo<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\">Optimizaci\u00f3n de im\u00e1genes con herramientas en l\u00ednea<\/h4>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1000\" height=\"589\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/optimizilla-image-compression.jpeg\" alt=\"optimizilla image compression\" class=\"wp-image-116397\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/optimizilla-image-compression.jpeg 1000w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/optimizilla-image-compression-300x177.jpeg 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/optimizilla-image-compression-768x452.jpeg 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p>Hay una serie de herramientas en l\u00ednea que pueden realizar la optimizaci\u00f3n de im\u00e1genes. Suelen ser r\u00e1pidas e indoloras de usar y son una alternativa viable si no tienes un editor de im\u00e1genes.<\/p>\n\n\n\n<p>Una herramienta en l\u00ednea es<a href=\"https:\/\/imagecompressor.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"> Optimizilla<\/a>.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Visite el sitio web de Optimizilla<\/li>\n\n\n\n<li>Arrastra tu imagen al recuadro del centro y la optimizaci\u00f3n se realizar\u00e1 autom\u00e1ticamente<\/li>\n\n\n\n<li>Seleccione Descargar dentro de la imagen para descargar la imagen optimizada<\/li>\n<\/ol>\n\n\n\n<p>Ver\u00e1 un porcentaje dentro de la imagen cuando est\u00e9 optimizada. Este es el porcentaje en que se redujo el tama\u00f1o del archivo. Cuanto mayor sea el porcentaje, m\u00e1s peque\u00f1o ser\u00e1 el archivo.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><a id=\"post-116396-_jrz2v0rn219f\"><\/a>Utilice un plugin de WordPress para optimizar las im\u00e1genes<\/h3>\n\n\n\n<p>Si no quieres optimizar las im\u00e1genes manualmente, puedes instalar un plugin que har\u00e1 todo lo anterior (y m\u00e1s) por ti.<\/p>\n\n\n\n<p>Existen muchos plugins de optimizaci\u00f3n de im\u00e1genes, pero a nosotros nos gusta <a href=\"https:\/\/git-staging.wpastra.com\/go\/optimole\/\" target=\"_blank\" rel=\"noreferrer noopener\">Optimole<\/a>. Lo utilizaremos como ejemplo.<\/p>\n\n\n\n<p>Otros plugins de optimizaci\u00f3n de im\u00e1genes consiguen pr\u00e1cticamente lo mismo, pero de formas ligeramente diferentes.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><a id=\"post-116396-_ty975nwc5b8\"><\/a>Instalaci\u00f3n del plugin de optimizaci\u00f3n de im\u00e1genes Optimole<\/h4>\n\n\n\n<p>Instalar Optimole es f\u00e1cil. Usted tendr\u00e1 que registrarse con un correo electr\u00f3nico para activarlo, pero por lo dem\u00e1s, es muy f\u00e1cil de usar.<\/p>\n\n\n\n<p>Tambi\u00e9n hay una versi\u00f3n gratuita, que es la que utilizamos en este ejemplo.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Acceda a su sitio web WordPress<\/li>\n\n\n\n<li>Seleccione Plugins y A\u00f1adir nuevo en el men\u00fa lateral<\/li>\n\n\n\n<li>Busque \"optimole\" en el cuadro de b\u00fasqueda de la parte superior derecha.<\/li>\n\n\n\n<li>Seleccione <strong>Instale<\/strong> y <strong>Activar<\/strong> cuando aparezcan las opciones<\/li>\n<\/ol>\n\n\n\n<p>Se te pedir\u00e1 que te registres para obtener una clave API, lo que tendr\u00e1s que hacer para poder utilizarla.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" width=\"900\" height=\"354\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/optimole-image-compression-plugin.jpeg\" alt=\"OptiMole image compression plugin\" class=\"wp-image-116398\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/optimole-image-compression-plugin.jpeg 900w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/optimole-image-compression-plugin-300x118.jpeg 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/optimole-image-compression-plugin-768x302.jpeg 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Seleccione la opci\u00f3n Register &amp; Email API Key en la primera ventana de Optimole<\/li>\n\n\n\n<li>Pegue la clave API que reciba por correo electr\u00f3nico en la casilla y confirme<\/li>\n\n\n\n<li>Si la ventana no aparece, seleccione <strong>Medios de comunicaci\u00f3n<\/strong> &gt; <strong>Optimole<\/strong> para subirlo<\/li>\n<\/ol>\n\n\n\n<p>Ver\u00e1 una pantalla de conexi\u00f3n que sincroniza su plugin con los servidores de Optimole. Una vez hecho esto, ahora deber\u00eda ser capaz de utilizar las funciones gratuitas de Optimole para optimizar sus im\u00e1genes.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" width=\"794\" height=\"901\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/optimol-image-quality-settings.jpeg\" alt=\"Optimol Image quality settings\" class=\"wp-image-116399\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/optimol-image-quality-settings.jpeg 794w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/optimol-image-quality-settings-264x300.jpeg 264w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/optimol-image-quality-settings-768x871.jpeg 768w\" sizes=\"(max-width: 794px) 100vw, 794px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Optimizaci\u00f3n de im\u00e1genes con Optimole<\/h4>\n\n\n\n<p>Ahora que Optimole est\u00e1 funcionando, vamos a optimizar una imagen.<\/p>\n\n\n\n<p>La buena noticia es que Optimole optimizar\u00e1 autom\u00e1ticamente cualquier nueva imagen que subas. No necesitas hacer nada ya que el plugin escanear\u00e1 y optimizar\u00e1 autom\u00e1ticamente en segundo plano.<\/p>\n\n\n\n<p>Optimole tambi\u00e9n optimizar\u00e1 todas las im\u00e1genes existentes ya subidas a WordPress. No lo har\u00e1 autom\u00e1ticamente. En su lugar, optimizar\u00e1 las im\u00e1genes cuando se visite la p\u00e1gina o la entrada por primera vez.<\/p>\n\n\n\n<p>De esta forma, no se sobrecarga el plugin de golpe y las im\u00e1genes pueden optimizarse de forma m\u00e1s eficiente.<\/p>\n\n\n\n<p>Transfiere tus im\u00e1genes originales a la nube y sustituye su enlace inicial por uno personalizado una vez optimizadas. Las im\u00e1genes optimizadas se renderizan a trav\u00e9s de una CDN que las entrega m\u00e1s r\u00e1pido.<\/p>\n\n\n\n<p>Cuando visite una p\u00e1gina con una imagen, observar\u00e1 que la imagen mostrar\u00e1 la URL personalizada de Optimole (<strong>clic derecho<\/strong> &gt; <strong>Abrir imagen<\/strong> en nueva pesta\u00f1a).<\/p>\n\n\n\n<p>Los ajustes autom\u00e1ticos son bastante buenos, pero puede cambiarlos en el men\u00fa Ajustes al que se accede a trav\u00e9s de <strong>Medios de comunicaci\u00f3n<\/strong> &gt; <strong>Optimole<\/strong> &gt; <strong>Ajustes<\/strong> ficha.<\/p>\n\n\n\n<p>La pesta\u00f1a Configuraci\u00f3n te permite configurar las opciones del plugin. Los usuarios gratuitos no podr\u00e1n hacer mucho aqu\u00ed, pero si eres un usuario premium, tendr\u00e1s un mont\u00f3n de opciones de acceso mediante los enlaces General y Avanzado a la izquierda de la ventana.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"900\" height=\"319\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/optimized-images-with-optimole.jpeg\" alt=\"optimized images with OptiMole\" class=\"wp-image-116400\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/optimized-images-with-optimole.jpeg 900w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/optimized-images-with-optimole-300x106.jpeg 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/optimized-images-with-optimole-768x272.jpeg 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><a id=\"post-116396-_9dwu1t3q0pf4\"><\/a>Ventajas de los plugins de optimizaci\u00f3n de im\u00e1genes<\/h3>\n\n\n\n<p>Las ventajas de los plugins de optimizaci\u00f3n de im\u00e1genes son muchas, pero sirven sobre todo para reducir el tama\u00f1o de los archivos de imagen y mejorar as\u00ed la velocidad de carga de las p\u00e1ginas.<\/p>\n\n\n\n<p>Puedes hacerlo manualmente, como hemos explicado anteriormente, pero tambi\u00e9n puedes utilizar un plugin que haga el trabajo pesado por ti. Por qu\u00e9 cambiar manualmente cada imagen cuando un plugin puede hacerlo autom\u00e1ticamente?<\/p>\n\n\n\n<p>Otro beneficio de algunos plugins es el uso de CDN. Optimole no es el \u00fanico optimizador de im\u00e1genes que utiliza CDN, otros ofrecen caracter\u00edsticas similares.<\/p>\n\n\n\n<p>En lugar de que su servidor web env\u00ede todas las p\u00e1ginas y medios, la Red de Entrega de Contenidos aloja copias de su sitio web en ubicaciones de todo el mundo. El enrutamiento inteligente significa que la CDN m\u00e1s cercana al visitante enviar\u00e1 los datos, reduciendo los tiempos de espera y mejorando la experiencia del cliente.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><a id=\"post-116396-_yqqcjzmxydjq\"><\/a>Pruebas de optimizaci\u00f3n de im\u00e1genes - Antes y despu\u00e9s<\/h2>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"900\" height=\"96\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/compressed-image-with-optimole.jpeg\" alt=\"Compressed image with OptiMole\" class=\"wp-image-116401\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/compressed-image-with-optimole.jpeg 900w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/compressed-image-with-optimole-300x32.jpeg 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/compressed-image-with-optimole-768x82.jpeg 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure>\n\n\n\n<p>Ahora, hagamos algunas pruebas para ver la eficacia de la optimizaci\u00f3n autom\u00e1tica de im\u00e1genes.<\/p>\n\n\n\n<p>WordPress, por defecto, reduce las im\u00e1genes de alta resoluci\u00f3n, pero vamos a ver c\u00f3mo puede reducirlas a\u00fan m\u00e1s con un plugin de optimizaci\u00f3n de im\u00e1genes.<\/p>\n\n\n\n<p>As\u00ed que hagamos un experimento de antes y despu\u00e9s, utilizando la misma imagen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><a id=\"post-116396-_j51kixvck5w5\"><\/a>Resultados antes de la optimizaci\u00f3n de im\u00e1genes<\/h3>\n\n\n\n<p>Utilizando una instancia de WordPress de prueba y el tema predeterminado Twenty Twenty, subimos unas cuantas fotos de diferentes tama\u00f1os tomadas de<a href=\"https:\/\/mystock.themeisle.com\/\"> MyStock.fotos<\/a>. Incluimos las im\u00e1genes en una entrada normal del blog, mediante un bloque de galer\u00eda.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"947\" height=\"999\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/web-page-example.jpeg\" alt=\"Web page example\" class=\"wp-image-116402\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/web-page-example.jpeg 947w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/web-page-example-284x300.jpeg 284w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/web-page-example-768x810.jpeg 768w\" sizes=\"(max-width: 947px) 100vw, 947px\" \/><\/figure>\n\n\n\n<p>Ahora, si haces clic en cada imagen para ampliarla, te dar\u00e1s cuenta de que WordPress las redimension\u00f3 por defecto. As\u00ed que las cuatro im\u00e1genes que subimos se redujeron de la siguiente manera:<\/p>\n\n\n\n<p><strong>7,47 MB &gt; 676 KB<\/strong><\/p>\n\n\n\n<p><strong>12,3 MB &gt; 762 KB<\/strong><\/p>\n\n\n\n<p><strong>11,2 MB &gt; 384 KB<\/strong><\/p>\n\n\n\n<p><strong>8 MB &gt; 794 KB<\/strong><\/p>\n\n\n\n<p>Si subes la primera imagen a un tipo de entrada normal, <strong>sin la opci\u00f3n de ampliarlo,<\/strong> su tama\u00f1o de visualizaci\u00f3n pasar\u00e1 de 7,47 MB a 452 KB.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"963\" height=\"919\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/web-page-example-1.jpeg\" alt=\"Web page example 1\" class=\"wp-image-116403\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/web-page-example-1.jpeg 963w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/web-page-example-1-300x286.jpeg 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/web-page-example-1-768x733.jpeg 768w\" sizes=\"(max-width: 963px) 100vw, 963px\" \/><\/figure>\n\n\n\n<p>WordPress, por defecto, reduce la imagen subida en un solo post <strong>de 7,47 MB a 452 KB.<\/strong><\/p>\n\n\n\n<p>Si accede a la misma entrada del blog desde su m\u00f3vil<strong>la imagen se reducir\u00e1 a 92,61 KB.<\/strong><\/p>\n\n\n\n<p>As\u00ed que estos son los cambios que WordPress hace por defecto cuando accedes a las entradas de tu blog a trav\u00e9s de escritorio y m\u00f3vil.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><a id=\"post-116396-_ob7mz4gjxqaq\"><\/a>Resultados tras la optimizaci\u00f3n de la imagen Optimole<\/h3>\n\n\n\n<p>Ahora, vamos a ver c\u00f3mo Optimole comprime sus im\u00e1genes. Al igual que hicimos en la primera parte de las pruebas (sin Optimole), creamos un bloque de galer\u00eda subiendo las mismas im\u00e1genes sin optimizar tomadas de MyStock.photos.<\/p>\n\n\n\n<p>Optimole tiene cuatro niveles de compresi\u00f3n. Si eliges Alta, la compresi\u00f3n mantendr\u00e1 la calidad de imagen lo m\u00e1s alta posible.<\/p>\n\n\n\n<p>Si eliges Baja, la compresi\u00f3n y la optimizaci\u00f3n ser\u00e1n m\u00e1s dr\u00e1sticas (reducir\u00e1 el tama\u00f1o en mucha mayor medida).<\/p>\n\n\n\n<p>Una vez que visite el puesto en el sitio web en vivo,<a href=\"https:\/\/git-staging.wpastra.com\/go\/optimole\/\" target=\"_blank\" rel=\"noreferrer noopener\"> Optimole<\/a> toma inmediatamente el relevo y crea una alternativa comprimida de cada imagen sobre la que hagas clic (cada imagen puede ampliarse).<\/p>\n\n\n\n<p>Con <strong>compresi\u00f3n de alta calidad<\/strong>las im\u00e1genes se redujeron de la siguiente manera (se trata de las mismas im\u00e1genes enumeradas en el mismo orden que en la prueba anterior):<\/p>\n\n\n\n<p><strong>7,47 MB &gt; 557 KB<\/strong><\/p>\n\n\n\n<p><strong>12,3 MB &gt;548 KB<\/strong><\/p>\n\n\n\n<p><strong>11,2 MB &gt; 220 KB<\/strong><\/p>\n\n\n\n<p><strong>8 MB &gt; 547 KB<\/strong><\/p>\n\n\n\n<p>Con <strong>compresi\u00f3n de baja calidad<\/strong>los resultados son diferentes:<\/p>\n\n\n\n<p><strong>7,47 MB &gt; 251 KB<\/strong><\/p>\n\n\n\n<p><strong>12,3 MB &gt; 269 KB<\/strong><\/p>\n\n\n\n<p><strong>11,2 MB &gt; 124 KB<\/strong><\/p>\n\n\n\n<p><strong>8 MB &gt; 302 KB<\/strong><\/p>\n\n\n\n<p>As\u00ed es como queda la primera imagen de la lista tras los niveles de compresi\u00f3n Alto y Bajo (el nivel de calidad) :<\/p>\n\n\n\n<p><strong>Nivel de alta calidad (557 KB)<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/original-image-for-the-compression-test.jpeg\" alt=\"Original image for the compression test\" class=\"wp-image-116404\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/original-image-for-the-compression-test.jpeg 1024w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/original-image-for-the-compression-test-300x200.jpeg 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/original-image-for-the-compression-test-768x512.jpeg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>Nivel de calidad bajo (251 KB)<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/image-after-compression.jpeg\" alt=\"Image after compression\" class=\"wp-image-116405\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/image-after-compression.jpeg 1024w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/image-after-compression-300x200.jpeg 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/image-after-compression-768x512.jpeg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>A simple vista, se nota que la calidad de la imagen no ha cambiado mucho.<\/p>\n\n\n\n<p>Ahora, si a\u00f1ades una imagen a una entrada de blog <strong>sin la opci\u00f3n de ampliarlo<\/strong>se reducir\u00e1 autom\u00e1ticamente a su tama\u00f1o m\u00e1ximo de visualizaci\u00f3n (el tama\u00f1o m\u00e1ximo de visualizaci\u00f3n que se requiere para una entrada de blog).<\/p>\n\n\n\n<p>Por ejemplo, esta imagen por s\u00ed sola fue <strong>convertido de 7,47 MB a 75,3 KB<\/strong> (en compresi\u00f3n de alta calidad) mientras se muestran en una sola entrada de blog:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"963\" height=\"919\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/post-size-after-image-optimization.jpeg\" alt=\"Post size after image optimization\" class=\"wp-image-116406\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/post-size-after-image-optimization.jpeg 963w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/post-size-after-image-optimization-300x286.jpeg 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/post-size-after-image-optimization-768x733.jpeg 768w\" sizes=\"(max-width: 963px) 100vw, 963px\" \/><\/figure>\n\n\n\n<p><strong>Imagen de puesto \u00fanico comprimida a 75,3 KB<\/strong><\/p>\n\n\n\n<p><strong>580 x 387 p\u00edxeles<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"580\" height=\"387\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/image-test-for-resolution.jpeg\" alt=\"Image test for resolution\" class=\"wp-image-116407\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/image-test-for-resolution.jpeg 580w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/image-test-for-resolution-300x200.jpeg 300w\" sizes=\"(max-width: 580px) 100vw, 580px\" \/><\/figure>\n\n\n\n<p>Esto es bueno porque su servidor no tendr\u00e1 que cargar el tama\u00f1o completo de la imagen cuando se prefiere un tama\u00f1o m\u00e1s peque\u00f1o.<\/p>\n\n\n\n<p>Pero eso ocurre en el escritorio. Para pantallas m\u00f3viles, Optimole crear\u00e1 versiones alternativas de la imagen, incluso m\u00e1s peque\u00f1as que su hom\u00f3loga de escritorio.<\/p>\n\n\n\n<p>Por lo tanto, si alguien accede a su sitio desde un m\u00f3vil, Optimole no mostrar\u00e1 la versi\u00f3n de escritorio de la imagen que, incluso optimizada, puede tardar en cargarse en un dispositivo m\u00e1s peque\u00f1o. En realidad, el plugin ofrece una alternativa m\u00f3vil a esa imagen.<\/p>\n\n\n\n<p>La misma imagen de la entrada del blog anterior era <strong>reducido a 20,15 KB para usuarios m\u00f3viles <\/strong>(de 7,47 MB en el original).<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"187\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/image-test-after-resizing.jpeg\" alt=\"Image test after resizing\" class=\"wp-image-116408\" \/><\/figure>\n\n\n\n<p>Optimole utiliza m\u00e9todos de compresi\u00f3n con y sin p\u00e9rdidas, que se establecen en funci\u00f3n del nivel de compresi\u00f3n que elija.<\/p>\n\n\n\n<p>A trav\u00e9s de <strong>optimizaci\u00f3n sin p\u00e9rdidas<\/strong>las im\u00e1genes no perder\u00e1n datos significativos durante la compresi\u00f3n. Tendr\u00e1n el mismo aspecto que su versi\u00f3n original despu\u00e9s de la optimizaci\u00f3n. Por eso la optimizaci\u00f3n sin p\u00e9rdidas no reducir\u00e1 mucho el espacio en disco, las diferencias de tama\u00f1o tras la compresi\u00f3n son casi nulas.<\/p>\n\n\n\n<p>Por otra parte, hay <strong>optimizaci\u00f3n con p\u00e9rdidas<\/strong>que reduce en gran medida el tama\u00f1o de las im\u00e1genes, pero sin reducir la calidad (tal y como se percibe a simple vista).<\/p>\n\n\n\n<p>Por lo tanto, si quiere que su base de datos sea mucho m\u00e1s ligera de lo que es ahora, puede optar por la optimizaci\u00f3n con p\u00e9rdidas, ya que sus visitantes no notar\u00e1n la conversi\u00f3n.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><a id=\"post-116396-_ygnb0bl6fw05\"><\/a>Otras formas de optimizar im\u00e1genes<\/h2>\n\n\n\n<p>Aparte del cambio de tama\u00f1o, existen otros m\u00e9todos para ofrecer im\u00e1genes m\u00e1s ligeras a sus visitantes y mejorar los tiempos de carga de su sitio.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><a id=\"post-116396-_sirva8lf3biq\"><\/a>Carga lenta<\/h3>\n\n\n\n<p>La carga lenta es otro m\u00e9todo que contribuir\u00e1 a que tus im\u00e1genes no ralenticen tu sitio. Si tienes entradas o p\u00e1ginas con muchas im\u00e1genes, mostrarlas todas a la vez puede no ser una buena idea.<\/p>\n\n\n\n<p>La funci\u00f3n de carga lenta las mostrar\u00e1 gradualmente cuando el usuario se desplace por la p\u00e1gina. Con cada desplazamiento, se muestra un nuevo lote de im\u00e1genes en la zona visible de la pantalla del usuario, de modo que el servidor responder\u00e1 mejor a todas las peticiones.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><a id=\"post-116396-_za2701owwns\"><\/a>SVG e im\u00e1genes vectoriales<\/h3>\n\n\n\n<p>Los SVG son gr\u00e1ficos vectoriales escalables o im\u00e1genes vectoriales. Mientras que los PNG y los JPEG se basan en la trama, los SVG se basan exclusivamente en las matem\u00e1ticas. Esto significa que pueden ampliarse o reducirse infinitamente manteniendo archivos de menor tama\u00f1o.<\/p>\n\n\n\n<p>Los SVG son ideales porque la misma imagen puede representarse en distintos tama\u00f1os de pantalla sin perder detalle ni distorsionarse. Tambi\u00e9n requieren menos peticiones HTTP para cargarse y pueden ser entendidos por los motores de b\u00fasqueda, lo que ofrece una peque\u00f1a ventaja SEO.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><a id=\"post-116396-_sh716nlvp1rq\"><\/a><br>Utilizar la red de distribuci\u00f3n de contenidos (CDN)<\/h3>\n\n\n\n<p>Un CDN es un servicio que sirve su sitio web utilizando el servidor m\u00e1s cercano a sus visitantes, lo que se traduce en tiempos de carga m\u00e1s r\u00e1pidos. Optimole viene con un servicio CDN integrado para im\u00e1genes, que funciona autom\u00e1ticamente.<\/p>\n\n\n\n<p><a href=\"https:\/\/git-staging.wpastra.com\/es\/guides-and-tutorials\/cloudflare-with-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">Cloudflare<\/a> y <a href=\"https:\/\/www.stackpath.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">StackPath<\/a> son plugins independientes de WordPress que proporcionan servicios CDN para toda su base de datos en caso de que necesite una optimizaci\u00f3n completa del sitio.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><a id=\"post-116396-_qplhl1scf2xi\"><\/a>Convertir GIF en v\u00eddeo<\/h3>\n\n\n\n<p>Para ahorrar espacio en disco y mostrar archivos m\u00e1s ligeros, tambi\u00e9n puede <strong>convertir GIF en v\u00eddeo<\/strong>. Si activa esta funci\u00f3n en Optimole, empezar\u00e1 a convertir autom\u00e1ticamente todos los archivos GIF que cargue.<\/p>\n\n\n\n<p>Los formatos de v\u00eddeo disponibles son MP4 y WebM, y el plugin elegir\u00e1 el m\u00e1s eficiente para cada caso particular durante la conversi\u00f3n.<\/p>\n\n\n\n<p>Tambi\u00e9n existen varias herramientas en l\u00ednea que puedes utilizar para convertir un GIF a MP4 antes de subirlo a tu sitio de WordPress. \u00bfPor qu\u00e9 convertirlo? Porque los formatos GIF son m\u00e1s grandes que los formatos de v\u00eddeo.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><a id=\"post-116396-_2n918ruxbrgw\"><\/a>Recorte inteligente<\/h3>\n\n\n\n<p><strong>Recorte inteligente<\/strong> significa recortar el espacio o el fondo innecesarios de una imagen y mantener s\u00f3lo el punto de inter\u00e9s.<\/p>\n\n\n\n<p>El recorte puede hacerse manualmente o mediante un complemento como <a href=\"https:\/\/optimole.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Optimole<\/a> que detectar\u00e1 autom\u00e1ticamente los \"puntos calientes\" de una imagen y eliminar\u00e1 las partes innecesarias.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><a id=\"post-116396-_yuccuojoxoe2\"><\/a>Conclusi\u00f3n<\/h2>\n\n\n\n<p>La optimizaci\u00f3n de im\u00e1genes es una t\u00e9cnica sencilla que no requiere mucho esfuerzo si se utiliza un plugin y s\u00f3lo un esfuerzo modesto si se realiza manualmente.<\/p>\n\n\n\n<p>Mientras optimices todas tus im\u00e1genes, no importa c\u00f3mo lo hagas. S\u00f3lo que lo hagas.<\/p>\n\n\n\n<p>Los archivos grandes ralentizan las p\u00e1ginas web y eso es algo que nadie quiere. Google te penalizar\u00e1 por p\u00e1ginas lentas y los usuarios tambi\u00e9n.<\/p>\n\n\n\n<p>Hay demasiada competencia en Internet como para dejar pasar cualquier ventaja potencial. Cuando la optimizaci\u00f3n de im\u00e1genes es tan eficaz y, a la vez, tan sencilla de aplicar, \u00a1realmente deber\u00edas plante\u00e1rtelo!<\/p>","protected":false},"excerpt":{"rendered":"<p>Images are incredibly important for helping engagement, adding interest and breaking up what otherwise would be a wall of text. Images do bring challenges though. They are often large files that can slow down your page load speed. As Google and most web users prefer faster load times, this is something we absolutely have to [\u2026]<\/p>","protected":false},"author":9,"featured_media":55016,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[860],"tags":[],"class_list":{"0":"post-55001","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-guides-and-tutorials"},"spectra_custom_meta":{"_edit_lock":["1673328453:88"],"_edit_last":["88"],"rank_math_internal_links_processed":["1"],"wp_last_modified_info":["January 10, 2023 @ 10:57 AM"],"wplmi_shortcode":["[lmt-post-modified-info]"],"astra_display_author":["9"],"tap_disable_autolinker":["no"],"tap_autolink_inside_heading":["global"],"tap_autolink_random_placement":["global"],"tap_post_autolinker_limit":["0"],"_yoast_wpseo_primary_category":["860"],"site-sidebar-layout":["default"],"site-content-layout":["default"],"theme-transparent-header-meta":["default"],"_yoast_wpseo_content_score":["30"],"_ppc_meta_key":["a:16:{s:8:\"ppc_key5\";s:37:\"Title is Catchy and Slug is Optimized\";s:20:\"ppc_key5d92f85d42273\";s:60:\"Images &amp; Names Correctly. Title &amp; Alt Tags are Given\";s:8:\"ppc_key4\";s:15:\"Formatting Done\";s:8:\"ppc_key8\";s:28:\"Spelling and Grammar Checked\";s:8:\"ppc_key3\";s:28:\"Category and Author Selected\";s:8:\"ppc_key2\";s:23:\"Featured Image Assigned\";s:20:\"ppc_key5ddf5ba19a347\";s:9:\"TOC Added\";s:20:\"ppc_key5ddf5c326920c\";s:59:\"Headings are in title-case and have appropriate heading tag\";s:8:\"ppc_key6\";s:22:\"Social Images Assigned\";s:20:\"ppc_key5ddf5b93dc6a6\";s:21:\"Affiliate Links Added\";s:8:\"ppc_key7\";s:8:\"Done SEO\";s:20:\"ppc_key610cc9c5c4d6c\";s:37:\"For new content disable updated date.\";s:20:\"ppc_key610cc9d811cfe\";s:39:\"For updated content enable updated date\";s:20:\"ppc_key62b0173b707c0\";s:40:\"For updated content, enable updated date\";s:20:\"ppc_key62b01736334b5\";s:37:\"For new content, disable updated date\";s:20:\"ppc_key62b0172ee5a4c\";s:23:\"Featured image assigned\";}"],"_thumbnail_id":["55016"],"_yoast_wpseo_opengraph-title":["Step-by-Step Guide to WordPress Image Optimization"],"_yoast_wpseo_opengraph-description":["We all use images and visuals, in general, on our sites. It\u2019s inevitable nowadays. But the more images we upload, the more they impact the speed of the site. And a slow site can further lead to many other negative outcomes, which we will briefly cover later in this post."],"_yoast_wpseo_opengraph-image":["https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/optimizing-images-on-your-wordpress-site.jpg"],"_yoast_wpseo_opengraph-image-id":["55016"],"_yoast_wpseo_twitter-title":["Step-by-Step Guide to WordPress Image Optimization"],"_yoast_wpseo_twitter-description":["We all use images and visuals, in general, on our sites. It\u2019s inevitable nowadays. But the more images we upload, the more they impact the speed of the site. And a slow site can further lead to many other negative outcomes, which we will briefly cover later in this post."],"_yoast_wpseo_twitter-image":["https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/optimizing-images-on-your-wordpress-site.jpg"],"_yoast_wpseo_twitter-image-id":["55016"],"uagb_style_timestamp-css":["1581069101"],"uagb_style_timestamp-js":["1588222882"],"_elementor_controls_usage":["a:0:{}"],"_yoast_wpseo_focuskw":["optimize images"],"_yoast_wpseo_metadesc":["It's vital you optimize images on your website both to improve your visitors experience and to rank higher in search engines. Find out how in our guide."],"_yoast_wpseo_linkdex":["76"],"_yoast_wpseo_title":["How To Optimize Images in WordPress - A Step-by-Step Guide"],"essb_cached_image":["https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/optimizing-images-on-your-wordpress-site.jpg"],"_essb_love":["0"],"essb_cache_expire":["1588221964"],"essb_c_facebook":["31"],"essb_c_facebook_like":["0"],"essb_c_twitter":["0"],"essb_c_google":["0"],"essb_c_pinterest":["0"],"essb_c_linkedin":["0"],"essb_c_digg":["0"],"essb_c_del":["0"],"essb_c_stumbleupon":["0"],"essb_c_tumblr":["0"],"essb_c_vk":["3"],"essb_c_print":["0"],"essb_c_mail":["0"],"essb_c_flattr":["0"],"essb_c_reddit":["0"],"essb_c_buffer":["0"],"essb_c_love":["0"],"essb_c_weibo":["0"],"essb_c_pocket":["0"],"essb_c_xing":["0"],"essb_c_ok":["0"],"essb_c_mwp":["0"],"essb_c_more":["0"],"essb_c_whatsapp":["0"],"essb_c_meneame":["0"],"essb_c_blogger":["0"],"essb_c_amazon":["0"],"essb_c_yahoomail":["0"],"essb_c_gmail":["0"],"essb_c_aol":["0"],"essb_c_newsvine":["0"],"essb_c_hackernews":["0"],"essb_c_evernote":["0"],"essb_c_myspace":["0"],"essb_c_mailru":["0"],"essb_c_viadeo":["0"],"essb_c_line":["0"],"essb_c_flipboard":["0"],"essb_c_comments":["2"],"essb_c_yummly":["0"],"essb_c_sms":["0"],"essb_c_viber":["0"],"essb_c_telegram":["0"],"essb_c_subscribe":["0"],"essb_c_skype":["0"],"essb_c_messenger":["0"],"essb_c_kakaotalk":["0"],"essb_c_share":["0"],"essb_c_livejournal":["0"],"essb_c_yammer":["0"],"essb_c_meetedgar":["0"],"essb_c_fintel":["0"],"essb_c_mix":["0"],"essb_c_instapaper":["0"],"essb_c_copy":["0"],"essb_c_total":["36"],"uag_style_timestamp-css":["1590137174"],"uag_style_timestamp-js":["1590137174"],"_lmt_disableupdate":["no"],"_uagb_toc_heading_content":["a:11:{i:0;a:4:{s:5:\"level\";i:2;s:2:\"id\";s:26:\"what-is-image-optimization\";s:7:\"content\";s:26:\"What Is Image Optimization\";s:5:\"depth\";i:2;}i:1;a:4:{s:5:\"level\";i:2;s:2:\"id\";s:34:\"why-do-you-need-image-optimization\";s:7:\"content\";s:35:\"Why Do You Need Image Optimization?\";s:5:\"depth\";i:2;}i:2;a:4:{s:5:\"level\";i:2;s:2:\"id\";s:50:\"how-to-optimize-your-images-on-your-wordpress-site\";s:7:\"content\";s:50:\"How to Optimize Your Images on Your WordPress Site\";s:5:\"depth\";i:2;}i:3;a:4:{s:5:\"level\";i:3;s:2:\"id\";s:24:\"optimize-images-manually\";s:7:\"content\";s:24:\"Optimize Images Manually\";s:5:\"depth\";i:3;}i:4;a:4:{s:5:\"level\";i:3;s:2:\"id\";s:39:\"set-the-image-optimization-on-autopilot\";s:7:\"content\";s:39:\"Set the Image Optimization on Autopilot\";s:5:\"depth\";i:3;}i:5;a:4:{s:5:\"level\";i:3;s:2:\"id\";s:51:\"how-to-optimize-your-wordpress-images-automatically\";s:7:\"content\";s:51:\"How to Optimize Your WordPress Images Automatically\";s:5:\"depth\";i:3;}i:6;a:4:{s:5:\"level\";i:2;s:2:\"id\";s:41:\"image-optimization-tests-before-and-after\";s:7:\"content\";s:43:\"Image Optimization Tests - Before and After\";s:5:\"depth\";i:2;}i:7;a:4:{s:5:\"level\";i:3;s:2:\"id\";s:33:\"results-before-image-optimization\";s:7:\"content\";s:33:\"Results Before Image Optimization\";s:5:\"depth\";i:3;}i:8;a:4:{s:5:\"level\";i:3;s:2:\"id\";s:32:\"results-after-image-optimization\";s:7:\"content\";s:32:\"Results After Image Optimization\";s:5:\"depth\";i:3;}i:9;a:4:{s:5:\"level\";i:2;s:2:\"id\";s:29:\"other-ways-to-optimize-images\";s:7:\"content\";s:29:\"Other Ways to Optimize Images\";s:5:\"depth\";i:2;}i:10;a:4:{s:5:\"level\";i:2;s:2:\"id\";s:13:\"wrapping-up\u00a0\";s:7:\"content\";s:13:\"Wrapping Up\u00a0\";s:5:\"depth\";i:2;}}"],"rank_math_primary_category":["860"],"rank_math_title":["How To Optimize Images for WordPress \u2013 Beginner's Guide"],"rank_math_description":["Don't let large image files slow down your site. Learn how to optimize images for WordPress websites with our step-by-step guide."],"rank_math_focus_keyword":["How To optimize images for WordPress"],"rank_math_facebook_title":["How To Optimize Images for WordPress \u2013 Beginner's Guide"],"rank_math_facebook_description":["Don't let large image files slow down your site. Learn how to optimize images for WordPress websites with our step-by-step guide."],"rank_math_twitter_title":["How To Optimize Images for WordPress \u2013 Beginner's Guide"],"rank_math_twitter_description":["Don't let large image files slow down your site. Learn how to optimize images for WordPress websites with our step-by-step guide."],"rank_math_news_sitemap_robots":["index"],"rank_math_robots":["a:1:{i:0;s:5:\"index\";}"],"rank_math_facebook_image":["https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/optimizing-images-on-your-wordpress-site.jpg"],"rank_math_facebook_image_id":["55016"],"rank_math_twitter_image":["https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/optimizing-images-on-your-wordpress-site.jpg"],"rank_math_twitter_image_id":["55016"],"rank_math_twitter_use_facebook":["on"],"rank_math_analytic_object_id":["732"],"rank_math_seo_score":["79"],"_wplmi_last_modified":["2023-01-10 10:57:11"],"_lmt_disable":["no"],"uael-social-share-count":["a:1:{s:8:\"1b71105e\";i:300;}"],"_wpml_media_featured":["1"],"_wpml_media_duplicate":["0"],"_wpml_word_count":["{\"total\":3341,\"to_translate\":{\"es\":3341}}"],"_trp_automatically_translated_slug_es_ES":["optimiza-tus-imagenes-en-wordpress"],"_uagb_toc_options":["a:2:{s:17:\"_uagb_toc_version\";s:10:\"1784079637\";s:18:\"_uagb_toc_headings\";a:21:{i:0;a:4:{s:5:\"level\";i:2;s:2:\"id\";s:26:\"what-is-image-optimization\";s:7:\"content\";s:27:\"What Is Image Optimization?\";s:5:\"depth\";i:2;}i:1;a:4:{s:5:\"level\";i:2;s:2:\"id\";s:29:\"benefits-of-optimizing-images\";s:7:\"content\";s:29:\"Benefits of Optimizing Images\";s:5:\"depth\";i:2;}i:2;a:4:{s:5:\"level\";i:2;s:2:\"id\";s:27:\"types-of-image-optimization\";s:7:\"content\";s:27:\"Types of Image Optimization\";s:5:\"depth\";i:2;}i:3;a:4:{s:5:\"level\";i:2;s:2:\"id\";s:32:\"how-to-optimize-wordpress-images\";s:7:\"content\";s:32:\"How to optimize WordPress images\";s:5:\"depth\";i:2;}i:4;a:4:{s:5:\"level\";i:3;s:2:\"id\";s:42:\"how-to-optimize-images-for-web-performance\";s:7:\"content\";s:42:\"How to optimize images for Web Performance\";s:5:\"depth\";i:3;}i:5;a:4:{s:5:\"level\";i:4;s:2:\"id\";s:24:\"optimize-images-manually\";s:7:\"content\";s:24:\"Optimize Images Manually\";s:5:\"depth\";i:4;}i:6;a:4:{s:5:\"level\";i:4;s:2:\"id\";s:35:\"optimizing-images-with-online-tools\";s:7:\"content\";s:35:\"Optimizing Images with Online Tools\";s:5:\"depth\";i:4;}i:7;a:4:{s:5:\"level\";i:3;s:2:\"id\";s:41:\"use-a-wordpress-plugin-to-optimize-images\";s:7:\"content\";s:41:\"Use a WordPress Plugin to Optimize Images\";s:5:\"depth\";i:3;}i:8;a:4:{s:5:\"level\";i:4;s:2:\"id\";s:49:\"installing-the-optimole-image-optimization-plugin\";s:7:\"content\";s:49:\"Installing the Optimole Image Optimization Plugin\";s:5:\"depth\";i:4;}i:9;a:4:{s:5:\"level\";i:4;s:2:\"id\";s:31:\"optimizing-images-with-optimole\";s:7:\"content\";s:31:\"Optimizing Images with Optimole\";s:5:\"depth\";i:4;}i:10;a:4:{s:5:\"level\";i:3;s:2:\"id\";s:38:\"benefits-of-image-optimization-plugins\";s:7:\"content\";s:38:\"Benefits of Image Optimization Plugins\";s:5:\"depth\";i:3;}i:11;a:4:{s:5:\"level\";i:2;s:2:\"id\";s:41:\"image-optimization-tests-before-and-after\";s:7:\"content\";s:45:\"Image Optimization Tests \u2013 Before and After\";s:5:\"depth\";i:2;}i:12;a:4:{s:5:\"level\";i:3;s:2:\"id\";s:33:\"results-before-image-optimization\";s:7:\"content\";s:33:\"Results Before Image Optimization\";s:5:\"depth\";i:3;}i:13;a:4:{s:5:\"level\";i:3;s:2:\"id\";s:41:\"results-after-optimole-image-optimization\";s:7:\"content\";s:41:\"Results After Optimole Image Optimization\";s:5:\"depth\";i:3;}i:14;a:4:{s:5:\"level\";i:2;s:2:\"id\";s:29:\"other-ways-to-optimize-images\";s:7:\"content\";s:29:\"Other Ways to Optimize Images\";s:5:\"depth\";i:2;}i:15;a:4:{s:5:\"level\";i:3;s:2:\"id\";s:12:\"lazy-loading\";s:7:\"content\";s:12:\"Lazy loading\";s:5:\"depth\";i:3;}i:16;a:4:{s:5:\"level\";i:3;s:2:\"id\";s:22:\"svgs-and-vector-images\";s:7:\"content\";s:22:\"SVGs and Vector Images\";s:5:\"depth\";i:3;}i:17;a:4:{s:5:\"level\";i:3;s:2:\"id\";s:32:\"use-content-delivery-network-cdn\";s:7:\"content\";s:34:\"Use Content Delivery Network (CDN)\";s:5:\"depth\";i:3;}i:18;a:4:{s:5:\"level\";i:3;s:2:\"id\";s:21:\"convert-gifs-to-video\";s:7:\"content\";s:21:\"Convert GIFs to Video\";s:5:\"depth\";i:3;}i:19;a:4:{s:5:\"level\";i:3;s:2:\"id\";s:14:\"smart-cropping\";s:7:\"content\";s:14:\"Smart cropping\";s:5:\"depth\";i:3;}i:20;a:4:{s:5:\"level\";i:2;s:2:\"id\";s:11:\"wrapping-up\";s:7:\"content\";s:11:\"Wrapping Up\";s:5:\"depth\";i:2;}}}","a:2:{s:17:\"_uagb_toc_version\";s:10:\"1784079637\";s:18:\"_uagb_toc_headings\";a:21:{i:0;a:4:{s:5:\"level\";i:2;s:2:\"id\";s:26:\"what-is-image-optimization\";s:7:\"content\";s:27:\"What Is Image Optimization?\";s:5:\"depth\";i:2;}i:1;a:4:{s:5:\"level\";i:2;s:2:\"id\";s:29:\"benefits-of-optimizing-images\";s:7:\"content\";s:29:\"Benefits of Optimizing Images\";s:5:\"depth\";i:2;}i:2;a:4:{s:5:\"level\";i:2;s:2:\"id\";s:27:\"types-of-image-optimization\";s:7:\"content\";s:27:\"Types of Image Optimization\";s:5:\"depth\";i:2;}i:3;a:4:{s:5:\"level\";i:2;s:2:\"id\";s:32:\"how-to-optimize-wordpress-images\";s:7:\"content\";s:32:\"How to optimize WordPress images\";s:5:\"depth\";i:2;}i:4;a:4:{s:5:\"level\";i:3;s:2:\"id\";s:42:\"how-to-optimize-images-for-web-performance\";s:7:\"content\";s:42:\"How to optimize images for Web Performance\";s:5:\"depth\";i:3;}i:5;a:4:{s:5:\"level\";i:4;s:2:\"id\";s:24:\"optimize-images-manually\";s:7:\"content\";s:24:\"Optimize Images Manually\";s:5:\"depth\";i:4;}i:6;a:4:{s:5:\"level\";i:4;s:2:\"id\";s:35:\"optimizing-images-with-online-tools\";s:7:\"content\";s:35:\"Optimizing Images with Online Tools\";s:5:\"depth\";i:4;}i:7;a:4:{s:5:\"level\";i:3;s:2:\"id\";s:41:\"use-a-wordpress-plugin-to-optimize-images\";s:7:\"content\";s:41:\"Use a WordPress Plugin to Optimize Images\";s:5:\"depth\";i:3;}i:8;a:4:{s:5:\"level\";i:4;s:2:\"id\";s:49:\"installing-the-optimole-image-optimization-plugin\";s:7:\"content\";s:49:\"Installing the Optimole Image Optimization Plugin\";s:5:\"depth\";i:4;}i:9;a:4:{s:5:\"level\";i:4;s:2:\"id\";s:31:\"optimizing-images-with-optimole\";s:7:\"content\";s:31:\"Optimizing Images with Optimole\";s:5:\"depth\";i:4;}i:10;a:4:{s:5:\"level\";i:3;s:2:\"id\";s:38:\"benefits-of-image-optimization-plugins\";s:7:\"content\";s:38:\"Benefits of Image Optimization Plugins\";s:5:\"depth\";i:3;}i:11;a:4:{s:5:\"level\";i:2;s:2:\"id\";s:41:\"image-optimization-tests-before-and-after\";s:7:\"content\";s:45:\"Image Optimization Tests \u2013 Before and After\";s:5:\"depth\";i:2;}i:12;a:4:{s:5:\"level\";i:3;s:2:\"id\";s:33:\"results-before-image-optimization\";s:7:\"content\";s:33:\"Results Before Image Optimization\";s:5:\"depth\";i:3;}i:13;a:4:{s:5:\"level\";i:3;s:2:\"id\";s:41:\"results-after-optimole-image-optimization\";s:7:\"content\";s:41:\"Results After Optimole Image Optimization\";s:5:\"depth\";i:3;}i:14;a:4:{s:5:\"level\";i:2;s:2:\"id\";s:29:\"other-ways-to-optimize-images\";s:7:\"content\";s:29:\"Other Ways to Optimize Images\";s:5:\"depth\";i:2;}i:15;a:4:{s:5:\"level\";i:3;s:2:\"id\";s:12:\"lazy-loading\";s:7:\"content\";s:12:\"Lazy loading\";s:5:\"depth\";i:3;}i:16;a:4:{s:5:\"level\";i:3;s:2:\"id\";s:22:\"svgs-and-vector-images\";s:7:\"content\";s:22:\"SVGs and Vector Images\";s:5:\"depth\";i:3;}i:17;a:4:{s:5:\"level\";i:3;s:2:\"id\";s:32:\"use-content-delivery-network-cdn\";s:7:\"content\";s:34:\"Use Content Delivery Network (CDN)\";s:5:\"depth\";i:3;}i:18;a:4:{s:5:\"level\";i:3;s:2:\"id\";s:21:\"convert-gifs-to-video\";s:7:\"content\";s:21:\"Convert GIFs to Video\";s:5:\"depth\";i:3;}i:19;a:4:{s:5:\"level\";i:3;s:2:\"id\";s:14:\"smart-cropping\";s:7:\"content\";s:14:\"Smart cropping\";s:5:\"depth\";i:3;}i:20;a:4:{s:5:\"level\";i:2;s:2:\"id\";s:11:\"wrapping-up\";s:7:\"content\";s:11:\"Wrapping Up\";s:5:\"depth\";i:2;}}}"],"_uag_page_assets":["a:9:{s:3:\"css\";s:4365:\".uagb-block-b1aecb9f.wp-block-uagb-table-of-contents{text-align: left;}.uagb-block-b1aecb9f .uagb-toc__list-wrap li a{color: #54595F;}.uagb-block-b1aecb9f .uagb-toc__wrap .uagb-toc__title-wrap{justify-content: left;}.uagb-block-b1aecb9f .uagb-toc__wrap .uagb-toc__title{justify-content: left;}.uagb-block-b1aecb9f .uagb-toc__wrap{border-top-width: 1px;border-left-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-top-left-radius: 6px;border-top-right-radius: 6px;border-bottom-left-radius: 6px;border-color: #333;border-style: solid;padding-left: 30px;padding-right: 30px;padding-top: 30px;padding-bottom: 30px;background: #fff;width: 100%;}.uagb-block-b1aecb9f .uagb-toc__list-wrap{column-count: 1;overflow: hidden;text-align: left;}.uagb-block-b1aecb9f .uagb-toc__list-wrap > ul.uagb-toc__list > li:first-child{padding-top: 0;}.uagb-block-b1aecb9f .uagb-toc__list-wrap ul.uagb-toc__list:last-child > li:last-child{padding-bottom: 0;}.uagb-block-b1aecb9f .uagb-toc__list .uagb-toc__list{list-style-type: disc !important;}.uagb-block-b1aecb9f .uagb-toc__title{font-weight: Default;font-size: 20px;}.uagb-block-b1aecb9f .uagb-toc__list-wrap ol li a{text-decoration: underline;}@media only screen and (max-width: 976px) {.uagb-block-b1aecb9f .uagb-toc__list-wrap{column-count: 1;overflow: hidden;text-align: left;}.uagb-block-b1aecb9f .uagb-toc__list-wrap > ul.uagb-toc__list > li:first-child{padding-top: 0;}.uagb-block-b1aecb9f .uagb-toc__list-wrap ul.uagb-toc__list:last-child > li:last-child{padding-bottom: 0;}}@media only screen and (max-width: 767px) {.uagb-block-b1aecb9f .uagb-toc__list-wrap{column-count: 1;overflow: hidden;text-align: left;}.uagb-block-b1aecb9f .uagb-toc__list-wrap > ul.uagb-toc__list > li:first-child{padding-top: 0;}.uagb-block-b1aecb9f .uagb-toc__list-wrap ul.uagb-toc__list:last-child > li:last-child{padding-bottom: 0;}}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape-top svg{width: calc( 100% + 1.3px );}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape.uagb-container__shape-top .uagb-container__shape-fill{fill: rgba(51,51,51,1);}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape-bottom svg{width: calc( 100% + 1.3px );}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape.uagb-container__shape-bottom .uagb-container__shape-fill{fill: rgba(51,51,51,1);}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__video-wrap video{opacity: 1;}.wp-block-uagb-container.uagb-is-root-container .uagb-block-debf2792{max-width: 100%;width: 100%;}.wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-debf2792 > .uagb-container-inner-blocks-wrap{--inner-content-custom-width: min( 100%, 1200px);max-width: var(--inner-content-custom-width);width: 100%;flex-direction: column;align-items: center;justify-content: center;flex-wrap: nowrap;row-gap: 0px;column-gap: 0px;}.wp-block-uagb-container.uagb-block-debf2792{box-shadow: 0px 0px   #00000070 ;padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px !important;margin-bottom: 0px !important;margin-left: 0px;margin-right: 0px;overflow: visible;border-color: inherit;row-gap: 0px;column-gap: 0px;}@media only screen and (max-width: 976px) {.wp-block-uagb-container.uagb-is-root-container .uagb-block-debf2792{width: 100%;}.wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-debf2792 > .uagb-container-inner-blocks-wrap{--inner-content-custom-width: min( 100%, 1024px);max-width: var(--inner-content-custom-width);width: 100%;}.wp-block-uagb-container.uagb-block-debf2792{padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px !important;margin-bottom: 0px !important;margin-left: 0px;margin-right: 0px;}}@media only screen and (max-width: 767px) {.wp-block-uagb-container.uagb-is-root-container .uagb-block-debf2792{max-width: 100%;width: 100%;}.wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-debf2792 > .uagb-container-inner-blocks-wrap{--inner-content-custom-width: min( 100%, 767px);max-width: var(--inner-content-custom-width);width: 100%;flex-wrap: wrap;}.wp-block-uagb-container.uagb-block-debf2792{padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px !important;margin-bottom: 0px !important;margin-left: 0px;margin-right: 0px;}}\";s:2:\"js\";s:265:\"document.addEventListener(\"DOMContentLoaded\", function(){ window.addEventListener( 'load', function(){\n\tUAGBTableOfContents._run( {\"mappingHeaders\":[false,true,true,false,false,false],\"scrollToTop\":false,\"makeCollapsible\":false}, '.uagb-block-b1aecb9f' );\n} );\n });\";s:18:\"current_block_list\";a:8:{i:0;s:14:\"core\/paragraph\";i:1;s:22:\"uagb\/table-of-contents\";i:2;s:12:\"core\/heading\";i:3;s:9:\"core\/list\";i:4;s:14:\"core\/list-item\";i:5;s:10:\"core\/image\";i:6;s:14:\"uagb\/container\";i:7;s:14:\"core\/shortcode\";}s:8:\"uag_flag\";b:1;s:11:\"uag_version\";s:10:\"1784070130\";s:6:\"gfonts\";a:0:{}s:10:\"gfonts_url\";s:0:\"\";s:12:\"gfonts_files\";a:0:{}s:14:\"uag_faq_layout\";b:0;}"]},"uagb_featured_image_src":{"full":["https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/optimizing-images-on-your-wordpress-site.jpg",1200,630,false],"thumbnail":["https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/optimizing-images-on-your-wordpress-site-150x150.jpg",150,150,true],"medium":["https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/optimizing-images-on-your-wordpress-site-300x158.jpg",300,158,true],"medium_large":["https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/optimizing-images-on-your-wordpress-site-768x403.jpg",768,403,true],"large":["https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/optimizing-images-on-your-wordpress-site-1024x538.jpg",1024,538,true],"1536x1536":["https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/optimizing-images-on-your-wordpress-site.jpg",1200,630,false],"2048x2048":["https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/optimizing-images-on-your-wordpress-site.jpg",1200,630,false],"trp-custom-language-flag":["https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/optimizing-images-on-your-wordpress-site.jpg",18,9,false]},"uagb_author_info":{"display_name":"Pratik Chaskar","author_link":"https:\/\/git-staging.wpastra.com\/es\/author\/pratikc\/"},"uagb_comment_info":11,"uagb_excerpt":"Images are incredibly important for helping engagement, adding interest and breaking up what otherwise would be a wall of text. Images do bring challenges though. They are often large files that can slow down your page load speed. As Google and most web users prefer faster load times, this is something we absolutely have to&hellip;","_links":{"self":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/posts\/55001"}],"collection":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/comments?post=55001"}],"version-history":[{"count":0,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/posts\/55001\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/media\/55016"}],"wp:attachment":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/media?parent=55001"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/categories?post=55001"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/tags?post=55001"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}