Cómo presentar mejor sus imágenes en línea

Independientemente del tipo de sitio web que tenga, es probable que su contenido sea una mezcla de texto e imágenes. Para fotógrafos, artistas y otros creativos, las imágenes de su sitio web probablemente formen la parte más importante de su contenido, por lo que es fundamental saber cómo presentarlas correctamente.

Claro, puede continuar y cargar fotos y gráficos a través del tablero de WordPress sin pensarlo más, pero si quiere asegurarse de que su sitio web se cargue rápidamente, sea fácil de leer y esté optimizado para los motores de búsqueda, haría bien en leer esto. breve guía de mejores prácticas cuando se trata de usar imágenes en su sitio web.

Guardar y cargar imágenes

Si bien WordPress ha hecho posible cargar imágenes enormes directamente desde su computadora y mostrarlas automáticamente para que se ajusten al ancho de su blog, no recomendamos que cargue imágenes sin procesar.

Cualquier navegador web es capaz de mostrar imágenes en un tamaño más pequeño de lo que realmente son si así se indica en el código, pero hacerlo no conduce a una reducción en el tamaño real del archivo. Una imagen de 500 kb que se muestra al 50 % de su anchura y altura completas seguirá siendo de 500 kb. Los bloggers que no son expertos en HTML y WordPress bien pueden suponer que debido a que sus imágenes no aparecen grandes en la pantalla, significa que se descargarán rápidamente, pero no siempre es así.

Para verificar el tamaño de su imagen, haga clic con el botón derecho o control-clic en una imagen dentro de su blog y elija ver/abrir imagen en el menú (la redacción variará ligeramente según el navegador que esté usando). Si la imagen que se abre es mucho más grande que la que ves en tu blog, significa que tus imágenes no tienen el tamaño adecuado.

Si tiene un blog con muchas imágenes y no cambia el tamaño de sus imágenes antes de cargarlas, el tamaño combinado de su página web podría ser innecesariamente grande.

Vale la pena tomarse un par de minutos adicionales para cambiar el tamaño y comprimir las imágenes antes de cargarlas. Esto se puede hacer fácilmente en Photoshop o cualquier otro software de edición de imágenes que utilice. También puede usar herramientas en línea gratuitas como PicMonkey y el Optimizador de imágenes de Dynamic Drive.

Cambiar el tamaño de las imágenes manualmente le brinda control total sobre la compresión y reducirá en gran medida el tiempo de carga, pero si lo desea, también puede optar por usar las imágenes redimensionadas que WordPress genera automáticamente con cada carga. Cuando inserta una imagen en una publicación, tiene la opción de insertar imágenes de tamaño completo, grande, mediano o en miniatura. Puede editar estos tamaños para adaptarlos al diseño de su blog en Configuración > Medios . Tenga en cuenta que si elige este método, sus imágenes originales a tamaño completo estarán disponibles para que cualquiera las descargue gratuitamente desde su sitio web, ¡ no es la mejor opción para fotógrafos e ilustradores!

Optimización de imagen y usabilidad

Además de asegurarse de que sus imágenes tengan el tamaño adecuado y estén optimizadas para el tiempo de carga de la página, también debe asegurarse de que estén correctamente marcadas para SEO (optimización de motores de búsqueda). El SEO facilita que los motores de búsqueda encuentren e indexen su sitio y es probable que un sitio que utiliza buenas técnicas de SEO aparezca más arriba en las páginas de resultados del motor de búsqueda en comparación con un sitio no optimizado.

Una discusión completa de SEO va más allá del alcance de este artículo (muchos temas de WordPress son compatibles con SEO desde el primer momento de todos modos), pero optimizar la metainformación de su imagen es una manera fácil de impulsar su SEO en el sitio y puede ayudar a las personas a encontrar su sitio a través de la búsqueda de imágenes de Google y otros motores de búsqueda basados ​​en imágenes.

Marcar correctamente sus imágenes también es importante para la usabilidad, especialmente si las imágenes ilustran información importante. En el caso de que una imagen no se cargue o no se pueda ver (ya sea debido a una conexión a Internet lenta, porque las imágenes están apagadas o para usuarios con discapacidades visuales), es imprescindible proporcionar una descripción de texto alternativa.

1. Nombre de archivo

En primer lugar, cuando guarde sus imágenes, asegúrese de que tengan un nombre de archivo descriptivo. Dejar las imágenes con el nombre IMG_013445.jpg o lo que sea que tengan cuando salgan de la cámara no le dará a los motores de búsqueda ninguna pista de lo que están representando. Use palabras clave descriptivas apropiadas separadas por guiones, por ejemplo, niños-jugando-océano.jpg

2. Texto alternativo

Cuando carga su imagen a través de Media Uploader, WordPress ofrece varios campos para descripciones de archivos. Si bien estos pueden dejarse en blanco (y muchos blogueros lo hacen para ahorrar tiempo), cuantos más campos llene, mejor para el SEO y la usabilidad. el más importante de ellos es el texto alternativo, abreviatura de "texto alternativo".

Este es el texto que se muestra cuando las imágenes están apagadas o no se pueden mostrar por algún otro motivo, por lo que debería actuar como una descripción de lo que es la imagen. Los motores de búsqueda también leen este texto y lo usan para decidir de qué se trata la página y dónde ubicar su sitio en los listados. Si eres un fotógrafo de bodas con sede en Texas, por ejemplo, querrás asegurarte de que el texto alternativo de todas las imágenes de tu blog incluya mucho texto descriptivo que incluya palabras clave como "fotógrafo de bodas" y "fotografía de bodas en Texas". Aunque tenga en cuenta que, al igual que con el texto de su blog, es importante no sobrecargar las palabras clave en las descripciones de sus imágenes.

Puede ser tentador copiar y pegar el mismo texto alternativo en todas sus imágenes para ahorrar tiempo, pero idealmente, cada una de sus imágenes debe tener un texto alternativo único que lo describa correctamente.

3. Título de la imagen

El título de la imagen es similar al texto alternativo pero tiene un propósito ligeramente diferente. En lugar de proporcionar información alternativa a la imagen, el título debe proporcionar información adicional . El título de la imagen es el texto de "información sobre herramientas" que aparece en un cuadro emergente cuando se desplaza sobre una imagen. Este texto es importante tanto para la usabilidad como para el SEO y debe proporcionar información rápida y relevante sobre la imagen o hacia dónde se vincula.

El título de la imagen debe ser ligeramente diferente del texto alternativo y, nuevamente, debe ser único para cada imagen.

4. Leyenda de la imagen

Una leyenda es un texto que se muestra generalmente debajo de la imagen y proporciona una descripción adicional o texto de apoyo. El uso de subtítulos es opcional, pero pueden ser útiles para proporcionar información adicional sobre su imagen o para citar la fuente si está utilizando imágenes de otro sitio. Piense en el título como si fuera una etiqueta de información en una exposición de galería de arte.

Vinculación de imágenes

De forma predeterminada, cuando inserta una imagen en una página o publicación, WordPress la vinculará a una nueva página con solo la imagen. No hay una razón real para esto e incluso puede ser perjudicial para su sitio en términos de SEO.

También puede ser un gran problema de usabilidad: si un usuario pasa el mouse sobre su imagen y ve que es un enlace, puede suponer que se vincula a una página con información útil. Hacer clic en estas páginas de solo imágenes es una pérdida de tiempo para el visitante e incluso puede hacer que pierda visitantes.

Para resolver este problema, simplemente seleccione "Ninguno" como el campo "URL de enlace" cuando cargue una imagen en WordPress, a menos que realmente quiera vincularla a una página específica. Si hace esto, asegúrese de usar el título o la leyenda de la imagen para indicar a dónde se vincula la imagen.

Ubicación de la imagen

Además de asegurarse de que sus imágenes estén optimizadas para SEO y sean fáciles de usar, también es importante pensar en cómo encajan dentro de su texto por razones estéticas y de legibilidad.

Es posible que prefiera utilizar imágenes en línea (más pequeñas que las columnas principales para que el texto las envuelva), imágenes de ancho completo o una combinación de ambas. Lo que debe evitar es usar imágenes independientes que no tengan el ancho completo o una serie de imágenes que tengan diferentes anchos, ya que esto se ve poco profesional y poco atractivo.

Para lograr esto, debe asegurarse de que sus imágenes verticales tengan el mismo ancho que sus imágenes horizontales. Esté atento a la altura de sus imágenes: si son demasiado altas, pueden desbordarse en pantallas de menor resolución. Esto hará que los usuarios tengan que desplazarse para ver la imagen completa, lo que debe evitarse. Si sus imágenes son demasiado grandes para mostrarse a todo lo ancho en formato vertical, puede hacer un collage de dos o más imágenes verticales una al lado de la otra.

Las imágenes en línea pueden proporcionar un poco de variedad a su contenido y ayudar a romper grandes paredes de texto. También son una buena opción para imágenes más pequeñas o estrechas que no son adecuadas para mostrarse a todo lo ancho.

Cuando usa imágenes en línea, de nuevo es mejor decidir sobre un ancho establecido para la consistencia visual. Esto no debe ser más de la mitad del ancho de la columna de texto, ya que las imágenes más anchas comprimirán demasiado el texto y dificultarán la lectura.

Las imágenes en línea siempre deben estar alineadas a la derecha en lugar de a la izquierda del texto, para no romper el margen izquierdo y reducir la legibilidad.

Embellece tu blog con imágenes

El uso de imágenes es importante para crear un blog interesante y visualmente atractivo y son aún más vitales cuando se trata de comercializar su negocio creativo.

Siga los consejos que hemos cubierto en este artículo para obtener imágenes bien optimizadas y bien presentadas, y su sitio web no solo se verá hermoso sino que también se cargará rápidamente, será un placer leerlo y será más atractivo para los motores de búsqueda. ¡Feliz publicación!