La optimización de imágenes para una web, blog o tienda online es fundamental y muy importante, ya que reducimos el tiempo de carga de la imagen, ganando velocidad a la hora de mostrar la página web y reducimos el peso del archivo al guardar en el disco en nuestro servidor o alojamiento web.
Debemos tener en cuenta los siguientes 3 puntos:
1. Formato de Imagen
Existen muchos formatos de archivos gráficos, son algoritmos diseñados para comprimir imágenes, los más usados e importantes para usar en web son : JPG, PNG y GIF, debemos elegir el formato adecuado.
- Imágenes JPG o JPEG
Es la más usada, permite mostrar toda la gama de colores (16 millones), pero no permite usar transparencias en los fondos. Ideal para imágenes fotográficas de muchos colores, productos, personas, etc.
- Imágenes PNG 24
Similar a JPG en colores, pero permite usar fondos con transparencias, su peso de fichero es superior al JPG haciendo a veces más pesado y lentos de cargar imágenes de fotografías.
- Imágenes GIF
Este formato de imagen tiene limitados sus colores a 256, permite fondos transparentes y es ideal para imágenes con colores planos, como logotipos, banner. Además permite realizar animaciones, los famosos GIF animados
En la siguiente imagen podemos ver los 3 formatos : JPG, PNG 24 y GIF, veremos la calidad y el peso del fichero.
2. Resolución de la imagen
Se miden en “ppp” o pixel por pulgada. cuanto mayor sea el número de ppp, mayor calidad de imagen. Para una página web las imágenes son creadas generalmente a 72 ppp, ya que el ojo humano no detecta mayor diferencia, salvo pantallas de retina y de alta calidad que pueden llegar a los 100ppp como dispositivos de Apple.
Sin embargo para imprimir una imagen por impresora o en una imprenta se recomienda que las imágenes tengan como mínimo 300ppp.
Para adaptar la resolución (ppp) de nuestras imágenes para la web a 72ppp o 100ppp se configura nuestro programa de edición de imágenes, tipo Photoshop, Gimp, editores online, etc. debemos tener en cuenta este punto, ya que una imagen con 300ppp para web nos ocupara mucho tamaño su fichero y será más lenta la carga en web con la misma calidad visual a mostrar en la pantalla.
3. Tamaño en píxel de la imagen
La medida de una pantalla digital: monitor, tablets, móvil, etc. se miden en píxel (no centímetros) de ancho y alto. El tamaño estándar actualmente para desarrollo web en monitor suele ser 1024×768 y 1200×800 píxel hasta los 1900×1200 píxel, en pantallas de gran tamaño superior a 21″ suelen alcanzar resoluciones mas grandes de los 2000 píxel de ancho.
Con esta información debemos crear nuestras imágenes con tamaño de pixel no superior a los estándares, salvo que sean imágenes para animaciones o slider que ocupen toda la pantalla y se deberíamos crearlas sobre los 1600 pixel de ancho.
El tamaño en píxel optimo para Imágenes de blog sobre los 1024 pixel de ancho serían correctas, sin embargo para imágenes pequeñas con 600 píxel o menos sería suficiente, ahorrando peso en el fichero de la imagen.
Programas para editar y optimizar imágenes
Existe miles de programas que nos permiten editar y optimizar imágenes, en el siguiente ejemplo veremos la diferencia de optimizar una imagen.
El tamaño es de 200 x 210 píxel con una optimización del 62% apenas perdemos calidad visual y conseguimos reducir el peso del fichero de 38,75Kb a 14,42Kb.
Editores en local
Debemos descargar e instalar el programa en nuestro ordenador, algunos requiere pagar una licencia de uso y otros son opensource de libre uso, algunos ejemplos:
- GIMP (Opensource – http://www.gimp.org.es/)
- KRITA (Opensource – https://krita.org/es/)
- PHOTOSHOP (De pago – https://www.adobe.com/es/products/photoshop.html )
- PIXELMATOR ( De pago – http://www.pixelmator.com/pro/)
- PAINTSHOP PRO ( De pago – https://www.paintshoppro.com/en/ )
Editores en web
Se usan directamente desde el navegador web, no son tan potentes pero nos permiten usarlos de una forma sencilla, la mayoría son gratuitos, pero algunos tienen un coste a cambio de mejoras, algunos ejemplos:
- OPTIMIZILLA – http://optimizilla.com/es/
- COMPRESSOR.IO – https://compressor.io/
- TINYJPG – https://tinyjpg.com/
- IMAGE OPTIMIZER – http://www.imageoptimizer.net/Pages/Home.aspx
- JPEG IO – https://www.jpeg.io/
- KRAKEN IO – https://kraken.io/web-interface
- WEB RESIZER – http://webresizer.com/resizer/?lang=es
