Haz una pregunta »

Elegir una imagen y optimizarla para ponerla en tu página web

Abril 2015


Cómo elegir una imagen y optimizarla para ponerla en tu página web


Para que tus imágenes se visualicen de la mejor manera en tu sitio web, la elección del formato debe ser realizado, necesariamente, en función del uso que se le dará.


Elegir el formato

En Internet, actualmente solo tres formatos son reconocidos y visualizados correctamente por los navegadores: los formatos JPEG, GIF y PNG. Para una mejor visualización, algunos de estos formatos son más recomendados que otros, dependiendo del uso que se desea darle (logotipo, foto, icono), así como de las características de la imagen (tamaño, calidad, peso).

Para una imagen incluyendo texto: el formato PNG

Este formato ofrece una imagen perfectamente clara que no presenta deterioraciones, incluso si desea reducirla. En cambio, el formato JPEG a veces dará una imagen borrosa en los bordes. En cuanto al formato GIF, a pesar de que la imagen ofrece una buena visualización, su peso demasiado desproporcionado excluye su uso.

Para una imagen con transparencia: el formato PNG

La transparencia es la opacidad de la imagen. Esta técnica ofrece la posibilidad de distinguir posibles elementos gráficos presentes en segundo plano. De preferencia utilizar el formato PNG en este tipo de imágenes ya que da un buen resultado. El formato GIF no es muy recomendable debido a la calidad mediocre que presenta, ya que soporta muy poco el efecto de transparencia. Finalmente, el formato JPEG es incompatible con la transparencia.

Para un logotipo, un icono, un dibujo, un gráfico: el formato PNG o el GIF

El formato PNG permite una imagen de buena calidad. La restricción de colores impuesto por el formato no tiene un efecto negativo en la imagen. Lo mismo para el formato GIF que también puede ser utilizado para este tipo de imágenes. En cuanto al formato JPEG, también ofrece una buena imagen, pero su peso es considerable en relación a los formatos precedentes.

Para una fotografía, una imagen de alta calidad: el formato JPEG

El formato JPEG es sin dudas el formato a utilizar. Debido a que soporta 16.7 millones de colores, ofrece a la vez una buena calidad y un peso optimo para la Web. El formato GIF no debe ser utilizado ya que deteriorará considerablemente la calidad de la imagen. El formato PNG puede dar una imagen de buena calidad sin embargo su peso será excesivo como para pensar insertarlo en una pagina web.

Para una animación: el formato GIF

Solo el formato GIF soporta imágenes animadas.

Optimizar el peso de una imagen para la web

Mas allá de la presentación visual, la optimización de la imagen permitirá ganar tiempo al momento de visualizar una pagina web y reducirá el espacio que ocupa la imagen en el servidor. Para ayudarte a manipular tus imágenes, a continuación algunos consejos prácticos que puede realizar con el programa gratuito de edición Gimp.

Cambiar el formato con Gimp

Una vez abierto Gimp, haz clic en el menú Archivo > Abrir. Selecciona la imagen y valida. Haz nuevamente clic en Archivo y luego en Guardar como. En la ventana de diálogo que se abre, haz clic sobre el signo más al lado de Seleccione el tipo de archivo (por extensión), luego en la lista que se abre selecciona el formato que desees.

Compresión

La compresión de una imagen permite hacerla mucha más ligera que su peso inicial eliminando datos innecesarios, pero conservando las mismas dimensiones.

Una imagen demasiado pesada en tu sitio web ralentizará la visualización y aumentará el tiempo de carga de una página en el navegador. Antes de comenzar, debes saber que la compresión de una imagen JPEG a veces puede disminuir su calidad. En cambio, el formato PNG y GIF soportan la compresión sin perdida de calidad.

¿Cómo comprimirla? Después de haber seguido el procedimiento visto anteriormente, y dependiendo del formato que hayas elegido el método de compresión será algo diferente:
JPEG: en la ventana de diálogo desplaza el cursor Calidad, marcando previamente la casilla Mostrar vista previa en la ventana de la imagen, esta función te permite ver en tiempo real las modificaciones hechas.
PNG: desplaza el cursor Nivel de compresión. Cuanto mayor sea el nivel, la imagen será más comprimida.
GIF: no existen funciones. El formato GIF se comprime únicamente reduciendo el tamaño y la resolución de la imagen.

Resolución y tamaño

El tamaño de una imagen viene a ser su ancho y altura. La resolución viene a ser el número de puntos por unidad de superficie de la imagen, es decir la relación entre el número de píxeles y las dimensiones.

Ya que su imagen estará destinada a la Web una resolución de 72 píxeles por pulgada será más que suficiente. En cambio el tamaño depende del uso que le va a dar.

Una vez abierto Gimp, haz clic en el menú Archivo > Abrir. Luego, selecciona la imagen y valida. A continuación, haz clic el menú Imagen y selecciona Escalar la imagen. Selecciona el tamaño de la imagen y comprueba que esté expresado en píxeles. En los campos resolución X y resolución Y, selecciona 72 pixeles/in.

Otras herramientas gratuitas

Paint Net
Consulta este artículo sin tener que estar conectado, descárgalo gratis aquí en formato PDF:
Elegir-una-imagen-y-optimizarla-para-ponerla-en-tu-pagina-web.pdf

Consulta también

En la misma categoría

El artículo original fue escrito por RégisG. Traducido por Carlos-vialfa.
El documento « Elegir una imagen y optimizarla para ponerla en tu página web » de Kioskea (es.kioskea.net) se encuentra disponible bajo una licencia Creative Commons. Puedes copiarlo o modificarlo bajo las condiciones señaladas por esta licencia. Deberás hacerla siempre visible y dar crédito a Kioskea.