¿Sabías que optimizar tus imágenes antes de subirlas a WordPress puede tener un gran impacto en la velocidad de tu sitio web? Al comenzar un nuevo blog, muchos novatos simplemente cargan imágenes sin optimizarlas para la web. Estos archivos de imágenes de gran tamaño ralentizan su sitio web. Puede solucionar este problema utilizando las mejores prácticas de optimización de imágenes como parte de su rutina habitual de blogs. En este artículo, le mostraremos cómo optimizar sus imágenes para un rendimiento web más rápido sin perder calidad. También compartiremos complementos de optimización automática de imágenes para WordPress que pueden hacerle la vida más fácil.
Dado que esta es una guía completa para optimizar imágenes para la web, hemos creado una tabla de contenido fácil de seguir:
¿Qué es la optimización de imágenes? (Imágenes optimizadas frente a no optimizadas)
Contents
La optimización de imágenes es un proceso de guardar y entregar imágenes en el tamaño de archivo más pequeño posible sin reducir la calidad general de la imagen. Aunque el proceso parece complejo, en realidad es bastante fácil en estos días. Puede utilizar uno de los muchos complementos y herramientas de optimización de imágenes para comprimir automáticamente las imágenes hasta en un 80% sin ninguna pérdida visible en la calidad de la imagen. A continuación, se muestra un ejemplo de una imagen optimizada o no optimizada:
Como puede ver, cuando se optimiza correctamente, la misma imagen puede ser un 75% más pequeña que la original sin ninguna pérdida de calidad.
¿Cómo funciona la optimización de imágenes?
En pocas palabras, Image Optimization funciona mediante el uso de tecnologías de compresión como «Lossy» y «Lossless», que ayudan a reducir el tamaño general del archivo sin una pérdida de calidad notable.
¿Qué significa optimizar imágenes?
Si alguna vez recibió una recomendación de optimización de imagen de su medio de alojamiento de WordPress o una herramienta de prueba de velocidad, todo esto significa que debe reducir el tamaño de archivo de sus imágenes optimizándolas para la web.
¿Por qué es importante la optimización de imágenes? ¿Cuáles son los beneficios de la optimización de imágenes?
Si bien hay muchos beneficios de optimizar sus imágenes, estos son los principales que debe conocer:
- Mayor velocidad del sitio web
- Rankings SEO mejorados
- Mayor tasa de conversión general para ventas y clientes potenciales
- Menos almacenamiento y ancho de banda (lo que puede reducir los costos de alojamiento y CDN)
- Copias de seguridad de sitios web más rápidas (también reduce el costo del almacenamiento de copias de seguridad)
Aparte del video, las imágenes son la segunda parte más pesada de una página web. Según el archivo HTTP, las imágenes representan en promedio el 21% del peso total de una página web. Como sabemos que los sitios web rápidos ocupan un lugar más alto en los motores de búsqueda (SEO) y tienen mejores conversiones, la optimización de la imagen es algo que todo sitio web comercial tiene que hacer si quiere tener éxito en línea. Es posible que ahora se pregunte cuánta diferencia puede hacer realmente la optimización de imágenes. Según un estudio de Strangeloop, un retraso de un segundo en el tiempo de carga del sitio web puede costarle un 7% en ventas, un 11% menos de páginas vistas y un 16% menos de satisfacción del cliente.
Si estas razones no son suficientes para acelerar su sitio web, tenga en cuenta que los motores de búsqueda como Google también dan un tratamiento de SEO preferencial a los sitios web de carga más rápida. Esto significa que al optimizar sus imágenes para la web, puede mejorar la velocidad del sitio web y aumentar la clasificación SEO de WordPress.
Video tutorial
Suscríbase a MundoCMS Si prefiere instrucciones escritas, siga leyendo.
¿Cómo guardo y optimizo imágenes para el rendimiento web?
La clave para una optimización de imágenes exitosa para el rendimiento web es encontrar el equilibrio perfecto entre el tamaño de archivo más pequeño y una calidad de imagen aceptable. Los tres elementos que juegan un papel importante en la optimización de imágenes son:
- Formato de archivo de imagen (JPEG vs PNG vs GIF)
- Compresión (mayor compresión = menor tamaño de archivo)
- Dimensiones de la imagen (alto y ancho)
Al elegir la combinación correcta de los tres, puede reducir el tamaño de su imagen hasta en un 80%. Echemos un vistazo a cada uno de estos con más detalle.
1. Formato de archivo de imagen
Para la mayoría de los propietarios de sitios web, los únicos tres formatos de archivo de imagen que realmente importan son JPEG, PNG y GIF. La elección del tipo de archivo correcto juega un papel importante en la optimización de la imagen. Para simplificar las cosas, desea utilizar archivos JPEG para fotos o imágenes con mucho color, archivos PNG para imágenes simples o cuando necesite imágenes transparentes y GIF solo para imágenes en movimiento. Para aquellos que no conocen la diferencia entre cada tipo de archivo, el formato de imagen PNG no está comprimido, lo que significa que es una imagen de mayor calidad. La desventaja es que los tamaños de archivo son mucho mayores. Por otro lado, JPEG es un formato de archivo comprimido que reduce ligeramente la calidad de la imagen para proporcionar un tamaño de archivo significativamente menor. Mientras que GIF solo usa 256 colores con compresión sin pérdida, lo que lo convierte en la mejor opción para imágenes en movimiento. En MundoCMS, utilizamos los tres formatos de imagen según el tipo de imagen.
2. Compresión
Lo siguiente es la compresión de imágenes, que juega un papel muy importante en la optimización de imágenes. Hay diferentes tipos y niveles de compresión de imágenes disponibles. La configuración de cada uno varía según la herramienta de compresión de imágenes que esté utilizando. La mayoría de las herramientas de edición de imágenes como Adobe Photoshop, On1 Photo, GIMP, Affinity Photo y otras vienen con funciones integradas de compresión de imágenes. También puede guardar las imágenes normalmente y luego usar una herramienta web como TinyPNG o JPEG Mini para una compresión de imágenes más fácil. Aunque es un poco manual, estos dos métodos te permiten comprimir imágenes antes de subirlas a WordPress, y eso es lo que hacemos en MundoCMS. También hay varios complementos populares de WordPress como Optimole, EWWW Image Optimizer y otros que pueden comprimir imágenes automáticamente cuando las carga por primera vez. Muchos novatos e incluso grandes empresas prefieren utilizar estos complementos de optimización de imágenes porque es fácil y conveniente. Compartiremos más sobre estos complementos de WordPress más adelante en el artículo.
3. Dimensiones de la imagen
Normalmente, cuando importa una foto desde su teléfono o cámara digital, tiene una resolución muy alta y grandes dimensiones de archivo (alto y ancho). Normalmente, estas fotos tienen una resolución de 300 DPI y dimensiones de 2000 píxeles o más. Estas fotos de alta calidad son ideales para imprimir o publicar. No son adecuados para sitios web. Reducir las dimensiones del archivo a algo más razonable puede reducir significativamente el tamaño del archivo de imagen. Simplemente puede cambiar el tamaño de las imágenes usando un software de edición de imágenes en su computadora. Por ejemplo, optimizamos una foto con un tamaño de archivo original de 1,8 MB, una resolución de 300 DPI y unas dimensiones de imagen de 4900 × 3200 píxeles. Elegimos el formato jpeg para una mayor compresión y cambiamos las dimensiones a 1200 × 795 píxeles, y redujimos el tamaño del archivo de imagen a 103 KB. Esto es un 94% menos que el tamaño del archivo original. Ahora que conoce los tres factores importantes de la optimización de imágenes, echemos un vistazo a varias herramientas de optimización de imágenes para propietarios de sitios web.
Las mejores herramientas y programas de optimización de imágenes
Como mencionamos anteriormente, la mayoría del software de edición de imágenes viene con configuraciones de optimización y compresión de imágenes. Además del software de edición de imágenes, también hay varias herramientas de optimización de imágenes gratuitas y potentes que puede utilizar para optimizar imágenes para la web (con solo unos pocos clics). Le recomendamos que utilice estas herramientas para optimizar las imágenes antes de subirlas a WordPress, especialmente si es un perfeccionista. Este método le ayuda a ahorrar espacio en disco en su cuenta de alojamiento de WordPress y garantiza la imagen más rápida con la mejor calidad ya que revisa manualmente cada imagen.
Adobe Photoshop
Adobe Photoshop es un software premium con una función para guardar imágenes optimizadas para la web. Simplemente abra su imagen y haga clic en la opción «Archivo» Guardar para Web «. Esto abrirá un nuevo cuadro de diálogo. A la derecha, puede configurar diferentes formatos de imagen. Para el formato JPEG, verá diferentes opciones de calidad. Cuando seleccione sus opciones, también le mostrará el tamaño del archivo en la parte inferior izquierda.
CAÑUTILLO
GIMP es una alternativa gratuita y de código abierto al popular Adobe Photoshop. Puede utilizarse para optimizar sus imágenes para la web. La desventaja es que no es tan fácil de usar como algunas de las otras soluciones de esta lista. Primero, debe abrir su imagen en GIMP y luego seleccionar Archivo »Exportar como opción. Esto abrirá el cuadro de diálogo para guardar archivo. Dé un nuevo nombre a su archivo y luego haga clic en el botón exportar.
Esto abrirá las opciones de exportación de imágenes. Para archivos jpeg, puede seleccionar el nivel de compresión para reducir el tamaño del archivo. Finalmente, haga clic en el botón exportar para guardar el archivo de imagen optimizado.
TinyPNG
TinyPNG es una aplicación web gratuita que utiliza una técnica de compresión con pérdida inteligente para reducir el tamaño de sus archivos PNG. Todo lo que tienes que hacer es ir a su sitio web y subir tus imágenes (simplemente arrastrar y soltar).
Comprimirán la imagen y te darán el enlace de descarga. Puede utilizar su sitio web hermano, TinyJPG, para comprimir imágenes JPEG. También tienen una extensión para Adobe Photoshop, que es lo que usamos como parte de nuestro proceso de edición de imágenes, ya que combina lo mejor de TinyPNG y TinyJPG en Photoshop. Para los desarrolladores, tienen una API para convertir imágenes automáticamente, y para los novatos, tienen un complemento de WordPress que puede hacerlo automáticamente por usted (más sobre …