Dentro de la maquetación web y la conversión de PSD a HTML hay varios factores que determinan la velocidad con la que se cargará el documento HTML en internet . Pero sin duda el factor más decisivo en este tema, son las imágenes.
Saber cómo optimizarlas correctamente será la clave para obtener sitios web rápidos y visualmente agradables.
Aquí te explico la mejor forma de optimizar las imágenes para el uso en internet.
Antes de optimizar, debemos conocer los formatos gráficos disponibles.
En internet existen 3 formatos principales de archivos de imagen utilizables en un documento web:
El formato PNG (Portable Network Graphics)
Este formato no es de los que menos espacio ocupan, pero tiene la gran ventaja de soportar transparencias (permite hasta 256 niveles de transparencia). Es decir, poder exportar dicho archivo con fondo transparente y colocarlo sobre otra imagen logrando efectos realmente poderosos.
El formato GIF (Graphic Interchange Format)
El formato GIF fue uno de los primero archivos gráficos que aparecieron en internet.
Normalmente son más livianos que los PNG , también soportan transparencia pero definida en 1 solo colore de la paleta y además pueden ser animados .
Pero la gran desventaja de este formato es que solo soporta 256 colores por lo que no puede ser muy utilizado para imágenes de alta calidad. En general se lo utiliza para detalles menores , o elemento misceláneos como bullets y animaciones pequeñas.
El formato JPG (Joint Photographic Experts Group)
Sin suda el formato JPG ha sido y es, el formato grafico más popular de los sitios web.
Este formato nos ofrece un tamaño de archivo muy reducido ya que trabaja con un sistema de compresión interno y además, soporta una muy alta gama de colores. Esto hace que su uso sea perfecto para internet.
En el siguiente video voy a mostrarte como optimizar correcta y eficazmente una imagen para su uso en internet con un tamaño de archivo mínimo.
PARTE 1:
[youtube width=»640″ height=»410″]http://www.youtube.com/watch?v=VB_cxVrnXJI[/youtube]
PARTE 2:
[youtube width=»640″ height=»410″]http://www.youtube.com/watch?v=4WFYL3X1hq4[/youtube]
** ¿ Te ha parecido interesante esta artículo ? **
Imagínate lo que puedes aprender con el Curso Completo de Maquetación !
GRACIAS POR ESTAR APOYÁNDOME CON ESTOS TUTORIALES. ESTOY EN EL PROCESO DE APRENDER EL CÓDIGO HTML POR INTERNET EN VIDEOS DE YOUTUBE Y TUTORIALES DE DEPOSIT FREE.
Por nada Freddy.
Me alegra que te haya ayudado.
Saludos!
Cristian
Muy atinados y precisos los aportes que me llegan de «PSD a HTML paso a paso». Lo mínimo, agradecer y suerte.
atte.
Gracias por estas explicaciones que nos aportan mucho a nuestro entrenamiento.