127 | Cómo optimizar imágenes para la web

En el episodio 127 de WordPress semanal te hablo de qué quiere decir exactamente optimizar imágenes para la web, de los beneficios que te va a suponer y de cómo puedes ponerlo en práctica fácilmente. Vamos allá. Hola, hola, Soy Gonzalo, de GonzaloNamarro es y bienvenidos a WordPress Semanal en el podcast en el que aprendes WordPress de principio a fin. Porque ya lo sabes, no hay mayor satisfacción ni mejor inversión que la de crear y gestionar tu propia página web con WordPress. Y hoy vamos a hablar precisamente de un aspecto fundamental de la gestión, o si quieres, la optimización de tu página web, que es las imágenes. ¿Cómo debes tratar este aspecto tan fundamental y tan, digamos, normal? Porque las imágenes es algo que estamos subiendo constantemente a nuestra página web, pues qué tratamiento debemos darle a esto para que no suponga un perjuicio en el rendimiento de nuestra web o en cualquier otro aspecto de los que vamos a hablar a continuación. Sí, el episodio va a ir un poquito en la línea, primero de tomar conciencia de verdad de qué significa todo esto, de qué es optimizar una imagen para la web, de por qué es importante, de todo lo que te pueda aportar. Y luego, por supuesto, te voy a decir cómo puedes hacer para llevarlo a cabo. Además tengo tutoriales muy, muy, muy concretos, así que creo que tengo todo cubierto para darte las herramientas que necesitas. Pero antes, como siempre, vamos con las novedades de Gonzalo Navarro es. Tenemos un nuevo vídeo de la Zona Código. Ya sabéis que todos los martes saco un vídeo nuevo todas las semanas sobre cómo modificar tu web a través de código, pero sin que sepas código. Te explico ese código en concreto que te muestro, te digo qué hace, te digo cómo tienes que usarlo, cómo copiarlo de mi web, cómo pegarlo, dónde pegarlo y qué vas a conseguir con ese código. Y en este caso os enseño a crear un efecto de texto borroso a través de CSS. Y esto de texto borroso, pues es algo bastante curioso, porque no es una propiedad que venga con el CSS, sino que es un pequeño truquito o bueno, jugando un poco con las distintas propiedades que tiene el CSS, pues se puede conseguir este efecto, al igual que muchos otros. Y esto no es algo que me haya inventado yo, que hay tantos recursos y tanta gente que son cracks en esto, pues que van saliendo esos truquitos. Y esto es un efecto muy chulo, es bastante original, lo puedes usar por ejemplo, si quieres dar la sensación de que es un contenido que no se puede leer, ¿Vale? Bueno, no sé en qué casos te gustaría utilizarlo, pero básicamente consigues que el texto quede borroso y lo puedes. Puedes hacer que quede más o menos borroso, es decir, que incluso quede. Que no se pueda leer prácticamente lo que ponga o que sí se pueda entrever lo que pone detrás de ese texto borroso. En fin, mejor verlo que escucharlo de mí. Así que si estáis apuntados y sois suscriptores, pues lo tenéis ya a vuestra disposición y si no, pues os podéis apuntar para acceder a este vídeo y al resto de 80 vídeos de la zona código y al resto de. No sé cuántos cursos hay ya, pero vamos, muchísimos cursos y a soporte conmigo y a todo lo demás, ¿Vale? Bien, esto es en cuanto al vídeo de la zona código de la semana. Después tenemos el curso del mes que estamos haciendo ahora, el curso de Child Themes de WordPress, es el que he lanzado para este mes y bueno, no voy a hablar más de él porque ya hablé de él en su momento, pero lo tenéis ahí a vuestra disposición. Así que sin más dilación, nos vamos con el plugin de la semana, que es para crear galerías de vídeo de Vimeo. Ya sabéis que Vimeo es ese servicio en el que puedes hospedar tus vídeos y después los puedes incrustar donde tú quieras o usarlos directamente en Vimeo, como YouTube, pero tiene un perfil un poco más diferente de público. Se suele utilizar, por ejemplo, como en mi caso, si quieres hospedar vídeos para un curso o si van a ser vídeos más corporativos que no te importan mucho que rankeen, digamos, en YouTube, porque en YouTube, pues si buscas tráfico es mucho mejor tenerlos en YouTube que tenerlos en Vimeo, pero si no, si es para otro tipo de cosas como eso, como vídeos corporativos o vídeos que forman parte de algo por lo que tus clientes van a pagar, pues todo eso Vimeo es una pasada. Y el plugin que os traigo se llama Vimeography y te permite crear galerías de esos vídeos que tengas hospedados en Vimeo, pero te permite hacerlo de forma óptima, y digo óptima porque tú puedes coger ya galerías de Vimeo, puedes crearlas en Vimeo e incrustarlas en tu web, pero con ese funcionamiento se cargan todos los vídeos a la vez, mientras que lo que hace este plugin es que te carga simplemente el vídeo que se quiera ver en el momento y bueno, las miniaturas que le pongas a los vídeos. Así que en este sentido te da un poquito más un mejor rendimiento. Luego es cierto que el plugin carga sus archivos todo el rato, aunque no estés en una página en la que tengas una galería, pues también se van a estar cargando los archivos de este plugin, pero bueno, eso pasa con prácticamente todos, se pueden, digamos forzar para que solo se carguen en un lugar, pero vamos, tampoco es que generen demasiado impacto, simplemente esto lo digo por curiosidad porque yo uso el plugin, entonces lo he trasteado bastante a ver qué impacto tiene en la web, pero en fin, entre sus características tienes la posibilidad de añadir directamente a WordPress vídeos que ya tuvieras subidos a Vimeo, es decir, desde tu mismo WordPress cuando estás editando una página, puedes elegir los vídeos directamente desde ahí y puedes hacer lo mismo con las galerías, porque puedes incrustar vídeos, puedes incrustar galerías y luego puedes editar su apariencia usando temas prediseñados. Aunque, aunque esto son de pago, estos temas hay creo que un par, dos o tres que son gratuitos y luego tienes unos cuantos que puedes comprar de pago. Y luego también trae, como te decía, las opciones para un mejor rendimiento en la carga de los vídeos. Esto es la versión gratuita, luego tienes una versión Pro con más opciones de personalización, Vimeography, este es el episodio 127, así que ahí podéis encontrar el enlace. Y ahora ya sí, vamos con el tema central del programa, cómo optimizar imágenes para la web. En primer lugar vamos a sentar las bases. ¿Qué quiere decir eso de optimizar imágenes? Porque la palabra optimizar la decimos muy a la ligera, pero no es lo mismo optimizar para una cosa que optimizar para otra. En el caso concreto de las imágenes es que básicamente las hagamos más pequeñas, que el archivo pese menos. Las imágenes pueden hacer más lenta la carga de tu web, de hecho, según os dejo un estudio de una web que está muy bien porque te da un archivo del estado de la web en relación con muchos baremos, pero en este caso es con el peso de las webs se llama HTTP archive. Os dejo el enlace justo aquí donde en la parte que lo comento del esquema del programa, donde ahora mismo, porque está siempre actualizado, estos datos, ahora mismo cuando estoy grabando esto, que es 17 de septiembre del 2018 o bueno, no sé si quizás sea de agosto, creo que tienen como un mes de margen, es decir, si lo consultas en septiembre, pues los datos más recientes son de agosto, no estoy seguro, pero vamos, si vais al enlace vais a ver los datos más actualizados que tengan ellos. Y actualmente dicen que el 50% del peso de las webs corresponde a las imágenes. El 50 por ciento, la mitad, mucho más que los archivos CSS, que los archivos JavaScript, que todo esto, que muchas veces nos volvemos locos para intentar optimizar, intentar para que nuestra web cargue más rápido. Pues bien, las imágenes, solo las imágenes son el 50%. Así que si conseguimos optimizar esto, pues conseguimos optimizar una parte importantísima de nuestra web y esto es decir, que tengamos mucho peso por las imágenes. No tengo que deciros que afecta negativamente la experiencia de los usuarios porque puede hacer que la web cargue más lento y eso no gusta a nadie. Y entonces, como os decía, optimizar imágenes no es más que reducir el peso del archivo. Y esto básicamente se puede hacer o con plugins o con programas específicos, ya sean servicios que hay por ahí online o programas que tú tengas de edición de vídeo en tu ordenador. Bien, una vez que sabemos a grandes rasgos de qué estamos hablando, ¿Qué beneficios te va a aportar que optimices las imágenes? Es decir, si ahora no estás haciendo nada concreto para optimizarlas, si empiezas a optimizarlas, que ya veremos que es muy fácil, ¿Qué beneficios inmediatos vas a tener? Número uno, vas a mejorar la velocidad de carga de tu web seguro. Número dos, como consecuencia de mejorar la velocidad de carga de tu web, va a mejorar positivamente el SEO de tu web, el posicionamiento web, porque ya sabéis que esto es un factor que Google tiene en cuenta, la velocidad de carga de la web, un aspecto que la gente no suele decir, pero que para mí es muy importante, va a ser mucho más rápido que hagas copias de seguridad de tu web. Si tus archivos pesan menos programa que uses para hacer la copia de seguridad, se va a hacer mucho más rápido esa copia. Y yo no sé para ti, pero para mí esto es importante y Luego en términos de recursos, por supuesto va a afectar mucho menos a tu hosting, es decir, vas a usar menos ancho de banda porque se van a requerir menos recursos para cargar esa imagen si pesa menos y por supuesto vas a ocupar menos espacio en el servidor que si no tienes mucho espacio contratado, pues esto te va a venir de perlas. Entonces si todos estos beneficios te convencen, nos movemos hacia adelante y vamos a ver ahora cómo optimizar imágenes para la web. Y aquí te voy a remitir a un tutorial que tengo que se llama Cómo optimizar imágenes en WordPress, que te dejo el enlace justo aquí donde lo comento también en la parte de enlaces de este episodio, que recordad es el 127 y y ahí te explico paso a paso qué tienes que hacer para actualizar las imágenes, perdón, para optimizarlas en concreto para WordPress. Por supuesto, primero te explico cómo analizar tu web en busca de imágenes que necesiten ser optimizadas, después te explico cómo optimizar las imágenes manualmente y después te explico cómo poner en marcha un sistema automático de optimización de imágenes para que se haga cada vez que subas una, que se optimicen sin que tú tengas que hacer nada, que lo tengas ya todo en piloto automático. Así que con eso creo que tengo, te tengo cubierto con la parte práctica de cómo puedes digamos llevar todo esto a cabo. Pero vamos a hablar de algunas cositas dentro de esto de cómo optimizar imágenes para la web. Primero, lo ideal es que encuentres un punto óptimo entre el menor tamaño del archivo posible, del archivo de la imagen, pero manteniendo una calidad aceptable. Esto es de lógica, pero es con lo que tienes que jugar cuando estés a lo mejor utilizando un programa de compresión, tú puedes ir viendo si se pierde calidad, sino cuánto menos pesa ese archivo y puedes ir jugando y decir pues a lo mejor me conviene perder un pelín de calidad pero que este archivo pese muchísimo menos y jugar con eso dependiendo de para qué vayas a usar la imagen y demás, porque cada caso puede ser distinto. Y luego otro consejito que te doy es que siempre, normalmente o muchas veces vas a editar una imagen con Photoshop o con Pixelmator o con el programa que tengas ahí ya puedes hacer algún ajuste de compresión y algún ajuste de optimización pues hazlo, ¿Vale? Ya que puedes hacerlo ahí, pues hazlo y ya la imagen va a pesar menos, que después la vas a pasar, pero un programa específico de compresión muy bueno como los que vamos a hablar después, pues fantástico, o que después se va a hacer el proceso automático en tu web, pues también fantástico, pero ya que tienes la opción mientras la estás editando, pues hazlo porque no te cuesta nada. Y luego te quiero hablar de dos factores que entran en juego en esto de la optimización de la web para que entiendas bien cuando se están optimizando, qué es lo que estás optimizando o qué es lo que estás editando. Por un lado tenemos el formato del archivo, esto es importante a la hora de elegir cómo optimizar nuestra web para que pese menos. Y después el tipo de compresión que vamos a utilizar durante el proceso. Básicamente los formatos con los que te vas a encontrar a la hora de optimizar una imagen son PNG, JPG y GIF rápidamente. PNG es cuando quieres utilizar una imagen con mayor calidad, pero también ten en cuenta que va a tener mayor tamaño. JPG pesan menos y lo bueno es que puedes ajustar muchísimo la calidad de esa imagen. Si es JPG tienes mucho margen de elegir si quieres más menos calidad utilizando los programas que vemos en el tutorial que te comento y otros programas que vamos a comentar de aquí en adelante. Y luego GIF que es la única opción prácticamente que tienes si quieres imágenes animadas y que vemos, no sé si en el episodio anterior o en el anterior, pero te dejo el enlace, vemos un episodio dedicado justo a los gifs y cómo usarlos de la mejor forma en cuanto a rendimiento y en cuanto a estrategias para cuándo usarlo, pues cómo hacerlo. Así que ahí también te explico cómo puedes optimizar gifs. Y luego lo importante o un aspecto que te quiero explicar, aunque luego no te debes preocupar demasiado, pero que está bien que lo entiendas, que son dos tipos de compresión que existen, uno es Lossy y otro es Lossless. Básicamente Lossy es el más recomendado, el más utilizado, porque mediante este proceso lo que consigues es eliminar datos de la imagen y puedes eliminar prácticamente tantos como quieras hasta el punto de pasarte y que quede la imagen pixelada, ¿Vale? Este es el método de digamos más agresivo, pero con el que consigues reducir más el tamaño. Y aquí es donde te decía que puedes ir jugando, por ejemplo, ahí os lo explico en el tutorial que os digo, pero hay programas online en el que tú subes la imagen y tú puedes elegir qué porcentaje quieres quitarle de peso a esa imagen y vas diciendo venga pues voy a probar con quitarle el 80% y ves si se pierde calidad o si para ti, para tu ojo humano ves que hay pérdida de calidad, que ves que admite un poquito más de reducción, pues se la das, que ves que no, que te has pasado, pues la reduces un poco menos. Sí hombre, ten en cuenta que este proceso no es reversible, es decir, si tú coges la imagen original, la subes, la reduces al 90%, te descargas esa imagen reducida, pues esa imagen que ya ha reducido y que la tienes en tu ordenador no vas a poder volver a darle la calidad, pero no pasa nada porque tienes la original y puedes repetir el proceso con la original y quitarle, hacer que pierda menos peso, es decir, menos calidad. También este tipo de reducción Losi se suele utilizar para los JPG y como anécdota o como cosa que si no lo sabes es importante que lo sepas, cuando tú subes un JPG a WordPress, ellos automáticamente lo reducen, hacen una compresión automática y usan este método. El losi antes lo que hacían era que si tu imagen tiene un 100 % de calidad, cuando tú la subes ellos se la bajaban al 90 y ahora desde hace ya varias versiones, creo que la 4.5 por ahí, hacen una mayor reducción todavía del 100% con el que tú la subes, pues la reducen y la dejan al 82%. Esto se puede quitar por código, no sé si lo comento en algún sitio, lo vemos en la zona código o no, pero os voy a intentar dejar un enlace por si queréis hacerlo para si no os interesa que WordPress reduzca el peso y haga esta optimización de forma automática, pues lo podéis evitar, es una función muy facilita que se pone y ya está. Y luego como otra curiosidad comentar que cuando tú pasas tu web, por ejemplo por el Google Page Insights, ya sabéis, para medir la velocidad de carga de tu web, pues si ven que tienes imágenes que pesan mucho, el método que te recomiendan ellos es LOSSI, lógicamente como es con el que más se pierde, pues te lo recomiendan, pero vamos, esto simplemente curiosidad. Y después tenemos el segundo método de compresión o tipo de compresión que es Lossless. Esto lo único que hace, o bueno, la forma más sencilla de explicar qué es lo que esto hace es que elimina metadatos innecesarios, es decir, no información de la imagen en sí, no píxeles, no colores, no ese tipo de datos, sino metadatos, información que pueda llevar la imagen, como por ejemplo cuando tenemos un archivo de audio y decimos que el autor es Gonzalo Navarro y que el título del álbum es WordPress semanal y todo eso, pues también ese tipo de información, pero en la imagen, que muchas veces cuando te descargas una imagen de un banco de imágenes, pues va lleno de metadatos, de quién es el fotógrafo, de una descripción de la imagen, de etiquetas. Pues el lossless elimina todos estos datos innecesarios, metadatos mejor dicho, con lo cual esto no va a afectar a la calidad de la imagen, pero como contrapartida va a reducir el peso mucho menos. Y aquí pues lo que se suele reducir con este método son los PNG, aunque también se pueden reducir los JPG y el PNG, aunque en teoría sólo se podría reducir con lossless también. En realidad se puede aplicar el lossy y que pierda peso también el PNG. Sí, pero con esto no os quiero liar, al contrario, quiero que sepáis que hay dos tipos de compresión, uno que elimina datos de la imagen en sí y que puede hacer que pierda píxeles si te pasas, y otro que quita metainformación y que no hace que pierda calidad esa imagen, pero que se reduce mucho menos. Y casi todas las imágenes de las que te voy a hablar utilizan los dos métodos, así que tampoco debes preocuparte demasiado sobre esto, simplemente quería que lo conocieras. Bien, vamos al siguiente paso. Herramientas con las que puedes optimizar las imágenes y algunos programas también con los que puedes hacerlo. Hay muchísimas opciones de pago y gratuitas. En el tutorial que te he comentado antes de cómo optimizar imágenes en WordPress, te recomiendo los más típicos y además vemos paso a paso con capturas de pantalla cómo hacerlo, pero bueno, por supuesto, los que tengas en tu ordenador, Photoshop, Gimp, te puedes descargar uno que se llama imageresize. Org, bueno, vas ahí y te lo descargas. Hay uno que se llama PNG Quant, otro que se llama Image Opt in, que es bastante conocido. Todos esos son programas que te puedes descargar a tu ordenador. Y luego servicios online hay miles, tú pones optimizar PNG, optimizar JPG online y elige el que quieras. En el tutorial por ejemplo que te digo, a ver voy a echar un vistazo, vemos cómo hacerlo con optimisila, pero vamos, es que hay miles, básicamente todos funcionan igual, lo abres, arrastras las imágenes, le das a comprimir, te las comprimes, ves si te convence la calidad, si no se la puedes, incluso lo puedes comprimir más todavía si quieres, luego te descargas la imagen y ya está, ya la tienes comprimida y ves cuánto te dice. Además antes pesaba esto, ahora pesa esto, has ahorrado el X por ciento. Son muy fáciles de utilizar. Y luego te quiero hablar de un punto interesante, que es esto de redimensionar las imágenes, porque siempre habrás escuchado, incluso yo lo he dicho muchas veces y en mis tutoriales lo digo, que siempre se ha dicho que cuando subamos las imágenes a WordPress la subamos con el mayor tamaño con el que la vayamos a usar. ¿Es decir, si el ancho de mi web donde voy a mostrar las imágenes, pues es como máximo de 900 píxeles o de 800 y algo, no tiene sentido que subas una imagen de 2000 píxeles de ancho, porque luego además, si tú la quieres mostrar por ejemplo con el tamaño medio, pues hasta ahora se cogía el tamaño, el de 2000 píxeles, vale? Se cogía el de 2000 píxelES, aunque se mostrara la imagen de 300 píxeles de ancho. Pero esto ya no es tan importante, porque WordPress ya trabaja muy bien las imágenes responsive, no recuerdo desde qué versión de WordPress, pero hace relativamente poco y ahora el navegador descarga la versión de la miniatura que corresponde y y no el tamaño original. Es decir, si tú sabes que cuando subes una imagen, WordPress te crea miniaturas, una grande, una mediana y una pequeña, salvo que tú crees más o salvo que tu theme venga también con una específica. Pero vamos, que WordPress automáticamente crea varias versiones con distintos tamaños de la imagen que tú has subido de la original. Y ahora si tú cargas una de 300 píxeles, la mediana por ejemplo, el navegador que uses, Chrome, Firefox, lo que sea, no va a cargar la original como antes sino que a través de CSS carga la mediana, o sea que en este sentido está mucho mejor optimizado que antes. Por supuesto te puedes seguir ahorrando subir la imagen de 2000 píxeles porque te va a ocupar un espacio en el servidor, va a ocupar un espacio físico, pero a la hora de la carga, si tú esa imagen que tenía 2000 la subes mediana y tiene 300 píxeles, no se va a cargar la de 2000, se va a cargar la De 300. Esto es una mejora muy importante que hizo WordPress y que tampoco se ha hablado mucho de ella, pero es fantástica. Luego por supuesto podéis editar los tamaños de miniatura en Los ajustes de WordPress, si queréis que la mediana no sea 300 píxeles y sea, yo que sé, 500, lo podéis hacer. ¿Esto lo vemos en el curso de WordPress básico y creo que también lo vemos específicamente en el curso de velocidad, vemos cómo hacerlo, como una táctica, vale? Y luego también hay un plugin interesante que te quiero recomendar que se llama Insanity y te permite que no se guarde el tamaño original de la imagen que subas. Por ejemplo, si subo esta imagen de 2000 píxeles, pero yo tengo tres tamaños, uno grande de 900 píxeles, otro mediano de 450 y una miniatura de 150, que WordPress cree esas tres miniaturas y después este plugin, el Insanity que te digo, elimine la original, con lo cual te evitas tener esa de 2000 y simplemente tienes las tres versiones que te crea WordPress, o cuatro o cinco, las que tengas tú. ¿Sí? Una vez comentado este detallito, vamos a ver ahora, porque hemos visto herramientas de optimización de imágenes y programas que puedes tener en tu ordenador, pero ahora vamos a ver plugins de optimización de imágenes que puedes utilizar. En el tutorial que te digo de cómo optimizar imágenes en WordPress, ahí simplemente comento dos WordPress Match y EW Image Optimizer, que eran en el momento en el que hice el tutorial, pues un poco los más famosos. También tienes uno que es de pago, bueno, tiene una versión gratuita, pero yo por ejemplo ahora estoy utilizando la de pago en una de mis webs que se llama Short Pixel Image Optimizer, que también está muy bien. Tienes uno gratuito de webempresa que se llama Optimizador IO, que también está muy bien y hay muchos más, ¿Vale? Estos cuatro que te comento están muy bien porque guardan las imágenes en su servidor, hacen este proceso, lo hacen en su servidor y no en el tuyo, con lo cual tú imagínate si se ponen a hacer todo este proceso de optimizar imágenes y demás y se ponen a hacerlo en tu servidor, la que pueden liar, entonces lo hacen en el suyo. Asegúrate de que cuando elijas un plugin de estos, vamos, si eliges estos de los más famosos no vas a tener problema, pero asegúrate, como vamos a hablar ahora en las mejores prácticas que te voy a dar, que sea así. Y todos estos están bien, y todos estos utilizan los dos sistemas de compresión, losi y lossless, ¿Vale? Y bien, pues para terminar algunas mejores prácticas, algunos consejillos para esto de optimizar las imágenes para la web. Punto número uno, como te decía antes, si usas un plugin de WordPress, asegúrate de que comprima las imágenes en su servidor y no en el tuyo. Como te digo, si usas uno de los que te he dicho antes, no tienes que preocuparte en absoluto. Por otro lado, sobre todo si usas imágenes de mucho peso, si eres fotógrafo, si eres un bloguero de no lo sé, de comida, de moda, de lo que sea, y no te puedes permitir perder nada de calidad en tus imágenes, entonces quizás la mejor opción para ti sea que utilices una CDN para servir las imágenes. Esto puedes usar alguno de los servicios más famosos, puedes buscar en Google cómo hacerlo, si os interesa mucho me lo decís porque no tengo ningún tutorial al respecto, pero si os interesa puedo enseñaros cómo se hace y esto sobre todo recomendable, como digo, eso si tenéis imágenes de mucho peso, si no, tampoco es tan necesario, yo no lo tengo, por ejemplo. Luego, importante, elimina la información innecesaria de la imagen, así como los metadatos, es decir, la compresión lossless. Si utilizas uno de los programas que hemos visto, no tienes por qué preocuparte, pero para que lo tengas en mente, que también si puedes quitar metadatos e información innecesaria y eso te va a ahorrar algo de espacio, pues fantástico. Y luego otra cosa que te quería comentar, que no lo he hablado mucho, pero hay veces en las que para poner, no lo sé, un elemento concreto, si quieres poner pues unos bullet points, unas listas si las quieres poner con unos efectos yulos. Muchas veces lo que hace la gente es que sube imágenes o sube iconos, pues si puedes hacerlo por CSS, que es lo que menos te va a ocupar, hazlo por CSS y evítate subir una imagen. Muchas veces, sobre todo por inexperiencia o porque no sabemos hacerlo, pues subimos una imagen cuando se podría haber hecho un efecto o una forma similar con CSS. Así que siempre que puedas ahórrate una imagen si puedes conseguir un efecto similar o exactamente el mismo utilizando por ejemplo CSS. Siguiente consejo mejor prá guarda las imágenes en un tamaño adecuado. Aunque ya te he explicado esto de que WordPress trabaja mucho mejor esto, ¿Para qué vas a subir una imagen enorme a tu web si no lo necesitas? Si nunca vas a usar una imagen, yo que sé, de 3.000 píxeles o de 2.000, que muchas veces las subimos por subir tal y como están, Ahórrate eso en un momentito, simplemente le das a redimensionar imagen en tu programa de edición y listo. Y luego si vas a usar imágenes grandes en alguna landing o en algo así y te quieres preocupar digamos por el rendimiento óptimo de esa página, entonces te recomiendo que le dediques un poquito más de tiempo a esto de la optimización de la imagen. Y si usas un programa como el que hemos dicho, optimisila de estos online, pues trabájalo un poquito e intenta probar distintos grados de compresión, comprimirla más, comprimirla menos, dedícale un tiempo para ver cuál es el nivel óptimo entre calidad de imagen y peso del archivo y listo, ¿Vale? No tienes que hacerlo con todas las imágenes que vayas a subir porque es un rollo, pero si es una grande que vas a usar en una landing importante o en la home o algo así, entonces sí que te recomiendo que le dediques un pelín de tiempo, aunque sea pues a un par de imágenes que tú sabes que van a ser muy grandes. Luego, a grandes rasgos, en cuanto a los formatos, te recomiendo usar PNG para imágenes con mucho detalle y resoluciones altas y JPG para fotos generales, para pantallazos que no necesites digamos tanta calidad ni tanta nitidez. Luego no lo he comentado, pero puedes utilizar si quieres el Lazy Load, que os dejo un enlace a donde hablo de un plugin que está muy bien para esto. Y esto básicamente está muy bien para una primera carga de la página más rápida. ¿Por qué? Porque Lazy Load, pues ya sabéis y si no os lo comento rápidamente, va retrasando la carga de las imágenes conforme el usuario va haciendo scroll en la página. Es decir, que si el primer pantallazo de nuestra web cuando se carga se ve una imagen nada más, pues sólo se va a cargar una imagen. Que yo empiezo a hacer scroll o Google cuando navega por mi web para ver qué tiene mi web, también conforme va bajando es conforme se van cargando las imágenes. Pero el primer pantallazo donde sólo hay una imagen o no hay ninguna, pues se va a cargar mucho más rápido porque no va a tener que esperar a que se carguen el resto de imágenes. Esto es opcional, yo en mi caso por ejemplo, no uso esto, pero a muchísima gente lo usa y a muchísima gente le va fantásticamente bien. Y de nuevo te dejo un enlace aquí dentro de la parte en la que estoy hablando de mejores prácticas, pues tienes un enlace a un episodio en el que hablo de un plugin sobre el Lazy Load. Y por último, que si exportas la imagen desde un programa de edición, la guardes como optimizada para la web. Esto ya te la va a optimizar según unos criterios específicos para la web y va a pesar menos la imagen y va a estar mejor. ¿Y como es algo sencillo, pues en lugar de exportarla o guardarla como de forma normal, le das a optimizada para la web, que esto casi todos los programas de edición lo traen y listo, que tampoco te cuesta nada y puedes ganar algo, sí? Pues estos son todos los consejos y estos son, digamos, los puntos básicos de este episodio. Si quieres más, si quieres ir más allá, por un lado te recomiendo muy mucho el tutorial que te digo, ahí vemos paso a paso, es una guía sobre técnicamente cómo puedes hacer todo esto que te he comentado hoy. Después también si eres suscriptor, pues tienes el curso de velocidad en WordPress, que ahí vas a aprender también muchísimas cosas. Y si no lo eres, ya sabes que te puedes suscribir sin compromiso. Tienes 15 días de prueba, pruebas, todos los cursos, todos los vídeos de la zona código, me contactas para que te dé soporte y que compruebes tú de primera mano qué tal es mi soporte. Y si pasan los 15 días y quieres seguir, pues no tienes que hacer nada, fantástico. Y si no, pues me contactas oye, Gonzalo, que al final no quiero seguir. No hay problema, te devuelvo los 10 euros y listo, ¿Vale? Sin preguntas. Esto lo hago para que lo probéis. Sí. En fin, a modo de cierre, básicamente, si haces lo que hemos visto en este episodio de comprimir las imágenes, de optimizarlas para la web, vas a conseguir que tanto los motores de búsqueda como los navegadores y sobre todo tus lectores, estén más contentos con tus contenidos. Así que yo creo que algo que tienes que hacer sí o sí si no lo estás haciendo, porque además, como vas a ver en el tutorial que te digo que te dejo, es mucho más fácil de lo que puede parecer. Y luego también me interesa lo que estás haciendo tú ahora mismo. Si ya usas otros métodos o usas programas que son una pasada, que comprimen fantásticamente, o tienes un flujo de trabajo que hace esto súper sencillo, pues también estoy encantado de escucharlo. Me puedes contactar o me puedes escribir a través de Twitter, que te recuerdo que es gonnabarroes, sí, para que esto sea también un poco bidireccional y no sea yo el que te esté soltando aquí toda la charla y que tú no puedas contarme nada al respecto, ¿Vale? Y nada más, si te ha gustado el episodio de hoy y quieres ayudarme a que siga creciendo, a que siga creando episodios como este, ya sabes que hay una forma muy sencilla en la que puedes aportar tu granito de arena y. Y es dejándome una valoración en iTunes. No me canso de agradecértelo si ya lo has hecho, si lo vas a hacer también, porque como siempre te comento, es lo que me permite estar ahí, es lo que permite que cuando buscas WordPress en itunes me encuentren que cada vez tenga más oyentes. Así que de verdad, os lo agradezco mucho, mucho, mucho. Y es muy rápido, ¿Vale? Vas a tu aplicación de podcast, buscas WordPress semanal y ya está, y dejas la reseña que quieras. Y si me escuchas desde otras plataformas, desde iVoox, desde Spotify, desde donde sea, pues lo que puedas hacer, bueno, es, vale, si me puedes dejar un me gusta, si quieres comentarme, que por cierto, contesto a todo, pues también muchas gracias, que no sé si ayudará algo en esas plataformas, pero bueno, por lo menos estamos en contacto y sé si os gusta, sé si no os gusta y Me podéis dejar por supuesto feedback, que eso es bueno para vosotros y para mí, porque así voy mejorando y voy creando mejores episodios. ¿De acuerdo? Nada más por este episodio, nos seguimos escuchando. Adiós.