Cómo especificar el tamaño de la imagen en html5

diseñadores de páginas Web utilizan imágenes para entregar información importante, la navegación del sitio directa, y contribuir al aspecto general de una página web. Sin embargo, usted tiene que utilizar las imágenes correctamente, o corre el riesgo de reducir su eficacia.

Utilizar el altura y anchura atributos con el elemento para permitir que el navegador sabe hasta qué punto alto y ancho es una imagen (la unidad por defecto es píxeles, o píxeles):

Latón
Video: HTML - Tamaño y Posición de Imágenes

La mayoría de los navegadores HTML y descargar el texto asociado a una página de descarga antes de que los gráficos de páginas. En lugar de hacer que los usuarios esperan a toda la página para descargar, los navegadores suelen mostrar el texto primero y luego siga los pasos de gráficos a medida que estén disponibles.

Video: Ancho y Alto de Imagenes de HTML5

Si usted le dice al navegador cómo grande un gráfico es, el navegador puede reservar un lugar para él en la visualización de la página. Esto acelera el proceso de poblar gráficos - y otras cosas - en la página web.

Puede comprobar el ancho y la altura de una imagen en píxeles en cualquier programa de edición de imágenes o en los visores de imágenes integradas en Windows y Mac OS. (Es posible que pueda simplemente para ver las propiedades de la imagen, ya sea en Windows o Mac OS para ver su altura y anchura).

Otro buen uso de la altura y anchura atributos es la creación de líneas de colores en una página utilizando sólo un pequeño cuadrado de color. Por ejemplo, este marcado añade una caja azul 10-x-10-px a una página web:

Utilizar el elemento altura y anchura atributos para establecer altura de la imagen y anchura. De este modo se utilizan estos valores para crear una caja azul 10-x-10-px en una ventana del navegador (que se muestra en la parte superior de la figura) a pesar de que la imagen original es de 600 x 600 píxeles.

Video: Configurar tamaño de imagen en CorelDraw

En general, es seguro para reducir las dimensiones de imagen utilizando estos atributos aunque siempre se querrá comprobar los resultados con cuidado durante la prueba. Con cualquier tipo de imagen sensible aspecto de, desea mantener su relación de aspecto dividiendo las dimensiones originales de algunos valor común.

Esta figura también muestra cajas con dimensiones de 20 x 20 y 50 x 50 px. Estos son los cambios en los valores de altura y anchura en el marcado para producir las otras dos cajas:

Usando esta técnica, se puede convertir una sola imagen como la caja azul (sólo 2.39K de tamaño) en una variedad de líneas e incluso cajas:

• Esta técnica puede asegurar que todos los separadores y otros elementos de frontera en su página de utilizar el mismo color porque están todas basadas en la misma gráfica.

• Si decide que desea cambiar todas sus líneas de color azul a verde, sólo cambia de canal. Cada línea que ha creado cambia de color.

Cuando se especifica la altura y la anchura que son diferentes de la altura y el ancho real de la imagen de una imagen, que se basan en el navegador para escalar la visualización de la imagen. Este truco funciona muy bien para las imágenes de un solo color (como la caja azul), pero no funciona bien para las imágenes con múltiples colores o imágenes que contienen fotos reales.

El navegador de imágenes no lo hace así de tamaño, y que terminan con una imagen distorsionada. Esta figura muestra lo mal que un navegador maneja la imagen de una trompeta ampliar el margen de beneficio cuando multiplica la altura de la imagen por cuatro y su anchura por dos (nótese el parecido a un fliscorno!):

Video: Como cambiar el tamaño de una imagen utilizando photoshop

Latón

Si necesita varios tamaños para la misma imagen - como un botón de la insignia o de navegación - utilizar una imagen de gran tamaño como el maestro para ese gráfico y hacer versiones más pequeñas. Este truco le da un mejor control sobre el aspecto final de cada imagen.