Si estas en el proceso de crear y diseñar tu propia página web y requieres usar elementos atractivos para promover novedades y llamar la atención de los usuarios de la red. Lo primero que debes saber es que, aquel dicho sobre que una imagen dice más que mil palabras, en Internet se hace más real.
Las grandes webs invierten cada vez más, en obtener mejores presentaciones y diseños, basados en la imagen. Una fotografía, logo o imagen en particular ayuda al contenido o texto en hacerse interesante, pues estamos condicionados a relacionar mejor lo que leemos con lo que vemos. Este enfoque es importante ya que llama a muchos usuarios a que se acerquen a las páginas por el simple hecho vistoso.
Para poder crear este enfoque debemos atender a ciertos criterios básicos sobre el diseño de páginas web. En primera instancia debemos recordar que todo lo que leemos, escuchamos y vemos en los portales que visitamos ha pasado por una etapa de programación. El formato para tal efecto es el conocido HTML que se basa en la combinación de comandos y textos que los navegadores amplían y desarrollan.
Por tanto insertar una simple imagen requiere de un conocimiento sobre los formatos usados en HTML. Por esta razón veremos cómo hacer el proceso para poner una imagen en formato HTML. Siguiendo los protocolos y detallando los comandos pronto podremos inundar de buenos gráficos nuestro portal web.
Las imágenes y sus formatos
En el marco de poder mejorar nuestras webs y entrar en proceso de insertar imágenes en HTML debe llamarnos la atención conocer los formatos de imágenes que se disponen en la web. Cada uno de ellos responde a un criterio de peso, capacidad máxima de colores y estilo.
En primer lugar están los formatos JPEG que quizás sea el más conocido ya que es el de mayor capacidad. Soporta hasta los 24 Bits y puede alcanzar a más de 16 millones de tonalidades, es el excelente para las imágenes complejas y fotografías profesionales o de aficionado.
Los formatos PNG son versiones mejoradas de los conocidos GIF. Este formato de imagen no es de gran rendimiento para imágenes compuestas o de gran almacenamiento de colores y matices. Tanto el PNG y el GIF son versiones que sólo sopesan los 256 colores y son realmente útiles en caso de tratarse de imágenes con logos o estampas sencillas.
Por ultimo están los formatos BMP siendo los más básicos de la configuración para imágenes, sirven para portar iconos en miniatura, apuntadores, ventanas configuradas e imágenes pequeñas. No son referenciales para imágenes complejas ya que al agrandarse se pixelean y pierden calidad.
Los Comandos en HTML
Para poder poner una imagen en HTML es importante captar que lo que realizaremos es una labor de programación. Lo que nos requiere un proceso particular de adaptación a los lenguajes de este tipo. Lo primero es el programa, para ello hay muchos que permiten adentrarnos en el diseño web, basta con hacer una búsqueda rápida y denotar cuál es el que mejor nos sirve.
Aún con la posible variedad de Software de programación los comandos son casi universales, por lo que no altera el proceso tener uno u otro, aunque puede mejorar el rendimiento. Los primeros comandos a reconocer son los de IMG que representa a la Imagen y el SRC que es un atributo que le acompaña.
Luego pueden devenir otros comandos como el de IMAGES en los casos en que almacenemos nuestra imagen en subcarpetas. Por tanto si deseamos insertar una imagen en HTML deberíamos utilizar el comando, <img src=”nombre de la imagen.jpg”>, si la imagen está en subcarpeta colocamos <img src=»images/nombre de la imagen.jpg»>.
Con solo atender a este sencillo formato ya podemos empezar a insertar las imágenes en nuestra web, recordando atentamente que el formato se sirve de la fórmula: IMG+SRC+=+”NOMBRE DE LA IMAGEN”. Formato contenido.
Comandos de Textos en Imágenes
Muchos usuarios deciden navegar en modos más rápidos y entre estos existen la modalidad de sólo texto, usada comúnmente para conexiones de lenta transferencia en la que sólo se muestran los contenidos escritos. En esos casos, los espacios ocupados por las imágenes son reducidos o copados en blanco.
Para ello podemos enlazar mejor en sentido de las imágenes añadiéndoles un texto alternativo. Este elemento se muestra como una pequeña descripción adjunta a la imagen que se visualiza al indicarla con el puntero o se deja ver en los casos de vistas en sólo textos.
Adjuntarle un comando de texto a la Imagen ayuda demás a un mejor posicionamiento SEO, ya que los navegadores toman en cuenta esta información y la procesan como dato precisa. En este sentido también ayuda mucho el renombrar las imágenes dándoles nombres que vayan directamente relacionadas a lo que son.
Para crear los textos en las imágenes se usa el comando ALT. El cual ha de colocarse en formula de programación e indicando el texto breve o descriptivo que deseamos concederle a la imagen, éste debe estar posicionado de la siguiente manera,
<img src=»NOMBRE DE LA IMAGEN.FORMATO»
alt=» TEXTO ALTERNATIVO «>
Tamaño y Títulos en las Imágenes
Los últimos elementos a considerar para poner imágenes en HTML, son los concernientes al tamaño de la Imagen y a los títulos que podemos añadirles. Para estos recursos se consideran importantes atender a los comandos WIDTH y HEIGHT correspondientes al tamaño y TITLE.
Para configurar mejor nuestra imagen en HTML tengamos a consideración que, los gráficos añadidos a la información mostrada deben ser ajustados a un nivel que les permita visualizarse de la forma más óptima, dependiendo del formato que soporten.
Si estamos tratando con formato JPEG las configuraciones se nivelan entre los 300 y 400 puntos en cada opción. Si hablamos de formatos de menor rendimiento o capacidad óptica los valores se estipulan por debajo de los anteriores. La forma de citar la acción en lenguaje de programación seria de la siguiente manera.
<img src=»images/NOMBRE DE LA IMAGEN.FORMATO»
alt=»Texto Alternativo o Descriptivo»
width=»400″
height=»341″>
Para los casos en que deseamos incorporar un texto visible a la imagen, incorporamos a la formula anterior el comando TITLE seguido del texto corto que deseamos adjuntarle. Este texto incorporado también es de valor ponderado ya que se destaca en la búsqueda SEO.
Ultimas consideraciones
Para complementar lo anteriormente mencionado es importante destacar que en el lenguaje de programación los comandos se detallan en líneas de programación. Si atendemos a la forma de la última formula descrita veremos cómo cada acción se va desglosando en líneas separadas.
Otro elemento a considerar es que a la hora de poner imágenes en HTML se debe asegurar el dominio de la imagen que se desea usar. Si se trata de un gráfico privado no se puede postear a no ser que se obtenga un permiso directo del propietario, de lo contrario habrá que encontrar imágenes de dominio público. Lo más recomendable es no publicar hasta tener la certeza de dónde procede cada imagen.
Evitar tener imágenes de baja calidad es una muy buena forma de evitarle un desaliento al usuario, hazte portador de imágenes que cautiven e impresionen, aquellas que generan curiosidad o que hablen por si solas. De esta forma podrás hacer que cada vez sean más los que entren en tu mundo de página web.