Cómo optimizar las imágenes para no ralentizar WordPress

Probablemente haya escuchado la expresión de optimización de imágenes, especialmente si agrega muchas imágenes a su sitio web de WordPress. Pero, ¿cómo puedes optimizar tus imágenes en WordPress? Es una pregunta importante, ¡pero la solución es muy simple! Incluso si no está familiarizado con el software de edición de imágenes, como Photoshop o Illustrator, puede optimizar fácilmente sus imágenes y hacer que su sitio sea rápido. En esta publicación, cubriremos todo lo que necesita saber sobre la optimización de imágenes. En primer lugar, explicaremos por qué debe optimizar sus imágenes. Luego examinaremos otros factores que influyen en la rapidez con que se cargan las imágenes en su sitio.
A continuación, cubriremos dos formas importantes de optimizar sus imágenes antes y después de subirlas a su sitio. Cubriremos algunos otros trucos ingeniosos para que su sitio cargue muy rápidamente. ¡Vamos a optimizar!
contenido
¿Qué significa optimizar sus imágenes?
¿Por qué debería optimizar sus fotos?
Cosas para recordar
Las mejores formas de optimizar sus imágenes
Otras buenas prácticas para optimizar las imágenes para la web
Optimización de imágenes y WordPress
¿Qué significa optimizar sus imágenes?

Si bien el término parece complicado, la realidad no lo es. La optimización de imágenes simplemente significa reducirlos a un tamaño de archivo más pequeño, manteniendo una imagen de alta calidad.
El proceso de optimización es esencialmente uno para equilibrar el tamaño del archivo con los detalles de la imagen. Dependiendo del tipo de imagen que use, la naturaleza de su sitio web y muchos otros factores, querrá equilibrar los dos por igual u optimizarlos para uno u otro. En la práctica, la optimización de imágenes es muy fácil. Solo hay dos pasos: optimizar la imagen antes de cargarla en su sitio.
Instale un complemento que optimice automáticamente las imágenes ya cargadas y cualquier imagen nueva en el futuro
¡Esto es realmente todo lo que es! Cualquier otra cosa es solo el buen ajuste de los detalles.
¿Por qué debería optimizar sus fotos?
Hay varias razones por las que necesita optimizar las imágenes. Algunos de ellos pueden no ser obvios. Cubremos seis de la velocidad de carga de página más importante, dispositivos móviles, SEO, copias de seguridad, ancho de banda y espacio de almacenamiento. Reducirá el tiempo de carga de su sitio y la velocidad es absolutamente esencial si desea que los lectores se queden. Si un visitante llega a su sitio y tiene que esperar más de un segundo o dos, ¡probablemente se irá y nunca volverá!

Optimización de imágenes y fotos, utilizando un tema de WordPress que tiene un tamaño pequeño y haciendo otras cosas para acelerar su sitio, mantendrá a los visitantes en su sitio más rápido en el móvil según el estatista, los visitantes que usan dispositivos móviles representar más de la mitad del tráfico total de Internet. ¡Eso es mucho! Esto significa que tener un sitio web optimizado para dispositivos móviles es esencial y una forma de hacerlo es tener un WordPress ligero e imágenes optimizadas. Mejorar la optimización de SEO para los motores de búsqueda (SEO) es importante para cada sitio web que depende En el tráfico del motor de búsqueda. Las imágenes más pequeñas significan que las páginas se están cargando más rápido. Las páginas más rápidas significan que Google clasifica su sitio más favorable. Y una mejor posición de Google significa que será más alto en los resultados de búsqueda. Lo contrario también es cierto: Google castiga a los sitios web lentos, lo que te hace aparecer a continuación en los resultados de búsqueda. Si obtiene muchos usuarios o visitantes de los motores de búsqueda, ¡esta puede ser la diferencia entre el éxito y el fracaso! Las copias de seguridad son más rápidas si realiza una copia de seguridad de su sitio regularmente (¡y deberías!), Otuja! Manualmente o con un complemento de copia de seguridad de WordPress, la optimización de imágenes puede ser útil.
Hay dos razones por las cuales:
Crear la copia de repuesto tomará menos porque los archivos son más pequeños y requieren menos tiempo para comprimir
El archivo de copia de seguridad será más pequeño y ocupará menos espacio
Los sitios web de ancho de cinta más pequeños con archivos más pequeños (y menos archivos en general) consumen menos ancho de banda que los sitios con muchas imágenes grandes. En las horas pico de tráfico, esta puede ser la diferencia entre cargar su sitio en 3 segundos o medio minuto. El ancho de banda se define como “la cantidad máxima de datos transmitidos a través de una conexión a Internet en un cierto período de tiempo”. Esencialmente, significa la cantidad de datos que puede enviar a la vez. Por lo tanto, optimizar sus imágenes puede reducir la cantidad de ancho de banda que consume su sitio, cuanto más rápido se ejecutará el sitio y menos tendrá que hacer menos problemas de carga. Se requiere un espacio de almacenamiento más bajo imágenes más pequeñas significan que necesita menos espacio en su host web. Esto, a su vez, significa que es menos probable que exceda los límites de almacenamiento en su host web. La mayoría de los anfitriones le cobran impuestos adicionales si pasa, ¡así que ciertamente desea evitar esto! Si usted es un fotógrafo, director de cine u otros medios profesionales, probablemente tenga muchos archivos grandes en su sitio. Esto hace que la compresión de la imagen sea una necesidad. Al crear fotos de optimización, puede evitar la necesidad de comprar un plan de alojamiento costoso con mucho almacenamiento.
Al optimizar las imágenes, puede reducir drásticamente el espacio de almacenamiento necesario para mantenerlas todas, ¡ahorrándole un poco de efectivo en la factura mensual!
Cosas para recordar ahora que sabemos por qué debe optimizar sus imágenes, hablar sobre otros aspectos que debe tener en cuenta. Como con cualquier decisión técnica, hay muchos compromisos diferentes entre los cuales puede elegir. Para crear fotos optimizables, no hay una situación “un tamaño adecuado para todos” para todos. Es importante tener en cuenta dos principios generales: calidad de imagen más grande = tamaño de archivo más grande
Tamaño de archivo más pequeño = calidad de imagen más baja
Si bien algunos tipos de imágenes se pueden comprimir sin perder calidad, las reglas anteriores son verdaderas la mayor parte del tiempo. Dimensiones de la imagen ¿Qué tan grande necesita imagen? Depende. En su mayor parte, una imagen con un ancho de 5000 PX es completamente inútil. Básicamente, nadie visitará su sitio en un dispositivo con una resolución tan alta. También depende de si las imágenes tendrán un ancho o contenido completo. Si la imagen tiene un ancho completo, es una buena idea mantenerla en 1.500 y 2.500 píxeles. Si está en el contenido, un ancho máximo de 1,500 es bueno, aunque generalmente 1,000 píxeles son suficientes.

Compresión Si lee sobre la compresión de la imagen, a menudo cumplirá con dos palabras: con pérdidas y sin pérdidas. ¿Qué significa estos cuando quieres optimizar tus fotos? Como probablemente pueda darse cuenta por su nombre, describen la cantidad de pérdida de datos que tienen lugar durante el proceso de compresión.
La compresión de pérdidas tiene una ligera pérdida de calidad de imagen debido a la eliminación de los píxeles durante el proceso.La compresión con pérdidas es preferible cuando la calidad de la imagen debe ser buena, pero no perfecta.Las imágenes de una publicación de blog son un buen caso de uso. La pérdida sin pérdida reduce el tamaño del archivo sin pérdidas de calidad visibles.Sin embargo, el tamaño del archivo seguirá siendo bastante grande.Por lo general, desea utilizar la compresión sin pérdidas si la calidad de la imagen es de mayor importancia.Si es un fotógrafo, por ejemplo, ciertamente no usa imágenes de pérdida.
Puedes ver la diferencia en esta imagen del blog de ShortPixel:
Tipos de archivos de imagen (JPG, PNG, GIF, SVG, etc.) Cuando se trata de imágenes, hay varios tipos de archivos que las personas tienden a usar. Estos son PNG, JPG, GIF y SVG. Cada uno ha sido diseñado para una situación diferente, por lo que si desea optimizar su sitio de rendimiento, es útil usarlos correctamente. A un píxel al siguiente es suave. En otras palabras, si no hay líneas que tengan un fuerte contraste entre ellas. Si está usando una foto, probablemente debería ser un JPG. Sin embargo, esto significa que tienden a tener un tamaño de archivo más grande. En general, los PNG están diseñados para imágenes transparentes, texto, logotipos y formas que tienen bordes claramente definidos. No soy una buena opción para fotos de alta resolución. Debido a que la compresión de PNG es significativamente mejor que los GIF, generalmente es preferible usarlos. Sin embargo, los GIF tienen una capacidad especial. Apoyan la animación. La mayoría de las imágenes animadas en línea son GIF. Entonces, a menos que su imagen contenga una animación, generalmente es mejor evitar GIF y usar PNG o JPG. Hay imágenes basadas en vectores. Basado en el vector solo significa que las imágenes están compuestas de puntos matemáticos en lugar de píxeles.
Un logotipo es un ejemplo de una imagen vectorial, mientras que una foto es un ejemplo de imagen basada en píxeles. Debido a que los SVG no contienen cientos o miles de píxeles, tienen un tamaño de archivo mucho más pequeño. También puede cambiar el tamaño de un SVG sin cambiar demasiado el tamaño del archivo. Si las imágenes en su sitio están formadas en gran parte de formas y líneas simples, considere usar sus versiones SVG. ¡Astra 3.3 introdujo los gráficos SVG para que nuestra tarea se cargue más rápido! Lea más sobre el uso de SVG a continuación. ¡Las mejores formas de optimizar sus imágenes ahora para optimizar algunas imágenes! Hay algunos pasos a considerar. ¿Realmente necesitas una foto? En primer lugar, pregúntese: ¿realmente necesitas una imagen? Las imágenes innecesarias pueden hacer que su sitio sea más lento, por lo que debe intentar usarlas solo si es absolutamente necesario. En primer lugar, optimice la imagen antes de cargarla en la optimización de imágenes de su sitio web antes de cargar en WordPress significa que puede usar herramientas fuertes para equilibrar el tamaño y la calidad de la imagen. Photoshop Photoshop es la aplicación de software más conocida para la edición y el procesamiento de imágenes. Para comprimir una imagen en Photoshop, vaya al archivo web y de dispositivos. Luego seleccione el formato de archivo deseado, elija el nivel de compresión y presione el rescate. No hay problema. Hay muchos otros programas gratuitos de edición de imágenes gratuitas. Uno de los más populares se llama GIMP.
Para comprimir una imagen en el GIMP, vaya a Archivo> Exportar CA. Luego, bajo la selección del tipo de archivo (por extensión), elija el tipo de archivo deseado. Luego dibuje la configuración de calidad en el nivel de compromiso de compresión/calidad. Los niveles inferiores tendrán un tamaño más pequeño del archivo, pero tendrán más degradación de la imagen. Para ver cómo se verá la imagen, asegúrese de tener una vista previa activada en la ventana de la imagen. La aplicación para Mac es de código abierto y es gratuito, mientras que el servicio web comienza desde $ 12 por mes por 2,000 imágenes. Entonces usa un complemento, ¿comprimió sus imágenes? ¡Maravilloso! Ahora es el momento de subirlos a su sitio.
Para hacer esto, vaya a los medios> Agregar nuevo a la barra lateral de WordPress y cargue todas las imágenes. Una vez terminado, debe instalar un enchufe de compresión. Hay una serie de opciones diferentes disponibles, tanto gratuitas y pagas. Pasemos por algunos de los complementos de compresión de WordPress más populares. 1. WP Smush
Smush es un complemento perezoso, comprime y optimiza las imágenes. Hay versiones gratuitas y pagas del complemento. El pagado le permite comprimir un número ilimitado de imágenes, copia de seguridad de imágenes originales, usar un CDN para 45 ubicaciones y cambiar el tamaño y escalar automáticamente las imágenes.

Empiece con Smush
2. tinypng

Tinypng es tanto una herramienta en línea como un complemento de WordPress. El instrumento en línea comprime rápidamente las imágenes, mientras que el complemento tiene muchas funciones. Estos incluyen optimización automática, operación en segundo plano para acelerar su flujo de trabajo, cambio de tamaño sin esfuerzo con anchos máximos o dimensiones de archivos, codificación progresiva JPEG, compatibilidad de WooCommerce y conversión de CMYK a RGB. También puede optimizar las imágenes ya en su biblioteca de medios. Comience con TinyPng

3. Optimizador de imágenes de shortpixel

ShortPixel es un complemento Freemium que optimiza cualquier imagen o PDF en su sitio está diseñado para ser fácil de usar y comprimir todo automáticamente en segundo plano. Hay versiones gratuitas y planas, la versión plana que agrega funciones adicionales, como la integración en la nube y las copias de seguridad automáticas.

Comience con ShortPixel

4. Optimole
Optimole es un complemento de procesamiento de imágenes de tiempo real. Hay versiones gratuitas y pagas del complemento disponible. Una característica única es que puede editar, cambiar el tamaño, agregar filtros y hacer otros ajustes a sus fotos también incluye la carga perezosa.
Comience con Optimole

5. Imagina
Imagify es un complemento clásico de optimización de imágenes. Es muy fácil de configurar e incluso tiene un experto en optimización de URL para comenzar. Un algoritmo complejo determina qué imagen se mostrará para qué usuarios, lo que ayuda a mantener tiempos de carga más pequeños.
Comience con la imagen

6. ImageRecycle
Imagerecycle es otro complemento de compresión útil disponible para WordPress y otras plataformas. Tienen una herramienta útil en su sitio web que le permite obtener un informe de análisis de imagen gratuito en su sitio. Incluso si puede usar un complemento diferente, vale la pena ver qué cosas puede mejorar. Es absolutamente gratis de usar y no tiene desventajas. Al principio con Imagerecycle
7. EWWW Image Optimizer Cloud

EWWW Image Optimizer es un complemento orientado a la velocidad. Tiene compresión premium disponible para archivos JPG, PNG y PDF. Una característica única es que selecciona adaptativo qué tipo de imagen es ideal para minimizar el tamaño del archivo y maximizar la calidad. Esto es útil si utiliza una amplia variedad de imágenes diferentes en su sitio web. Por ejemplo, PNG para imágenes transparentes, GIF animados en su blog y JPG para las fotos de su producto.
Comience con EWWW Image Optimizer
8. Optimus Image Optimizer

Optimus es un complemento Freemium que le ayuda a comprimir y optimizar imágenes que son PNG y JPEG. El complemento comprime tanto la imagen original como todas las imágenes de vista previa. Es diferente de otras herramientas como Photoshop y TinyPng, que solo afectan la imagen original, no las miniaturas generadas.
Empiece con Optimus
Otras buenas prácticas para optimizar las imágenes web, en última instancia, para cubrir algunas otras buenas prácticas para la optimización de imágenes. Aunque no son esenciales, pueden ayudar juntos para que su sitio sea aún más rápido. En lugar de recopilar imágenes, texto y otros archivos directamente desde el sitio cada vez, el complemento crea un instante de su contenido para cargar la página más rápido. El uso de un complemento de almacenamiento de caché es una excelente manera de reducir el tiempo requerido para cargar páginas. La mayoría de estos complementos comprimen sus imágenes, que a menudo son los archivos más grandes de su sitio Usar una CDN (red de entrega de contenido) es una red de servidores y centros de datos distribuidos geográficamente. CDNS almacena versiones de caché del contenido de su sitio (como imágenes, HTML y CSS) en diferentes ubicaciones del mundo. Luego, cuando alguien visita su sitio, el contenido se envía desde la ubicación más cercana al usuario (llamado punto de presencia). Como resultado, todo se carga mucho más rápido. Hay muchos CDN diferentes disponibles, pero dos de los más populares son Akamai y Cloudflare. Usar uno es definitivamente una buena idea, especialmente si sus visitantes son geográficamente variados. Muestre imágenes de dos dimensiones.

Es diferente de otros tipos de imágenes (JPG, PNG) porque almacenan imágenes como vectores, que están formados por puntos matemáticos en lugar de píxeles, como los rastrillos. Los gráficos de trama consisten en mapas de mordedura, que son píxeles individuales. En la imagen a continuación, puedes ver la diferencia. Si aumentamos el S de la imagen a la izquierda (ráster), podemos ver que está compuesto por varios píxeles. Cada píxel es de un solo color. Aunque esta es una excelente manera de mostrar cambios de color complejos, significa que necesita un píxel para cada color, que se puede agregar a un tamaño de archivo grande. Por otro lado, S de la imagen correcta (Vector) no tiene este problema. Si lo aumentamos, es exactamente lo mismo. Esto se debe al hecho de que S no está hecho de píxeles, sino de una fórmula matemática. Si duplicamos el tamaño de la distancia entre dos puntos en el S, entonces la imagen se vuelve simplemente más grande. No hay píxeles pequeños involucrados.
Hay dos grandes ventajas en el uso de gráficos vectoriales: primero, el tamaño del archivo es mucho más pequeño.En segundo lugar, la imagen puede ser escalas a cualquier tamaño sin aumentar el tamaño del archivo.Como puede imaginar, ¡esto acelerará su sitio más o menos!Para usar SVG en su sitio, deberá instalar un determinado complemento en su sitio. Recomendamos el soporte de SVG.Si usas Astra, te complacerá descubrir que Astra 3 usa SVGS.Hemos reemplazado los iconos de fuentes con iconos SVG, lo que los deja más claros, especialmente en dispositivos móviles.También reduce la necesidad de cargar cualquier fuente adicional, haciendo que todo se cargue mucho más rápido. Técnica de desvanecimiento
Este método único es una forma de usar CSS para mostrar una imagen de fondo temporal, mientras que se carga una imagen más grande y más detallada. Usando una imagen pequeña y un desenfoque gaussiano, puede evitar pasar de un fondo vacío a una imagen completamente detallada. Si se siente cómodo trabajando con CSS y utilizando muchas imágenes de fondo, la técnica de desenfoque definitivamente es algo que vale la pena analizar. Lea este tutorial en CSS-rks.com para obtener más detalles. Por ejemplo, si el usuario deja una página antes de llegar a la parte inferior de la página, las imágenes allí no se cargarán. ¡Esto puede ahorrarte un montón de ancho de banda! La mayoría de los complementos de optimización de imágenes incluyen la funcionalidad de carga perezosa. Sin embargo, otros como WP Rocket Lazy Load o A3 Lazy Load se centran solo en la función de carga perezosa. Astra ha presentado la carga perezosa en enero de 2021, por lo que si usa el tema de WordPress más popular, ¡está listo!