Hola. El contenido de nuestro blog ha sido autotraducido para tu conveniencia. Te ofrecemos una disculpa en caso de alguna traducción extraña.

La optimización de Imágenes para Web: Una Guía Práctica

Nov 8, 2016 by Michelle Nickolaisen
A practical guide to optimizing images for the web
Posted Nov 8, 2016 by Michelle Nickolaisen

Las imágenes son cruciales para la ejecución de una tienda de comercio electrónico con éxito — después de todo, si tus clientes potenciales no pueden ver lo que están comprando, no son muy propensos a comprar. Las imágenes también pueden hacer o romper su blog, mejorar su SEO, y mucho más.

Sigue leyendo para averiguar cómo hacer que tus fotografías y imágenes de trabajar para usted.

¿Por qué la imagen de la optimización de la materia?

El beneficio más obvio para la optimización de las imágenes es que es mejor para usted en el largo plazo.

Esto hace que los usuarios quieren quedarse en su sitio web (porque se puede ver claramente sus imágenes y no se tarda mucho en cargar).

Esto hace que su sitio web sea más fácil de encontrar en los resultados de búsqueda (debido a la buena optimización de la imagen también es amigable para los buscadores).

También está el hecho de que es bueno para sus usuarios. Optimización de la imagen, aparte de la general, siendo más amigable con el usuario, también ayuda a hacer que su sitio web sea más accesible para las personas con discapacidad visual (quién podría ser el uso de lectores de pantalla que sacar de las etiquetas alt para describir la imagen para el usuario).

Lo que significa más visitantes de sus sitios web y, potencialmente, más ventas.

Leer también: Formas sencillas para hacer sus productos más atractivos a los consumidores

Optimización de la imagen 101

Así que lo que pasa en la optimización de imagen?

Los nombres de archivo y el código

La primera y la cosa más fácil que puedes hacer es cambiar tu imagen de archivo del archivo a algo descriptivo, en lugar de 10934.jpg.

Describir lo que se muestra en la imagen ("RedCorvette.jpg") o lo que está en el post, si esta es una entrada de blog ("MaintainingYourCorvette.jpg").

Después de, usted puede agregar una etiqueta del "alt" .

Esta es una etiqueta que va en el código de la imagen que da una breve descripción de lo que la imagen que usted desea para describir la imagen, en pocas palabras, mientras que el uso de palabras clave relevantes.

Vamos con el ejemplo anterior, usted podría tener una etiqueta alt de "2010 Corvette Rojo De Mantenimiento."

Pero no de palabra clave material de la etiqueta alt — no agregar "coche corvette rojo de mantenimiento 2010 de automóviles tienda comprar" como alt-etiqueta debido a que puede configurar los filtros de spam en los algoritmos del motor de búsqueda, y además no es amigable para el usuario con discapacidad visual a los espectadores.

La mayoría de los sitios tienen una forma fácil de editar las etiquetas alt, pero si no, puede hacer clic en "ver código fuente" o "ver" HTML en el editor de texto para acceder y editar tu mismo.

Alt-Tags_HTML_Image_Code.png

Aparte del nombre y la etiqueta alt, muchos constructores de sitio (como WordPress) le dará un espacio para el título de la imagen, título, y la descripción (y le permitirá editar la etiqueta alt) al cargar una imagen, como se muestra a continuación.

Llenar todos los campos disponibles, es la mejor regla de oro para la optimización. El título se mostrará el promedio de espectadores, pero todo lo demás va a ser sobre todo ser utilizado por los motores de búsqueda y los lectores de pantalla (para personas con discapacidad visual a los espectadores que se basan en las descripciones de las imágenes).

 image descriptions

Las descripciones de las imágenes en WordPress

Tamaño y formato

Reducir sus tamaños de archivo de imagen. Obviamente, desea que las imágenes que ser lo suficientemente grande para ver, pero no es necesario subir las imágenes que están a miles de píxeles de ancho y alto.

Asegúrese de no subir la imagen a tamaño completo y luego simplemente cambiar las dimensiones que aparece como a través del código de la imagen. Si haces eso, la computadora del visitante tendrá que cargar la imagen a tamaño completo y va lento el tiempo de carga hacia abajo.

No hay un duro y rápido regla para el tamaño de archivo o dimensiones, pero lo fundamental es "el tamaño de archivo más pequeño posible sin hacer que la imagen es demasiado pequeña o es ilegible."

Para la de en línea de imágenes del blog, muchos sitios va con un ancho de 500-800 y una altura de 300-600. Usted puede incluir siempre un enlace a la imagen a tamaño completo para que la gente pueda obtener una imagen más grande cuando se haga clic en.

Tan lejos como el tamaño del archivo va, sus imágenes nunca debe ser mayor que 1 MB, e idealmente, la mayoría de ellos será de alrededor de 100-200 kb.

También puede reducir la resolución a reducir el tamaño del archivo, pero con el auge de las pantallas de retina, usted no quiere reducir la resolución demasiado o las imágenes se ven borrosas en esas pantallas.

Para cambiar el tamaño del archivo, generalmente, usted puede elegir para exportar una imagen con una calidad ligeramente inferior, cambiar las dimensiones de la imagen, o cambiar el tipo de archivo (ver más abajo).

Utilizar el derecho de formato de archivo para el trabajo. Para la mayoría de los usos, .jpg será su mejor apuesta. Es compatible con la mayoría de los colores con el menor tamaño posible.

Gifs tienden a ser más grandes de tamaño en el archivo sabio para imágenes estáticas, pero son grandes para imágenes animadas (Giphy, nadie?).

Esta es una gran manera de mostrar su producto desde todos los ángulos o en movimiento sin que los usuarios cargar un video completo — Ecwid permite el uso de gifs animados para que.

Para imágenes con texto, .png es una buena opción, las imágenes tienden a ser más grandes en tamaño del archivo, pero tiene más texto (y también el apoyo a la transparencia).

Las mejores prácticas para las imágenes

En su sitio:

  • Asegúrese de incluir toda la información adicional posible, para hacer que su producto entradas de blog y páginas amigable para los buscadores.
  • Incluyen múltiples ángulos de sus productos.
  • Asegúrese de establecer una imagen destacada, como que por lo general la imagen que ha sacado medios de comunicación social de las previsualizaciones.

Siempre el uso de alta calidad de las imágenes más amplia que la de 500px-1000px por sus imágenes de los productos. Después de subir a su tienda, Ecwid hosts de imágenes y hace que la carga rápida automática. Para asegurarse de que su tiempo de carga es el mejor posible, trate de no subir imágenes muy grandes, por ejemplo, en formato 4K.

It’s es mejor utilizar la plaza de imágenes de su producto y categoría de imágenes, como la plaza de las imágenes están adaptados a los dispositivos móviles y siempre se ven bien en todos los dispositivos. Check-out Ecwid tienda de demostración para un ejemplo.

Ecwid soporta retina-listo miniaturas creadas a partir de sus imágenes de los productos, así que don’t preocuparse acerca de su tienda en busca bien en las pantallas de retina!

Todo lo que tienes que hacer es iniciar sesión en su Panel de Control, a continuación, vaya a Configuración y, a continuación, "Lo Nuevo" para habilitar la función.

the Ecwid Control Panel

Aprende más: Cómo optimizar imágenes de productos: Instrucciones paso a paso y tener una visión general de los servicios de

En los medios sociales:

En general, usted no desea utilizar la misma imagen a través de múltiples redes sociales — es mejor ajustar la imagen para optimizar para cada red social. Check-out Hubspot social de los medios de comunicación de la imagen de hoja de trucos para obtener la imagen exacta especificaciones para todas las redes.

Si usted tiene importante texto en sus imágenes, asegúrese de que es fácil de leer como alguien que se desplaza a través de su Facebook o Twitter línea de tiempo.

Asegúrese de optimizar sus listados han aparecido imágenes que se ven bien en sitios como Facebook y Twitter.

Por ejemplo, Twitter automática de vínculo que se genera resúmenes (el Resumen de la Tarjeta o la Tarjeta de Resumen con ampliación de Imagen — para más información sobre tarjetas de Twitter, la cabeza aquí) va a utilizar la primera imagen de la página o el producto ofrecido imagen, así:

Su imagen principal debe ser optimizado para que se vea bien en el enlace de vista previa

Su imagen principal debe ser optimizado para que se vea bien en el enlace de vista previa

Algunos de los creadores de imagen en la sección de aplicación a continuación se pre-medios de comunicación social de la imagen de plantillas que puede utilizar para conseguir un salto de inicio.

Relacionados con la: Las mejores Aplicaciones Gratuitas para el Perfeccionamiento de Sus Medios de comunicación Social de Imágenes

En su boletín de noticias:

No confíe en las imágenes para transmitir las partes importantes de la correo electrónico.

Muchos proveedores de correo electrónico no mostrar las imágenes por defecto (y dará a los usuarios la opción de mostrar imágenes), así que si usted tiene partes importantes del mensaje en una imagen, un usuario puede escanear rápidamente y te la pierdas. En su lugar, el uso de imágenes como visual acentos para complementar las palabras en el correo electrónico.

Más y más personas están leyendo mensajes de correo electrónico en sus teléfonos, así que asegúrese de comprobar cómo sus correos electrónicos de visualización en pantallas más pequeñas mediante el envío de ti mismo una copia de prueba del boletín y de la lectura en el teléfono.

Esto también significa que usted quiere asegurarse de que sus imágenes tienen una resolución bastante alta para que se vean bien en las pantallas de teléfono — por ejemplo, el iPhone 6 tiene un PPI (píxeles por pulgada) de 326 y de la 6 además tiene un PPI de 401.

Leer también: Dónde Encontrar Imágenes Libres en la Web: Fotos De Stock, Las bases de datos de, y Boletines de noticias

Las aplicaciones que usted necesita para optimizar sus imágenes

Si quieres un programa gratis de Photoshop reemplazo, Check-out GIMP. Es gratis, de código abierto, y funciona en Windows, Mac, o Linux.

La desventaja es que tiene un poco empinada curva de aprendizaje de Photoshop, pero hay un montón de tutoriales en línea para ayudar a caminar a través de las cosas.

Que dicho, GIMP (o Photoshop) es, probablemente, la exageración para el promedio de blog post/imagen del producto. PicMonkey puede ayudarle a realizar operaciones básicas de edición de imágenes, junto con collages y creación de la imagen de los medios de comunicación social.

Si desea editar las imágenes en movimiento, Pixlr tiene varias opciones de aplicación, más una opción en línea. Si eres de edición de fotos, VSCO es una gran opción para

Por último, pero ciertamente no menos, hay Canva, que es menos de una imagen o foto app de edición de, y más de un gráfico con la herramienta de creación de imágenes en línea. Usted puede añadir fácilmente texto, marcos de fotos, fondos, y también ofrece los medios sociales de imagen lista de plantillas.

Todavía en la necesidad de producto de imágenes para editar? Para un curso intensivo en tomar fotos de los productos a través del smartphone, la cabeza aquí.

Leer también: Cómo hacer una buena base en las imágenes de sus productos sin utilizar Photoshop

No ha configurado su tienda de comercio electrónico todavía? Regístrate y empezar a usar Ecwid hoy.

About The Author
Michelle is a freelance writer living in Richmond, VA, with her Shiba Inu and cat named after the Hulk. When she's not writing about business, she can usually be found working on her novel series or other side projects, or training Brazilian jiu-jitsu.

Manténgase al día!

Obtenga consejos de e-commerce gratis, Noticias e ideas inspiradoras entregan directamente a su bandeja de entrada

Leer también