Post Top Ad

Your Ad Spot

martes, 21 de abril de 2020

Optimizar imágenes para web

Cuando se trata de comercializar su sitio web, hay muchos aspectos diferentes a considerar, como la velocidad, el SEO, las tasas de conversación, la tasa de rebote y muchos otros. Normalmente nos centramos únicamente en el aspecto del rendimiento, pero hoy queremos sumergirnos en formas adicionales de optimizar imágenes para la web . El tamaño de archivo de sus imágenes, por supuesto, es muy importante, pero el SEO y las redes sociales también juegan un papel importante para ayudar a que su sitio web funcione y se convierta mejor.
A continuación, analizaremos las tres áreas en las que puede optimizar mejor las imágenes para la web:
  1. Cómo optimizar imágenes para un mejor rendimiento web.
  2. Cómo optimizar las imágenes para SEO para clasificar e indexar mejor en los motores de búsqueda.
  3. Cómo optimizar las imágenes para las redes sociales para un mejor compromiso y CTR.

1. Optimizar imágenes para el rendimiento#

Cuando se trata de optimizar las imágenes para el rendimiento, hay muchas cosas que puede hacer, como escalar, comprimir, usar imágenes receptivas, servir desde un CDN y elegir el formato de archivo correcto.

Escalado de imagen#

Cuando se trata de trabajar con imágenes, comenzar desde lo básico puede ser muy importante, y nos referimos a cómo se escalan las imágenes. La mayoría de ustedes probablemente haya visto la siguiente sugerencia de optimización de Google PageSpeed ​​Insights en un momento u otro al ejecutar una prueba de velocidad:
Al comprimir y ajustar el tamaño de ... puede ahorrar 14,2 KB (54%).
Esta recomendación se refiere a que sus imágenes se reducen de las dimensiones originales, ya sea a través de CSS o un atributo HTML. Por ejemplo, esto ocurriría si una imagen que se sirve tiene un ancho original de 1460 píxeles pero se sirve a 730 píxeles para que quepa en el contenedor en el que se ha colocado. Esto puede ser un problema en muchos sistemas de administración de contenido como como WordPress o Magento, porque los desarrolladores de temas tienden a reducir las imágenes en temas receptivos utilizando CSS.
optimize image scale
Por lo general, se recomienda cargar imágenes a escala . Esto significa recortar imágenes antes de cargarlas, lo que ahorrará recursos y también lo mantendrá conforme con las pautas de PageSpeed ​​Insight. Alternativamente, puede cargar múltiples resoluciones de sus imágenes y servir la resolución correcta para el dispositivo correcto.

Compresión de imagen#

¿Cuánto de un sitio web está compuesto de imágenes? Bueno, según HTTP Archive , a partir del 1 de junio de 2019, la página de escritorio promedio es de 1,896.8 KB y la página móvil promedio es de 1,683.5 KB. Esto significa que el 51% de los bytes promedio por página, ya sea en computadoras de escritorio o dispositivos móviles, están formados únicamente por imágenes. ¡Encontramos que el 46% de los expertos dijeron que la prioridad o el enfoque número uno debería estar en la optimización de la imagen!
Una manera fácil de comprimir imágenes es con nuestro servicio de procesamiento de imágenes que también está completamente integrado en nuestra red existente. Permite una completa transformación y optimización de imágenes sobre la marcha. Las imágenes ahora se pueden comprimir en tiempo real con parámetros de consulta simples y luego serán entregadas por nuestro CDN.
Alternativamente, aproveche la compresión inteligente de imágenes con el optimizador de imagen Optimus. Este es un poderoso complemento de WordPress y API de compresión de imágenes que puede reducir el tamaño de las imágenes sin ninguna pérdida visible de calidad. La conversión de WebP es compatible con una licencia paga . Optimus permite que las imágenes se optimicen y luego se almacenen. Esto es útil si desea almacenar imágenes optimizadas en lugar de utilizar un servicio de procesamiento de imágenes en tiempo real.
Dependiendo de la imagen y el formato, es posible reducir el tamaño hasta en un 70%. Optimus se puede instalar en cualquier sitio web de WordPress o puede utilizar la API para usarla en cualquier plataforma. La biblioteca PHP para la API está disponible en GitHub .
Al utilizar Optimus, también puede corregir la siguiente sugerencia de optimización de PageSpeed ​​Insights:
Al comprimir ... podría ahorrar 4.7 KB (30%) sin pérdidas.

Imágenes receptivas#

Imagen Responsive técnicas, como el srcsetsizesmediaatributos HTML, permiten diferentes imágenes a escala que se entregarán en función del tamaño y la resolución del dispositivo de acceso a. Esto le permite optimizar aún más la entrega de su imagen para mejorar el rendimiento general de su sitio web o aplicación.
Por ejemplo, a continuación se muestra el marcado de una imagen que no respondería:
<img src="/img/blog/responsive-images.png" alt="responsive images">
Ahora, agregar los atributos receptivos permitiría al navegador seleccionar y mostrar la imagen definida cuando se cumplan ciertas condiciones:
<img sizes="(min-width: 1200px) 730w,
            (max-width: 1199px) 610w,
            (max-width: 380px) 350w"
     srcset="/img/blog/responsive-images-lg.png 730w,
             /img/blog/responsive-images-md.png 610w,
             /img/blog/responsive-images-sm.png 350w"
     src="/img/blog/reponsive-images.png"
     alt="responsive images">
Si está ejecutando WordPress, estos ahora son parte del núcleo desde WordPress 4.4 , por lo que no tiene que preocuparse por agregarlos. El complemento de habilitación de caché de KeyCDN es totalmente compatible con los atributos HTML que hacen que las imágenes respondan.

Imagen CDN#

El uso de una red de entrega de contenido como KeyCDN, o lo que también llamamos una imagen CDN , puede ser una de las formas más fáciles y rápidas de acelerar la entrega de sus imágenes. La razón principal es porque disminuye la latencia para el usuario donde se encuentran al servir sus imágenes desde un POP físicamente más cercano a ellas. También permite un control adicional sobre el almacenamiento en caché de sus imágenes, así como la protección de hotlink.
Realizamos algunas pruebas de CDN de imagen y los resultados fueron que el tiempo total de descarga de nuestros activos de imagen con un CDN habilitado disminuyó en un 65% en promedio. El TTFB y los tiempos de descarga de contenido fueron los dos factores más importantes que disminuyeron al implementar una CDN.

Formatos de archivo: PNG, JPEG, WebP y SVG#

Una de las formas finales en que puede optimizar las imágenes para el rendimiento web es tener una buena estrategia para los formatos de archivo que usa. PNG y JPEG son los formatos de archivo de imagen más utilizados en la web. Sin embargo, hay otros dos formatos que también debe considerar, y es WebP y SVG. Estos son, con mucho, el tamaño más pequeño y pueden hacer maravillas para reducir el tamaño total de su página web.

WebP#

WebP es un formato de imagen desarrollado por Google para garantizar una compresión superior de las fotos. De hecho, incluso usan WebP ellos mismos en sitios web como YouTube. Realizamos una prueba en WordPress con 5 imágenes JPEG grandes para demostrar cuánta compresión tiene lugar realmente cuando se convierte al formato WebP y la diferencia de tamaño significativa entre los dos formatos. Estamos utilizando compresión sin pérdidas con Optimus para optimizar las imágenes y también convertirlas al formato WebP al cargarlas en la biblioteca de medios. El complemento Cache Enabler luego entrega imágenes WebP basadas en navegadores compatibles.
Nombre del archivoTamaño originalJPEG comprimidoFormato WebPDiferencia de tamaño
jpg-to-webp-1.jpg480 KB407 KB43 KB89%
jpg-to-webp-2.jpg659 KB578 KB113 KB80%
jpg-to-webp-3.jpg787 KB715 KB127 KB82%
jpg-to-webp-4.jpg617 KB543 KB61 KB88%
jpg-to-webp-5.jpg605 KB543 KB70 KB87%
Luego realizamos una prueba de comparación de páginas con GTmetrix, JPEG vs WebP, y puede ver la diferencia total en el tamaño de la página. WebP resultó en una disminución del 77% en el tamaño de la página.
jpeg to webp

SVG#

Los gráficos vectoriales escalables (SVG) permiten que los gráficos vectoriales se muestren en el navegador. Se usan comúnmente para logotipos de empresas, como el logotipo de KeyCDN que ve en la parte superior de este sitio web. Los archivos SVG tienen un tamaño de archivo muy pequeño, se pueden escalar sin pérdidas sin aumentar el tamaño del archivo y se pueden animar o modificar con JavaScript. Otra ventaja de las imágenes SVG es que pueden ser comprimidas por Brotli o Gzip.
Cuando se trata de usar SVG, puede incluirlos como lo haría con cualquier otra imagen, por ejemplo:
<img src="/img/blog/example.svg">
Sin embargo, esto puede ser un poco más complicado si está utilizando un sistema de administración de contenido como WordPress, ya que este tipo de archivo no está permitido por razones de seguridad.
svg not permitted wordpress
Puede usar un complemento gratuito como SVG Support o Add Full SVG Support para poder cargar SVG en la biblioteca de medios de WordPress.

2. Optimizar imágenes para SEO#

Cuando se trata de optimizar imágenes para SEO, hay muchas cosas que puede hacer, como nombrar sus imágenes estratégicamente, usar el texto alternativo correcto, los mapas de sitio de imágenes y asegurarse de que se indexen correctamente con los motores de búsqueda.

Nombres de archivos de imagen#

Cuando nombre sus imágenes, siempre debe tener en cuenta que los robots de búsqueda y los rastreadores son responsables de verlas. No puede esperar que un algoritmo de computadora sea perfecto o adivinar cuál es su imagen, por eso se recomienda nombrar los nombres de sus archivos de imagen como algo similar al contenido de su publicación o palabra clave en la que se está enfocando.
Por ejemplo, en este artículo, nuestra imagen destacada se llama "optimizar-imágenes-para-web" porque ese es el tema de este artículo. Siempre use guiones cuando hay varias palabras. Los motores de búsqueda, como Google, ve los guiones como un separador. No use guiones bajos, de lo contrario, Google leerá todo como una palabra.

Texto alternativo de imagen#

El texto alternativo, también conocido como etiquetas alt, describe la imagen y el propósito de la misma en la página. En general, querrá que sea breve pero descriptivo. Vea el ejemplo nuevamente debajo de nuestra imagen destacada y el texto alternativo que elegimos. Muchas veces esto puede ser similar al nombre de archivo que elija.
<img src="/img/blog/optimize-images-for-web.png" alt="optimize images for web">
El texto alternativo también es utilizado por lectores de pantalla, los navegadores utilizados por personas ciegas y con discapacidad visual, para decirles lo que hay en la imagen. Cada imagen en una página debe tener texto alternativo . Google también les asigna un alto valor para determinar cómo se clasifica su imagen y cómo se relaciona con el contenido de su página. Si está utilizando un sistema de gestión de contenido como WordPress, hay un campo para ingresar el texto alternativo cuando carga su imagen. De lo contrario, simplemente puede incluirlos en su HTML como se ve arriba.
wordpress alt text

Etiquetas de título de imagen#

Google no requiere el atributo de título de imagen, también denominado etiquetas de título. Sin embargo, recientemente se ha debatido sobre esto en Search Engine Roundtable en una publicación llamada Google Does Index & Rank Images Title Attribute Tags . Dawn realizó una prueba con la palabra "plinkyploppitypippity" en el campo de atributo de título y dejó el texto alternativo vacío. Unos días después descubrió que Google había indexado su imagen para ese término.
Ahora hay algunas cosas más que considerar aquí antes de volver y agregar etiquetas de título a todas sus imágenes. Primero, lo más probable es que Google asigne mayor prioridad al texto alternativo de todos modos, por lo que incluso si tuviera ambos, el atributo de título podría no importar. Una segunda cosa a tener en cuenta es que ella usó el término "plinkyploppitypippity" en su contenido corporal de la publicación, lo que significa que es posible que Google haya asociado su contenido de publicación con la imagen e indexado.
En caso de duda, puede agregar la etiqueta del título, ya que no dañará nada. Pero tampoco esperes ver ganancias.

Mapa del sitio de imagen#

Los mapas de sitio de imágenes proporcionan información que ayuda a Google a descubrir imágenes que de otro modo no podrían encontrar (como las imágenes que alcanza su sitio con código JavaScript) y le permite indicar imágenes en su sitio que desea que Google rastree e indexe. Los mapas de sitio no son necesariamente necesarios si su sitio web está configurado correctamente, pero al usarlos también puede ayudarlo a diagnosticar problemas con su sitio y profundizar en los datos.
Por ejemplo, puede verificar si sus imágenes están indexadas mirando los datos del mapa del sitio en Google Search Console o utilizando el operador de búsqueda del sitio en Google. En este ejemplo, estamos utilizando WordPress y el complemento Yoast SEO para crear y enviar nuestros sitemaps. También puede usar una herramienta de terceros como xml-sitemaps.com .
  1. En Google Search Console, haga clic en "Rastrear" y luego en "Sitemaps".
  2. Luego haga clic en la pestaña "Imágenes" y podrá ver la cantidad de imágenes indexadas del total enviado, dentro de cada uno de sus mapas de sitio.

Imágenes de indexación#

Cuando se trata de que Google encuentre sus imágenes, definitivamente quiere asegurarse de que estén indexando correctamente. Una forma de ayudar a solucionar problemas es usar un archivo de mapa del sitio como describimos anteriormente. Otra es asegurarse de que la configuración de su servidor o CDN esté configurada correctamente. Los motores de búsqueda buscan un archivo robots.txt en la raíz de un sitio. Si el archivo está presente, seguirán las instrucciones, pero si no hay ningún archivo, analizarán todo.
Aquí hay un archivo robots.txt típico que permite todo. Por lo general, eso es suficiente para garantizar que sus imágenes puedan rastrearse.
User-agent: *
Disallow:
  1. La primera línea define el rastreador al que se aplica la regla. User-agent: *se aplicaría a todos los bots, como Googlebot, Bingbot, etc.
  2. La siguiente línea define qué ruta se puede indexar. Disallow:le dice al motor de búsqueda que indexe todo.
Cuando agrega un CDN a la mezcla, hay algunas cosas adicionales que debe habilitar. Como un CDN copia sus activos, debe decirle a Google eso. Puede hacerlo agregando un encabezado canónico que le permita al rastreador de Google saber que el contenido del CDN es una copia. Una vez que agregue rel="canonical"al encabezado HTTP, sus imágenes se indexarán normalmente ya que el rastreador sabrá que son solo una copia y no contenido duplicado.
canonical tag
Si está utilizando WordPress y sus imágenes de CDN comienzan a desindexarse de su cuenta de Google Search Console, es probable que se trate de un problema de estructura del mapa del sitio. Suponiendo que está utilizando el complemento Yoast SEO WordPress, es posible que deba agregar un fragmento en la parte superior de su functions.phparchivo.
Otra cosa a tener en cuenta si está utilizando Yoast es que a veces sus páginas de archivos adjuntos de imágenes pueden comenzar a indexarse. Cada imagen que cargue en WordPress se encuentra en su propia URL de página adjunta. Definitivamente no quieres que la gente los vea, especialmente Google. Una forma de solucionar esto rápidamente es simplemente ir a la configuración avanzada de SEO de Yoast y habilitar el "Redirigir" para las URL adjuntas.
yoast redirect attachment URLs

3. Optimizar imágenes para redes sociales#

Cuando se trata de optimizar las imágenes para las redes sociales, hay muchas cosas que puede hacer para mejorar su CTR y participación, como asegurarse de configurar etiquetas META de gráficos abiertos de Facebook, tarjetas de Twitter, pines ricos de Pinterest y fragmentos de Google. También es importante que dimensione sus imágenes correctamente.

Metaetiquetas de Open Graph de Facebook#

Las metaetiquetas de Facebook Open Graph controlan cómo aparece su contenido en Facebook. Cuando comparte una publicación en Facebook, las etiquetas le dicen a Facebook qué configurar para su URL, título, descripción y una de las partes más importantes, su imagen. Vea el siguiente ejemplo de una publicación en nuestra página de Facebook de nuestro blog.
facebook open graph meta tag
Hay muchas propiedades meta diferentes que puede usar, pero estas son las más importantes.
<meta property="og:url" content="https://www.keycdn.com/blog/resource-hints">
<meta property="og:type" content="article">
<meta property="og:title" content="Resource Hints - What is Preload, Prefetch, and Preconnect? - KeyCDN">
<meta property="og:description" content="Check out how you can use resource hints and directives such as preload, prefetch, and preconnect, to speed up delivery of assets on your websites.">
Estos se pueden agregar fácilmente a cualquier sitio estático de forma manual o si está en un sistema de administración de contenido como WordPress, Yoast es un excelente complemento gratuito que puede agregar estas etiquetas automáticamente. Solo asegúrate de que estén habilitados en la configuración Social del complemento.
yoast open graph meta data
Un tamaño de imagen recomendado que funciona bien para Facebook es de 1.200 x 630 píxeles. Con el complemento Yoast en WordPress puedes configurar manualmente las propiedades de OG. Esto es útil si quizás su tema de WordPress usa un tamaño para una imagen destacada, pero aún así desea que su imagen de Facebook se vea perfecta en píxeles.
facebook custom image

Tarjetas de Twitter#

Las tarjetas de Twitter funcionan de manera muy similar a la forma en que funcionan las metaetiquetas de Open Graph de Facebook. Se utilizan para mostrar la parte de vista previa en un tweet. Hay cuatro tipos principales de tarjetas de Twitter:
  • Tarjeta de resumen: título, descripción, miniatura y atribución de la cuenta de Twitter.
  • Tarjeta de resumen con imagen grande: similar a una tarjeta de resumen, pero con una imagen destacada.
  • Tarjeta de aplicación: una tarjeta para detallar una aplicación móvil con descarga directa.
  • Tarjeta de jugador: una tarjeta para proporcionar video / audio / medios.
A continuación se muestra un ejemplo en el que alguien tuiteó una URL de nuestro blog y Twitter y luego tuvo que confiar en nuestra tarjeta de Twitter para extraer la imagen grande y el resumen.
KeyCDN@KeyCDN
KeyCDN Launches POP in Helsinki https://www.keycdn.com/blog/pop-in-helsinki #webperf

KeyCDN Launches New POP in Helsinki - KeyCDN

KeyCDN is dedicated to global expansion and development. We're excited to announce that we're establishing our presence in Finland with a POP in Helsinki.
keycdn.com
6
11:43 - 25 oct. 2018
Información y privacidad de Twitter Ads
Ver los otros Tweets de KeyCDN
Hay diferentes propiedades de meta nombres por tipo de tarjeta de Twitter. A continuación se muestra un ejemplo del código para una Tarjeta de resumen con imagen grande.
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@KeyCDN">
<meta name="twitter:creator" content="@KeyCDN">
<meta property="og:url" content="https://www.keycdn.com/blog/pop-in-helsinki">
<meta property="og:type" content="article">
<meta property="og:title" content="KeyCDN Launches POP in Helsinki - KeyCDN">
<meta property="og:description" content="KeyCDN is dedicated to global expansion and development. We're excited to announce that we're establishing our presence in Finland with a POP in Helsinki.">
Estos se pueden agregar fácilmente a cualquier sitio estático de forma manual o si está en un sistema de administración de contenido como WordPress, Yoast puede agregar estas etiquetas automáticamente. Solo asegúrate de que estén habilitados en la configuración Social del complemento.
yoast twitter card large image
Un tamaño de imagen recomendado que funciona bien para Twitter es 1.024 x 512 píxeles. Nuevamente, en el complemento Yoast en WordPress puedes configurar manualmente las propiedades del meta nombre.
yoast custom twitter card

Pinterest pines ricos#

Pinterest tiene lo que ellos llaman alfileres ricos. Actualmente hay 6 tipos diferentes de pines enriquecidos: aplicación, película, receta, artículo, producto y lugar. De hecho, usan metadatos de Open Graph al igual que Facebook. Entonces, si ya tiene esas etiquetas en su sitio, debería estar listo. Sin embargo, en realidad tienes que aplicar una vez para usar alfileres ricos .
  1. Vaya al validador de URL de Pinterest .
  2. Valide una URL de su sitio. Cualquier URL que tenga metadatos de Open Graph.
  3. Haga clic en "Aplicar" si todo está configurado correctamente.
Una vez que haga clic en Aplicar, debería recibir un correo electrónico en unos minutos. Luego, los datos de pin enriquecidos comenzarán a aparecer en Pinterest. Aquí hay un ejemplo a continuación de los diferentes pines que la gente ha marcado desde nuestro sitio.
pinterest rich pins

Resumen#


Como puede ver, hay muchas maneras diferentes de optimizar imágenes para la web. No siempre se trata solo del rendimiento web, a pesar de que generalmente estamos un poco sesgados en ese frente. Pero cuando se trata de comercializar, la velocidad, el SEO y las redes sociales juegan un papel importante en el éxito de su sitio o marca en la web. ¿Tiene otros consejos de optimización de imágenes que quizás nos perdimos? ¡Siéntete libre de comentar abajo!

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas