Esta clase pertenece al curso de HTML y CSS, y partiremos desde la clase anterior. Si no sabes de dónde partimos, te ruego revises las clases anteriores. Aquí conoceremos los distintos formatos de imágenes más usados en desarrollo web y los distintos tipos de compresión que existen, así como te facilitaré algunas herramientas gratuitas de compresión de imágenes. Tener las imágenes optimizadas es clave para el rendimiento web, como veremos en esta clase. Disclaimer: como siempre, este tema puede abordarse con mucha profundidad y de forma muy compleja, pero te recuerdo que este es un curso de introducción a las bases del desarrollo web moderno con HTML y CSS, realizado para personas que parten con 0 conocimientos de informática. Por ello, se abordará la información necesaria, pero sin entrar en profundidad más allá de lo que vas a necesitar para poder realizar páginas o aplicaciones web con imágenes optimizadas. Sin más dilación, vamos a ello.
Tipos de imágenes
En nuestras páginas web vamos a utilizar imágenes digitales, es decir, imágenes dónde toda la información relativa a la misma (color, luminosidad etc.) se guarda en formato binario (es decir, 0 y 1). Dado que una imagen digital es un archivo que tenemos en nuestro ordenador, a diferencia de una fotografía analógica (como la que hacían nuestros padres y abuelos con las antiguas cámaras de fotos analógicas), es fácil realizar transformaciones sobre ella. Quién más y quién menos ha utilizado algún filtro de Instagram alguna vez en su vida. Pues eso ya es una transformación de una imagen digital. Sigamos.
Hay dos grandes tipos de imágenes digitales y ello es clave: las imágenes de mapa de bits y las imágenes vectoriales.
Las imágenes de mapas de bits se construyen con píxeles (un píxel es la mínima unidad homogénea en color que forma parte de una imagen digital) y el principal problema que tienen es que al hacer zoom, como los píxeles siguen siendo los mismos, la imagen pierde calidad. ¿No te ha pasado alguna vez que dices que la imagen se pixela? Pues eso (puedes apreciarlo en la imagen de abajo). Dado que la imagen se construye con píxeles, el tamaño del archivo es proporcional al número de píxeles que tiene la imagen.
Las imágenes vectoriales se construyen a partir de vectores (los vectores son objetos definidos por una serie de puntos -que forman líneas, curvas etc.- a partir de fórmulas matemáticas). Y, precisamente, como los vectores se calculan a partir de fórmulas matemáticas… ¿Esto que significa? Que al hacer zoom no se pierde calidad de imagen (no se pixela), ya que, yo sin ser un experto en este tema (la informática como ya vas viendo es tremendamente amplia y densa), entiendo que la fórmula matemática recalcula el vector para que se vea nítido independientemente del nivel de zoom que queramos. Además, el tamaño de la imagen, dado que los vectores se van recalculando, no es proporcional al número de vectores. Esto significa que, al ser imágenes que van a ir calculando y recalculando los vectores, el tamaño de la imagen va a ser, en general, mucho menor y más óptimo que una imagen de mapa de bits.
Ahora que ya sabemos esto, es el momento de conocer los formatos de imágenes más usados en desarrollo web.
Formatos de imagen
Formato JPG
Es el formato por excelencia para las fotografías. Y tú, te preguntarás, ¿por qué no usar imágenes vectoriales para una fotografía, en vez de una imagen de mapa de bits, ya que JPG es un formato de mapa de bits? Como ya te comenté anteriormente, los formatos vectoriales crean los vectores en base a fórmulas matemáticas. A mayor complejidad de la imagen (imagina una foto con muchísimas figuras, muchas luces y sombras etc.), el rendimiento de la imagen vectorizada sería peor porque consumiría mayor capacidad de cálculo del ordenador y, sobre todo, ocuparía un mayor espacio. En este caso, y pese a la pérdida de calidad al hacer zoom (si quieres aprender la palabra técnica, el proceso de hacer zoom o disminuir zoom se llama el escalado de la imagen), se suele usar el formato JPG debido a la rapidez con la que se generan imágenes digitales con este formato.
Formato PNG
Antes que nada aclarar que este formato, igual que JPG, es un formato de imagen de mapa de bits. El formato PNG, por su tipo de compresión (esto lo veremos más adelante en esta misma clase) suele tener un mayor tamaño que las imágenes en formato JPG. Por este motivo, es un formato ideal para imágenes y contenido gráfico pequeños, como pueden ser iconos, logotipos etc.
Formato GIF
Por supuesto también es un formato de imagen digital de mapa de bits. Es un formato muy popular porque permite agrupar varias imágenes en un único archivo, lo que permite crear pequeñas animaciones (los conocidos gifs). Si vives en otro planeta y no sabes lo que es un gif, te dejo un enlace a una aplicación web muy sencilla que creé con React con fines de aprendizaje, que es un buscador de gifs, para que salgas de dudas y sepas a qué me refiero.
Formato SVG
Es el formato estándar a día de hoy de las imágenes vectoriales. Está indicado, por su modo de calcular los vectores, para imágenes sencillas, como pueden ser unas sencillas ilustraciones, o unos botones, algún gráfico que le aparezca al usuario en pantalla o que incluso el usuario pueda interactuar con él etc.
Debido a su modo de calcular los vectores, no sólo es que no pierda calidad en el proceso de escalado, sino que además son imágenes responsive por naturaleza, y se adaptan con facilidad a cualquier tipo de pantalla. También son imágenes personalizables a través del código, aunque desconozco la sencillez o complejidad de este proceso.
Como ves, en el desarrollo web moderno, cada formato de imagen digital tiene unas características y sirve para una cosa. Vamos ahora a optimizar nuestras imágenes para que esto influya positivamente en el rendimiento de nuestra página o aplicación web.
Tipos de compresión
La compresión de imagen digital simplemente significa que yo puedo comprimir la imagen para que pese menos. ¿Por qué es esto importante? Recordarás que una página web es un conjunto de documentos de distinto formato (HTML, CSS, imágenes etc.) que son enviadas a un cliente (mi navegador) desde un servidor (dónde se encuentra alojada la página web) previa petición de un cliente. Si no recuerdas esto, puedes recordarlo en esta clase. Pues bien, evidentemente cuanto mayor sea la página web en cuanto a tamaño, más va a tardarle al usuario en cargarle. Y la velocidad de carga es uno de los factores que Google tiene en cuenta para el SEO (si no recuerdas qué es el SEO puedes recordarlo en esta clase), y además de los más importantes, porque, seamos realistas… ¿quién se queda en una web más de 5 segundos esperando a ver si carga? Muy poca gente.
Espero que hayas comprendido la imagen de tener una página web con imágenes optimizadas. Yo haciendo mi CV web cuando buscaba trabajo como junior developer cometí el error de no optimizar las imágenes que subía a mi página web (un error de auténtico novato). Puedes ver el resultado aquí y ver cómo esa ligera tardanza es una molestia. Una molestia en un proyecto tan pequeño como un CV web simplemente queda mal, pero algo así en un proyecto grande significaría pérdida de usuarios, pérdida de dinero etc. Espero que hayas comprendido la importancia de utilizar imágenes con el menor tamaño posible para tu página/aplicación web.
Dicho esto, la compresión es la técnica que hace que mi imagen pase de ocupar x tamaño a ocupar y tamaño. Existen dos tipos principales de compresión: con y sin pérdida.
La compresión sin pérdida, también conocida como lossless, es la compresión que consigue devolvernos una imagen comprimida sin pérdida de calidad de la imagen. Salvo aquellos casos dónde realmente necesitemos que la imagen tenga una calidad muy elevada, y por tanto, no podamos permitirnos perder calidad de imagen al hacer la compresión, no recomendaríamos utilizar este tipo de compresión. El motivo es que al no poder permitirnos perder calidad de imagen (muchas veces mínima y otras imperceptible para el ojo humano), eso significa que es complicado reducir el tamaño de la imagen más de un 50%, y eso en muchas ocasiones significa aún imágenes demasiado grandes que ralentizarán el rendimiento de mi página o aplicación web. Normalmente, este tipo de compresión se suele usar con imágenes con formato PNG.
La compresión con pérdida, también conocida como lossy, es la compresión que nos devuelve una imagen comprimida con pérdida de la calidad de la imagen. Normalmente, este tipo de compresión elimina todos aquellos datos que se consideran irrelevantes o imperceptibles para el ojo humano, aunque hemos de tener cuidado siempre de que la calidad que nos devuelva este tipo de compresión sea aceptable para el propósito para el que queremos utilizar la imagen. Claro, si bien decíamos que la compresión sin pérdida le costaba reducir el tamaño de la imagen más allá de un 50%, la compresión con pérdida nos puede devolver imágenes comprimidas incluso con un tamaño 100 veces inferior al original de la imagen. Por este motivo, este tipo de compresión es ampliamente usado ya que es muy beneficioso para facilitar el rendimiento de mi aplicación o página web. Este tipo de compresión se suele usar normalmente con imágenes de mapa de bits en formato JPG.
¿Dónde puedo comprimir mis imágenes?
Te voy a facilitar dos recursos, aunque por supuesto puedes buscar en Internet y encontrar otros muchos.
Si lo que quieres es comprimir una imagen de tipo JPG/PNG, te recomiendo TinyJPG. Es una aplicación web que utiliza compresión con pérdida (la que vas a necesitar en la mayoría de los casos, salvo que tu web requiera imágenes con excelente calidad) y que se caracteriza por reducir tus imágenes a tamaños ridículos con pérdida de calidad realmente imperceptible para el ser humano. Yo es la que utilizo en todos mis proyectos personales y funciona de maravilla.
Si lo que quieres es comprimir una imagen de tipo SVG, te recomiendo esta aplicación web de Jake Archibald, SVGOMG. Si te soy sincero, la he buscado en Internet y me ha parecido que tiene buena pinta, parece bastante extendida en el mundo del desarrollo de software para comprimir este tipo de imágenes, pero no la he usado porque aún no me he visto en la tesitura de tener que trabajar apenas con este tipo de imágenes. Pero, en cualquier caso, me ha parecido bastante buena opción y muy fácil de usar.
Por supuesto, tanto TinyJPG como SVGOMG son recursos 100% gratuitos, al menos para un uso personal como el que vas a hacer tú como usuario.
Acceso al índice del curso
Recuerda que para seguir nuestro curso de HTML y CSS sólo tienes que ir al índice y seguir por la clase de tu interés. ¡Feliz aprendizaje!
Espero que te haya quedado todo claro y que hayas aprendido mucho sobre los distintos tipos de imágenes, sus formatos, sus tipos de compresión etc. En caso de duda, recuerda que puedes preguntarle a la comunidad con el hashtag #SoySalvajeHTMLCSS en Twitter y que puedes contactar con nosotros (aunque no me comprometo a responder por falta de tiempo, aunque responderé si puedo) por Twitter, Instagram o por nuestro formulario. Por supuesto, recuerda que si quieres que te ayudemos a crecer como profesional de forma más personalizada, no dudes en consultar nuestros servicios. Y si estás pensando en comprar algún producto relacionado con informática, no dudes en consultar nuestras recomendaciones en la sección Productos. Nos vemos en la siguiente clase.