Cómo optimizar sus imágenes para que sean amigables con SEO (Guía completa)

El rendimiento de su sitio web depende de varios factores que van desde el proveedor de alojamiento web específico que elija, a las siguientes pautas de accesibilidad del sitio web, hasta los tamaños de archivo de imagen que usa.


Sin embargo, formatearlos para el tamaño adecuado puede reducir la calidad debido a las modificaciones que realice. La buena noticia es que puede mantener una calidad de imagen óptima y obtener el tamaño correcto con algunas técnicas y trucos..

¿Qué es la optimización de imagen??

dimensiones de optimización de imagenLas páginas web pueden experimentar una desaceleración significativa cuando hay imágenes grandes. Esto puede reducir los tiempos de carga y hacer que la experiencia general sea inferior para los visitantes de su sitio.

Disminuir el tamaño del archivo es la optimización de la imagen. Puede usar un script o un complemento para esto.

Esto resulta en tiempos de carga más rápidos para sus páginas. La compresión sin pérdidas y con pérdidas son los dos métodos de optimización más comunes.

Beneficios del formato de imagen

tamaños de imagen promedio en la webSe estima que aproximadamente el 54 por ciento del peso total de una página web se debe a imágenes.

Cuando trabaje en la optimización del sitio web, sus imágenes deberían ser su primera tarea debido a esto. Los beneficios del formato de imagen incluyen:

  • Velocidad de carga de página mejorada
  • Es más rápido crear copias de seguridad
  • Se requiere menos espacio de almacenamiento del servidor
  • SEO mejorado con el complemento SEO correcto
  • Se utiliza menos ancho de banda

Cómo mejorar el rendimiento con la optimización de imagen

El objetivo es equilibrar de manera uniforme la calidad aceptable y el tamaño de archivo más bajo posible. Hay más de una forma de hacer esto. Antes de cargar, comprimir sus imágenes es una opción común. Puede usar una herramienta o un complemento para este propósito (aquí hay algunos).

Es importante tener en cuenta el tipo de compresión y el formato de archivo que utiliza. La combinación correcta permite disminuir el tamaño de su imagen hasta cinco veces.

Experimente con diferentes formatos de archivo y tipos de compresión para determinar la mejor combinación para sus necesidades..

Elija el mejor formato de archivo

Para elegir el mejor tipo de archivo, es importante saber cuáles están disponibles. Estos son los mas comunes:

  • JPEG: Este tipo utiliza optimización sin pérdidas y con pérdidas. Puede lograr un equilibrio sólido entre el tamaño y la calidad del archivo ajustando el nivel de calidad.
  • PNG: Este tipo tiende a tener un tamaño de archivo más grande, pero las imágenes son de mayor calidad. Puede usar compresión con o sin pérdida.
  • GIF: Esto es ideal para imágenes animadas. Solo puede usar la compresión sin pérdida. Solo usa 256 colores.

formatos de archivo de imagen

Hay otras opciones, pero estas se encuentran entre las más comunes y fáciles de trabajar. Otras opciones incluyen JPEG XR y WebP. No todos los navegadores admiten estos dos, así que tenga en cuenta esto.

Sin embargo, pueden ser una opción viable. Por ejemplo, en comparación con una imagen JPEG comparable, hay una reducción del tamaño del archivo del 30 por ciento con WebP, en promedio.

Debido a la falta de soporte universal para estas dos opciones, su aplicación necesitará lógica adicional en sus servidores o aplicación para proporcionar el recurso apropiado:

  • La optimización de imagen es un servicio proporcionado por algunos CDN, que incluye la entrega WebP y JPEG XR.
  • Para detectar el cliente, proporcione el mejor formato de imagen disponible y verifique los formatos admitidos; es posible agregar lógica de aplicación adicional.
  • Ciertas herramientas de código abierto automatizan la conversación, la optimización y el servicio de los activos apropiados..

Tamaño versus calidad de compresión

La compresión baja tiende a proporcionar una mayor calidad, pero los tamaños de los archivos suelen ser más grandes. Lo contrario es cierto con alta compresión. Los archivos son más pequeños, pero la calidad tiende a disminuir..

calidad de imagen vs compresión

Idealmente, desea un total de uno o dos MB para el peso total de su página web. Entonces, considere cuántas imágenes necesita usar y dividir este número por aproximadamente 1.5. Esto le brinda el tamaño por imagen que permite la mejor velocidad de carga.

Optimización sin pérdida versus optimización con pérdida

Estos son los dos tipos de compresión que usará. Es importante entender lo que hacen:

  • Compresión sin pérdida versus pérdidaSin pérdida: Esto comprime los datos y es un filtro. Antes de renderizar la imagen, debe estar sin comprimir. Sin embargo, la calidad no se reduce. Existen varias herramientas que realizan una compresión sin pérdidas..
  • Con pérdida: Esto elimina algunos datos y es un filtro. Tenga en cuenta cuánta reducción realiza porque degradará la imagen. Puede usar diferentes editores de imagen y herramientas para ajustar la configuración de calidad de la imagen..

La configuración óptima de la configuración sin pérdida o con pérdida depende de sus propios criterios, como la compensación entre los artefactos introducidos y el tamaño del archivo, y el contenido de la imagen.

No existe una única configuración universal que se aplique a todas las imágenes. En última instancia, desea jugar con diferentes imágenes para ver cuál funciona mejor.

Cambiar el tamaño de las imágenes a escala

Gracias a las páginas receptivas en sitios, como WordPress, obtendrá varios tamaños de archivo en su biblioteca de medios. Su navegador puede elegir el tamaño que sea mejor y descargarlo. El tamaño que elige el navegador se basa en la resolución del dispositivo.

Cambiar el tamaño de la imagen en WordPress

El archivo original permanece intacto y retenido. Puede usar complementos para evitar guardar el original para ahorrar espacio en el disco si lo prefiere.

Reemplazar y eliminar imágenes

¿Necesita todas las imágenes en una página web? Si no, elimine los que no sean necesarios. Sin embargo, si todos son pertinentes al contenido, considere reemplazar las imágenes de mayor o menor calidad con mejores opciones.

En algunos casos, las fuentes web y los efectos CSS pueden ocupar el lugar de las imágenes sin dejar de proporcionar una estética visual agradable en la página. Con las fuentes web, los tipos de letra agradables pueden ayudar a mejorar la usabilidad y proporcionar un aspecto más personalizado a sus páginas.

También puede mejorar su legibilidad y marca. Solo asegúrese de que aún puede buscar, seleccionar y cambiar el tamaño del texto fácilmente sin que tenga problemas de legibilidad.

Los efectos CSS incluyen elementos, como sombras y degradados. Estos también pueden marcar aún más la marca. Las animaciones pueden proporcionar un atractivo visual en su página web en cada nivel de zoom y resolución. En comparación con los archivos de imagen, estos son una fracción de los bytes.

Raster vs. Imágenes vectoriales

rastor vs vector

Ráster y vector son dos de los principales tipos de archivos de imagen. Se utilizan programas basados ​​en píxeles, un escáner o una cámara para crear imágenes ráster..

Estos son ampliamente utilizados en Internet y más comúnmente utilizados. El software vectorial se utiliza para crear imágenes vectoriales. Estos son comunes para imágenes que van a productos físicos y en ingeniería, CAD y gráficos 3D..

Las imágenes vectoriales son independientes de la resolución y el zoom. Cuando hay formas geométricas involucradas, el vector es ideal. Cuando las imágenes son complejas y tienen una gran cantidad de detalles y formas irregulares, se prefieren las imágenes de trama.

Los gráficos de trama codifican los valores individuales de cada píxel dentro de una cuadrícula rectangular para representar una imagen. Los gráficos vectoriales representan una imagen usando puntos, líneas y polígonos..

Implicaciones de pantalla de alta resolución

Es importante distinguir entre los dos tipos de píxeles diferentes, que incluyen píxeles del dispositivo y píxeles CSS. Múltiples píxeles del dispositivo pueden estar presentes en un solo píxel CSS. El detalle en la pantalla se vuelve más fino con más píxeles del dispositivo..

css pixel vs dispositivo pixelPara aprovechar al máximo la mayor cantidad de píxeles del dispositivo, los recursos de imagen deben tener más detalles.

Esta tarea es ideal para imágenes vectoriales ya que pueden producir resultados nítidos cuando se presenta en cualquier resolución.

Dado que las imágenes ráster utilizan una base por píxel para codificar los datos de la imagen, son más desafiantes. Esto es mientras los tamaños de archivo ráster aumentan a medida que aumentan los píxeles.

Por lo tanto, las pantallas de alta resolución necesitan imágenes de alta resolución para obtener los beneficios. Las imágenes vectoriales son ideal para pantallas de alta resolución ya que siempre proporcionan resultados agudos debido a que son independientes de la resolución.

Solo recuerde que, independientemente de la resolución, las técnicas de optimización de imagen son las mismas..

Optimización de imágenes vectoriales

Los gráficos vectoriales escalables (SVG) son compatibles con todos los navegadores modernos.

Esto es ideal para gráficos bidimensionales y el formato se basa en imágenes XML. Los archivos SVG se pueden crear a mano utilizando el editor de texto que prefiera o con la mayoría de los tipos de software basados ​​en vectores.

Para reducir el tamaño de los archivos SVG, deben minimizarse. GZIP debe usarse al comprimir archivos SVG.

Optimización de imágenes ráster

Una cuadrícula de píxeles forma una imagen de trama. Los píxeles individuales están en una cuadrícula bidimensional. Por ejemplo, una secuencia de 10,000 píxeles forma una imagen de 100 por 100 píxeles. Cada píxel codifica información de transparencia y color..

trama pesadaLos valores RGBA se almacenan por cada píxel. Éstas incluyen:

  • Canal rojo
  • Canal azul
  • Canal verde
  • Canal alfa (transparencia)

El navegador asigna internamente 256 sombras (valores). Por canal, esto se traduce en ocho bits. Por píxel, esto es cuatro bytes. Esto permite calcular el tamaño del archivo utilizando las dimensiones de la cuadrícula. No se necesita mucho para que el tamaño del archivo se vuelva muy grande.

Entonces, para reducir el tamaño del archivo de imagen, hay algunas estrategias:

  • Reduzca la profundidad de bits de la imagen. Puede hacerlo utilizando una paleta de colores más pequeña..
  • Optimizar los datos que almacenan los píxeles individuales.

Herramientas y ajuste de parámetros

No existe una herramienta de imagen perfecta, un conjunto de parámetros de optimización o formato que funcione para cada imagen. El contenido de la imagen y sus requisitos técnicos y visuales determinarán cuál debe usar.

Una vez que encuentre un buen conjunto de ajustes, puede usarlo para imágenes similares en el futuro para ahorrar tiempo. Sin embargo, asegúrese de no suponer que se deben usar los mismos ajustes para comprimir todas las imágenes..

Conocer algunas herramientas comunes puede ayudarlo a tomar la decisión correcta. Estos cuatro se encuentran entre los más utilizados:

  • Gifsicle: Esto le permite optimizar y crear varias imágenes GIF.
  • Optipng: Esto se utiliza para permitir la optimización de PNG sin pérdidas.
  • Jpegtran: Este le permite optimizar imágenes JPEG.
  • Pngquant: Esto se utiliza para permitir la optimización PNG con pérdida.

Entrega de activos de imagen a escala

Hay dos criterios principales a considerar cuando realiza la optimización de imagen:

  • Optimizar el número total de píxeles de una imagen.
  • Optimizar cuántos bytes son necesarios para codificar cada píxel en una imagen.

árbol de formato de imagenEl tamaño de su archivo de imagen se desglosa en píxeles totales multiplicados por los bytes totales necesarios para la codificación de píxeles individuales. Eso es todo. Tenga esto en cuenta cuando esté trabajando para determinar el tamaño óptimo para los archivos de imagen en su sitio web.

Debido a esto, la forma más efectiva y fácil de optimizar las imágenes es asegurarse de que no está enviando más píxeles que absolutamente necesita para mostrar el activo en el navegador en su tamaño deseado.

Entonces, no solo confíe en su navegador para reescalar imágenes. Esto puede hacer que se muestren a una resolución más baja. También usa muchos recursos de CPU adicionales.

Por lo general, no es posible garantizar el tamaño exacto de visualización para cada activo entregado. Sin embargo, es importante asegurarse de mantener al mínimo todos los píxeles innecesarios.

También es imprescindible que entregue sus grandes activos lo más cerca posible de su tamaño de pantalla.

Lista de verificación de optimización de imagen

Toda la información aquí le permite optimizar sus imágenes para que sus páginas web sean más rápidas. Aún podrá utilizar imágenes hermosas, pero no causarán una desaceleración significativa con los tiempos de carga de su página.

Esto hará felices a sus visitantes y mejorará la función general de su sitio web. Tenga en cuenta los siguientes puntos de la lista de verificación cuando optimice sus imágenes:

  • Considere los formatos vectoriales ya que funcionan para dispositivos de alta resolución y múltiples porque son independientes de la escala y la resolución.
  • Todos los activos de SVG deben comprimirse y minimizarse. Esto elimina los metadatos innecesarios..
  • Para formatos ráster, juegue con la configuración de calidad óptima. Esto puede ahorrarle una cantidad significativa de bytes.
  • Para cada activo, calcule sus requisitos funcionales y elija el mejor formato para imágenes ráster.
  • Automatice siempre que pueda para garantizar una optimización de imagen consistente.
  • Sirva imágenes a escala para que el tamaño de imagen natural y el tamaño de visualización sean lo más similares posible.

Para resumir, hay una ciencia y un arte para la optimización de imágenes. Los algoritmos y técnicas altamente desarrollados sirven como ciencia.

La falta de respuestas definitivas con respecto a la compresión de imágenes individuales es el arte. En última instancia, deberías jugar y experimentar. Esto le permite elegir la mejor opción para sus archivos de imagen y cómo contribuyen a la velocidad de su página web.

Con la creciente popularidad y sofisticación de los creadores de sitios web de terceros como Wix, es fácil que los diseñadores se vuelvan descuidados, pero se mantengan enfocados en desarrollar y mantener buenos procesos de optimización de imagen, ya sea abofeteando una plantilla o construyendo un sitio desde cero.

Referencias y créditos de imagen:

  • PicupMedia.com
  • Computing.HomeDNS.org
  • CognitiveSEO.com
  • StackOverflow.com
  • EngineThemes.com
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map