Manejo de Imágenes
Formatos de Imagen
JPG
- Es un formato de imagen pixelar.
- Es el formato más utilizado.
- Es un formato comprimido en el que se eliminan todos aquellos píxeles que no son necesarios al comprimir.
- Es un formato con pérdida.
- Permite mucha profundidad de color.
- Es el formato ideal para subir una foto o imagen que utiliza mucha variedad de color.
- No permite la utilización de transparencias.
PNG
- Es un formato de imagen pixelar.
- Este formato es más reciente en el tiempo.
- En teoría, utiliza compresión sin pérdida pero las imágenes suelen pesar mucho más.
- Puede tener diferentes profundidades de color (RGB, indexado).
- Puede utilizar transparencias.
GIF
- Es un formato de imagen pixelar.
- Poca profundidad de color. No se recomienda su uso para fotografías.
- Permite transparencia de baja calidad.
- Permite animaciones (GIF ANIMADO)
- En su día fueron muy utilizados, pero ahora su uso se limita prácticamente a los banners animados.
SVG
- Es un formato de imagen vectorial.
- No sirve para usarlo para imágenes fotográficas, sino que por su naturaleza vectorial es ideal para usarlo con iconos o logotipos.
- Se puede aumentar y disminuir su tamaño sin pérdida de calidad.
- Recomendado para el uso responsivo, ya que se reescala y visualiza perfectamente en cualquier dispositivo.
- Las imágenes en SVG pesan muy poco.
- Se pueden generar desde Illustrator.
WebP
- Es un nuevo formato de imagen para web que incluye compresión con y sin pérdidas además de un canal alpha de 8-bits para transparencias.
- El formato incorpora las mejores características de los formatos de imagen más utilizados: JPG, PNG y GIF.
- Desarrollado por Google.
- Según Google, las imágenes WebP sin pérdidas pesan un 26% menos que un PNG.
- Si lo comparamos con un JPG, entre un 25% y un 34%.
Tratamiento de Imágenes
Fundamentalmente hay cuatro cosas que debemos hacer con las imágenes que subimos a la web:
- Seleccionar el formato de imagen adecuado.
- Recortar o adaptar la imagen a la resolución y medidas que va a ser mostrada en la web.
- Optimizarla comprimiendo y eliminando los metadatos que añaden peso innecesario en la descarga.
- Subir la imagen e insertarla en el html.
Herramientas de Optimización
- Photoshop - Editor profesional de imágenes
- Pixlr - Editor online
- TinyPNG o TinyJPG - Herramienta gratuita para la compresión de imágenes tanto en jpg como en png con nivel de compresión máximo y pérdida mínima
- XnView - Completo programa que funciona como visualizador, organizador y convertidor
Manejo de Archivos de Imágenes
Las imágenes o cualquier archivo que desees colocar en tu website deben tener ciertos parámetros para su correcta visualización y para evitar problemas:
- NO utilizar caracteres especiales en los nombres de archivo (#% ´ ` ?¿ ñ, etc.)
- No dejar espacios en los nombres de archivo
- Tener todo el nombre del archivo en minúscula
- Usar nombres descriptivos y ordenados que te permitan reconocer tu archivo apenas lo veas, sin tener que abrirlo