Como buen programador web tienes que conocer las diferencias entre los distintos tipos de imágenes para que sepas en caso usarlos y hacer tu web lo más ligera posible. Así que comencemos 🚀.
1. JPG (Joint Photographic Experts Group)
En primer lugar, los conocidos JPG, son imágenes con comprensión que hacen que pesen menos y se usan principalmente en fotografías. Por ejemplo, las fotos que tomas con tu teléfono se exportan en formato .jpg
2. PNG (Portable Network Graphics)
A diferencia de los JPG este tipo de imágenes tienen mucha mayor calidad de imagen, pero tienen menos comprensión, por lo que serán más pesadas.
Por ejemplo, una fotografía en formato .jpg y la misma foto en .png podrían verse igual, pero en PNG pesar 4 o 5 veces más. Así que, ¡nunca uses .png para fotografías!
¿En qué casos podrías usar PNG?
- Para imágenes con transparencia, como en el home de ed.team.
- Para fotos o imágenes con colores planos. Como ilustraciones o gráficos.
3. SVG (Scalable Vector Graphics)
Estas imágenes están construidas con código que el navegador interpreta como un código HTML o CSS. Incluso puedes ver el código de imágenes .svg abriéndolo en VS Code o en algún editor de código para hacerle cambios en los colores y formas.
Una gran ventaja de este tipo de imágenes es que se verán bien en cualquier tamaño de pantalla, nunca se verán borrosos ni pixelados porque se construyen en el momento a través del navegador. Procura usarlos en los íconos o logotipos de tu web.
Si quieres aprende más de los SVG mira este curso: SVG Desde Cero
4. GIF (Graphic Interchange Format)
Los .gifs permiten transparencia y animaciones, pero nunca los uses, salvo que tu página sea de memes como la de Homero.
Pero hay una pequeña excepción. Cuando quieras hacer demos de las funciones de tu web podrías grabar un video y exportarlo en .gif para ahorrar ancho de banda.
5. WEBP
Este formato trae lo mejor de los JPG, los PNG y los GIF: buena comprensión, transparencia, colores sólidos y buena calidad. Este tipo de imágenes son los que menos pesan y harán mucho más liviana tu página para que cargue super rápido.
Lo malo es que si quieres editarlas tendrás que volver a convertirlas a PNG o JPG porque programas de diseño como Photoshop no reconocen el formato WEBP.
Y no te vayas sin este tip…
Pasa tus imágenes por herramientas como compressor.io o Tinypng para reducir al máximo su peso. Incluso tienen APIs que las puedes integrar a tu backend para que todas las imágenes de tu web se compriman antes de ser subidas. Yo soy Deiv y nos vemos en un próximo blog 😉.
Si quieres aprender más trucos para optimizar las imágenes de tu sitio web, mira este video.