Cómo optimizar imágenes para WordPress, una guía completa

Cómo optimizar imágenes para WordPress, una guía completa

Las personas en la web no tienen mucho tiempo para consumir datos, porque hay mucho de esto último. ¡Hay tantos datos que simplemente no tenemos tiempo para leerlos todos! Como curador de contenido para la web moderna, su tarea es maximizar el rendimiento. Cuanto más expreses con menos palabras, mejor serás en tu trabajo.


¿Por qué las imágenes son tan importantes??

Hay muchas, muchas razones por las cuales tu (y deberías) usar imágenes en tus publicaciones y artículos:

  • Las imágenes sirven como estímulos visuales para un llamado a la acción (CTA). Un CTA puede ser cualquier tarea que desee que realice su visitante. Los CTA comunes incluyen suscribirse a su boletín informativo, compartir su artículo en las redes sociales o comprar su producto.
  • Las imágenes mejoran la conexión que el escritor busca establecer con el lector.
  • Las imágenes transmiten más a través de menos.

Por lo tanto, es esencialmente importante que usemos las imágenes correctas en nuestras presentaciones (publicación de blog, informe informal, presentación real de PowerPoint, etc.) para dejar una marca en la mente del lector!

¡Pero espera! Hay un problema!

Las imágenes ocupan alrededor del 63% del ancho de banda utilizado por los sitios web modernos, por lo que es cada vez más importante que estén optimizadas adecuadamente para la velocidad.

Un retraso de un segundo en los tiempos de carga de la página podría reducir las tasas de conversión en un 7%

Hemos establecido que las personas tienen un período de atención corto (una de las desventajas de la tasa de producción de contenido moderna). Incluso si utiliza las imágenes correctas, si no se cargan dentro del plazo aceptable, se pierde el interés.

Los 10 errores de optimización de imagen más comunes

La mayoría de los sitios tienen un problema: usan imágenes excelentes, pero la forma en que se sirve la imagen al visitante es pobre. Tamaño grande, optimización deficiente, formato incorrecto, dimensiones (tamaños) innecesariamente grandes, imágenes que no responden y errores descuidados de SEO, son algunos de los problemas más comunes que enfrenta la web moderna. En el artículo de hoy, vamos a abordar estos problemas!

1. Grandes dimensiones

Las “papas fritas adicionales” no siempre son buenas

Este es un clásico. Supongamos que necesita una foto de 150 × 150 píxeles en la página “Equipo” de su sitio. Por lo general, usará un disparo en la cabeza de 5MP, lo editará un poco y finalmente lo subirá.

¿Viste el problema? ¡Algunas personas cargan directamente la imagen real de 5MP! El tema de WordPress cargará toda la imagen de 5MP (es decir, 5 x 10 ^ 6 píxeles) y le pedirá al navegador que la reduzca a la dimensión requerida de 150x150px. En esencia, el navegador muestra solo el 0.0045% de la imagen original!

Terminas desperdiciando tanto tu ancho de banda como el de tus visitantes (incluso si estás sirviendo la imagen a través de una red de entrega de contenido como Stackpath CDN), consumiendo más espacio en el disco duro y aumentando el tiempo de carga. Ninguna de las funciones es algo que desea en su sitio.

Siempre cambie el tamaño (y por cambio de tamaño me refiero a reducir el tamaño) de la imagen a las dimensiones requeridas y luego cárguela!

ImageResize.org

No necesita un software sofisticado para hacer esto: hay herramientas en línea gratuitas como ImageResize.org puede usar para cambiar rápidamente el tamaño y optimizar sus imágenes. Simplemente cargue y modifique la configuración de sus fotos. Cuando haya terminado, descargue la imagen optimizada para usar en su sitio. También ofrecen un rápido Compresor de imagen si solo quieres reducir el tamaño del archivo.

Herramientas útiles:

  • IrfanView es un excelente programa gratuito para cambiar el tamaño de sus imágenes por lotes con opciones avanzadas como optimización, marca de agua y bordes.
  • ImageMagick es una herramienta avanzada de código abierto que se puede usar en una variedad de lenguajes de programación y sistemas operativos. Puede escribir su propia aplicación o simplemente usarla a través de la línea de comando.
  • ImageOptim (Mac) le permite arrastrar carpetas completas y optimizar rápidamente múltiples imágenes.
  • TinyPNG es una herramienta de compresión de imágenes en línea con una API.

2. Formato de imagen incorrecto

shutterstock_108312266

El formato utilizado para la imagen juega un papel vital. Como regla general, use PNG para gráficos vectoriales e imágenes generadas por computadora, como imágenes prediseñadas, etc. JPEG para fotografías o imágenes con una variedad de colores. Para una explicación detallada, mira esto impresionante respuesta de StackOverflow.

3. No usar archivos JPEG progresivos

JPG de referencia (normal) versus JPG progresivo

JPG de referencia (normal) versus JPG progresivo

Para el hombre común, los archivos JPEG son de dos tipos: línea de base y progresivo. Visualmente, ambos son iguales. La diferencia radica en la forma en que se cargan:

  • Baseline JPEG tiene solo una capa, que contiene toda la imagen. Cuando se solicita, la imagen completa se carga de una vez.
  • Los archivos JPEG progresivos componen la imagen con varias capas. Una imagen JPEG progresiva se carga capa por capa, lo que aumenta gradualmente la calidad y, en última instancia, le brinda una vista sin pérdidas.
IrfanView admite la conversión por lotes con JPEG progresivo

IrfanView admite la conversión por lotes con JPEG progresivo

Todos los redimensionadores de imágenes principales le permiten guardar imágenes como JPEG progresivo.

4. No usar Lazy Load

Carga lenta es un excelente ahorro de recursos técnica en la que una imagen se carga solo cuando el visitante se desplaza hacia abajo hasta el marco de vista de la imagen. Considere un artículo: “15 de los automóviles con mayor consumo de combustible en 2014”. Naturalmente, este artículo contendrá al menos 15 imágenes. Y no importa la altura del dispositivo de visualización: monitor, tableta o teléfono inteligente, no puede colocar las 15 imágenes en el marco de la vista. Debes desplazarte hacia abajo para ver todas las imágenes..

Con la Carga diferida habilitada, las imágenes se cargarán solo cuando un visitante esté cerca de la imagen. En otros términos, las imágenes comienzan a cargarse justo cuando te desplazas hacia abajo para verlas. Sin embargo, las primeras imágenes se cargan instantáneamente, ya que ya está en el marco de la vista. Lazy Loading ahorra ancho de banda en ambos extremos y mejora el tiempo de carga. Puede usar Lazy Loading en WordPress con el BJ Lazy Load Plugin.

5. No usar un CDN

red cdn

El uso de una red de entrega de contenido (CDN) servirá la imagen desde un servidor que esté físicamente más cerca de la ubicación del visitante. Si un visitante de la India solicita una imagen, y la CDN tiene un POP (punto de presencia, o simplemente un servidor) en Tokio y Nueva York, la imagen se servirá desde el servidor ubicado en Tokio.

Cuando tenga un tráfico considerable, debe configurar un CDN con WordPress para reducir el tiempo de carga y obtener un rendimiento general. Aquí en WPExplorer, recomendamos Flama de nube. Para sitios recién nacidos, recomendamos una lista de servicios CDN gratuitos que puede probar.

6. No declarar el atributo “alt”

El atributo “alt” describe la imagen para el motor de búsqueda. El texto que ingrese en este campo se mostrará al usuario en caso de que la imagen no se pueda cargar. Mucha gente tiende a dejar estos campos en blanco. Esto es muy perjudicial para el SEO, y se pierde el tráfico. Siempre debe intentar incluir las palabras clave de su sitio en la etiqueta alt de sus imágenes.

7. No optimizar imágenes

puntas de crayones

Las imágenes optimizadas son un 40% más claras que las imágenes normales. Esto mejora el tiempo de carga y ahorra ancho de banda. De la lista de Freddy de los mejores complementos de optimización de imagen de WordPress, recomendamos WPSmush.it para optimizar tus imágenes. Kraken.io También es una excelente opción en línea para comprimir imágenes en un santiamén. Lo usamos todo el tiempo aquí en WPExplorer para optimizar las imágenes destacadas antes de subirlas a publicaciones y demostraciones de temas..

8. Imágenes receptivas

El diseño web receptivo ya está aquí

El diseño web receptivo ya está aquí

Incluso si su sitio es receptivo, no significa que sus imágenes lo sean. Eso significa que la imagen de encabezado que utiliza para una pantalla de escritorio de 22 “también se sirve en un iPhone de 5”. Cuando carga una imagen, WordPress la redimensiona en varias versiones: miniatura, mediana, tamaño completo, etc. El desarrollador puede cambiarla. Un tema bien codificado servirá a la versión de tamaño “Medio” de la imagen, ahorrando así ancho de banda.

los Picturefill.WP el complemento reemplazará las etiquetas de imagen con un nuevo elemento que serviría diferentes imágenes basadas en consultas de medios. Es bastante experimental (eso significa que hay errores) y no debe usarse en un sitio en vivo.

9. Subtítulos de imagen

Los subtítulos no siempre son necesarios, aunque en algunos casos es obligatorio, como las capturas de pantalla en un tutorial. Subtitular imágenes ayuda a los lectores a comprender mejor el tema, al tiempo que aumenta su SEO.

10. Nombre de archivo de imagen

Piensa en el nombre del archivo desde el punto de vista de un motor de búsqueda. Use el mismo texto que usaría en la etiqueta de “título” de la imagen. Además, intente incluir las palabras clave más relevantes para su sitio.

Conclusión

hero-11

Image SEO es de vital importancia para cualquier sitio web, antiguo o nuevo. Gente que implementa imagen SEO correctamente (puede ser bastante mundano a veces), puede ganar una cantidad significativa de tráfico orgánico (el mejor tipo de tráfico) en el largo plazo.

¿Tienes una técnica de optimización increíble? Disparar!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map