Ir al contenido principal

Cómo añadir una imagen en HTML

Si quieres aumentar tu tasa de conversión, debes pensar detenidamente en el diseño de tu sitio web. La gran mayoría la gente utiliza Internet para buscar productos y servicios, lo que hace que la red mundial sea un lugar muy competitivo. Para convertir en clientes a los visitantes del sitio web, debes hacer que tu sitio web destaque. Ahí es donde el SEO en la página puede resultar útil. Una de las formas más importantes en las que puedes optimizar tu sitio web es insertando imágenes, incluidas las imágenes HTML.

HTML significa Lenguaje de Marcado de Hipertexto. Se trata de un sistema estandarizado para etiquetar archivos de texto. Contiene información relacionada con los gráficos, el color y la fuente. Por eso es increíblemente importante añadir imágenes a tus páginas web. Si tienes curiosidad por añadir una imágenes en HTML, hay varios pasos a seguir.

Si deseas insertar una imágenes en HTML, puedes obtener más información sobre este proceso a continuación. A continuación, utiliza tus imágenes en HTML para mejorar tu clasificación en los resultados de búsqueda y atraer más visitantes a tu sitio web. Añadir una imagen en HTML es esencial tanto para las pequeñas y medianas empresas como para las grandes empresas, aquí aprenderás cómo añadir una imagen HTML a tu sitio web.

Insertar imágenes en páginas web con HTML

A la hora de añadir una imagen HTML a tu sitio web, tienes que entender por qué es importante. Insertar imágenes a tu sitio web puede hacer que la página sea más atractiva y legible. Si quieres crear un sitio web, es esencial que resulte lo más interesante posible.

Las imágenes, los vídeos y otros gráficos son una excelente manera de romper la monotonía. Existe el dicho de que "una imagen vale más que mil palabras", algo totalmente cierto cuando en lo que respecta a las imágenes en un sitio web. Incluso puedes etiquetar esas imágenes con ciertas palabras y frases clave que pueden ayudarte a mejorar tu clasificación en los resultados de búsqueda, lo que facilita a los motores de búsqueda averiguar de qué trata tu sitio web.

Evidentemente, los rastreadores web no tienen ojos. No pueden limitarse a mirar tu sitio web o las imágenes que hay en él y averiguar lo que ocurre. El código HTML se encarga de indicar a los motores de búsqueda de qué trata la imagen, lo que les permite indexar tu sitio web adecuadamente.

Si quieres insertar imágenes en tu sitio web mediante HTML, tienes que utilizar el código correcto. Algunas de las etiquetas que puedes necesitar incluir incluyen <img> y <body>. A continuación, hablaremos de esta importante sintaxis para insertar imágenes y etiquetas a tu página web.

Cómo añadir una imagen de fondo en HTML

Si quieres insertar una imagen de fondo mediante HTML, puedes utilizar el atributo de imagen de fondo colocándolo dentro de la etiqueta <body> mencionada anteriormente. Este es un ejemplo de código:

<body background =”image.png”>

Debes colocar el nombre del archivo de tu imagen PNG en lugar del término "imagen" en la cadena anterior. Puede que te lleve algo de práctica formular la codificación correctamente y que tengas que jugar con el gradiente de color para que la imagen aparezca como quieres. Siempre debes probar el código HTML mirando la imagen antes de pasar a la siguiente tarea.

Explicación de la sintaxis de las imágenes en HTML

HTML tag attributes

Hay varias secciones importantes de la sintaxis de las imágenes HTML que debes entender para que tus imágenes se muestren correctamente. Las etiquetas HTML que debes conocer incluyen:

  • <img>: esta es la etiqueta de imagen que se utiliza para insertar una imagen en la página web. Técnicamente, la imagen no está pegada en el sitio web, sino que está vinculada a las páginas web. Esta etiqueta crea un espacio de retención en el que la imagen referenciada aparecerá más tarde. Dado que se considera un elemento vacío, no hay etiqueta de cierre.
  • Src: Este término especifica la ruta del archivo de imagen. Cuando se carga una página web, el navegador la recupera de un servidor web y la inserta en la página. Si este atributo no es correcto, el navegador no podrá encontrar la imagen ni cargarla correctamente.
  • Alt: Este atributo es responsable del texto alternativo de la foto. Debe describir con precisión el archivo de imagen; el texto se mostrará si no se carga.

Estos son algunos de los términos más importantes que utilizarás para que tus imágenes aparezcan en tu sitio web.

Atributo HTML img src (fuente)

Como se ha mencionado anteriormente, el atributo src representa la fuente del archivo de imagen. Esto es importante para especificar de dónde procede la imagen. La fuente de la imagen es fundamental para trazar su trayectoria. Si este valor es incorrecto o el navegador no puede recuperar la imagen, esta no se cargará correctamente. Asegúrate de probar siempre el atributo src para asegurarte de que aparece correctamente antes de completar la codificación.

Atributo HTML alt

El atributo alt es el texto alternativo de una imagen y debe ser una descripción precisa de la misma. Si una imagen no se carga en un navegador, deberás evitar que haya un espacio en blanco en la pantalla. El texto alternativo se mostrará en el lugar donde debería aparecer la imagen. Por ejemplo, si un elemento de imagen tenía que cargarse pero falló debido a la lentitud de la conexión, en su lugar aparecerá el texto alternativo. El texto alternativo también puede aparecer mientras se carga una imagen, proporcionando a los visitantes del sitio una descripción mientras esperan. Por eso necesitas que el texto sea descriptivo para añadirlo a tus imágenes en HTML.

Explanation of alt attribute

El atributo alt también es importante para la SEO en la página. En realidad, un motor de búsqueda no puede ver la imagen. En cambio, se basará en tu descripción de la imagen para clasificarla adecuadamente. Si el texto alternativo contiene palabras y frases clave importantes, también podría facilitar a un motor de búsqueda la indexación de tu página web. Como resultado, esto podría mejorar tu clasificación en los resultados de búsqueda.

Además, el texto alternativo es excelente para la accesibilidad. Al añadir una breve descripción en el código HTML de la imagen, los lectores de pantalla pueden leer fácilmente el texto para los usuarios. Esto garantiza que la mayoría de los navegadores puedan ayudar a las personas con discapacidad visual a comprender el contenido que ofreces.

HTML y el tamaño de las imágenes

Puede que tengas curiosidad por saber cómo funciona el HTML para el tamaño de las imágenes. Hay diferentes tipos de código que puedes utilizar, pero es mejor usar el atributo "style" en lugar del atributo "width and height". Si decides utilizar el atributo "estilo", al insertar una imagen inmediatamente después especificarás la anchura y la altura de una imagen. Por ejemplo, el código podría decir:

  • Style="width:300px;height:400px."

Como alternativa, puedes utilizar los atributos de anchura y altura para cambiar el tamaño de la imagen en tu página web. Esto puede verse así:

  • Width="300"
  • Height="400"

Aunque ambas opciones son válidas, el uso del atributo de estilo es mejor porque evita que las hojas de estilo cambien el tamaño de las imágenes al añadir tus imágenes en HTML.

Otras formas de formatear las imágenes HTML

Hay otras formas de dar formato al insertar imágenes HTML. Estos incluyen:

  • Imagen de enlace: Puedes utilizar la etiqueta <a> para añadir un enlace a la foto. Así, puedes tener la URL de la imagen e incluir también el tamaño.
  • Imagen W3: También puedes utilizar la etiqueta de imágenes W3. Se utilizan para mostrar una imagen básica sin borde.
  • Imagen flotante: Puedes utilizar las propiedades CSS para que la imagen flote a la izquierda o a la derecha, cambiando su aspecto.
  • Mapa de imagen: Si quieres hipervincular ciertas partes de la imagen a diferentes zonas, tienes que utilizar un mapa de imagen. Por ejemplo, puedes querer hipervincular países en un mapa a determinadas páginas.

Consejos para añadir imágenes a tu página web

Si quieres sacar el máximo partido a las imágenes que añades a tu sitio web, hay algunos consejos que debes tener en cuenta. Estos incluyen:

Tips for adding images to your website
  • No publiques imágenes protegidas por derechos de autor. Hay muchos sitios web donde puedes encontrar imágenes gratis. Si encuentras una imagen en línea, comprueba si está protegida por derechos de autor antes de usarla.
  • Asegúrate de que las imágenes sean de alta calidad. Debes utilizar una imagen de alta calidad si quieres mostrar tu marca de forma eficaz. Utilizar una foto borrosa dará la impresión de que no te preocupas por tu sitio web, lo que podría ahuyentar a tus visitantes.
  • Optimiza las imágenes para la SEO. Además de añadir un atributo alt a tus imágenes, asegúrate también de tener en cuenta la velocidad de carga. Debes asegurarte de comprimir tus imágenes antes de añadirlas a tu sitio web. Si el tamaño del archivo es demasiado grande, la imagen tardará demasiado en cargarse y tu tasa de rebote puede aumentar.
  • Utiliza fotos relevantes. Independientemente de las imágenes que incluyas en tu sitio web, asegúrate de que sean relevantes para tu marca.

Si tienes en cuenta estos consejos, podrás sacar el máximo partido a las imágenes que insertes en tu sitio web. Añadir una imagen en HTML es más fácil cuando practicas.

Conclusión: Cómo añadir imágenes en HTML

Los puntos anteriores son algunos de los más importantes si quieres saber cómo añadir una imagen en HTML. Aunque la codificación de los elementos es complicada cuando se añade una imagen en HTML, hay formas de facilitar el proceso.

Aquí es donde puedes aprovechar las herramientas de creación de webs de Mailchimp. Nuestro creador de sitios web es fácil de usar y gratuito, por lo que puedes crear un sitio web de comercio electrónico profesional en minutos sin gastar una fortuna. Además, tendrás acceso a valiosos análisis que pueden proporcionar información sobre cómo interactúan los visitantes con tu sitio. Cuando se combina con nuestra colección de herramientas de marketing, puedes posicionar fácilmente tu sitio web para que tenga éxito y atraiga más tráfico.

Comparte este artículo