Si estás familiarizado con el uso de imágenes en Internet y los medios digitales en general, habrás utilizado en muchas ocasiones archivos JPG o PNG pero, ¿sabes reconocer sus diferencias y cuándo conviene usar cada uno? Eso es precisamente lo que pretendo explicarte en este post.
¿Qué encontrarás aquí?
Formatos de imágenes
Las imágenes son una parte importante de todo sitio web y por eso hay que hacer un uso correcto de ellas, para evitar que se ralentice la carga y los usuarios abandonen.
Hace un tiempo publiqué un post en el que explico cómo optimizar imágenes para WordPress, puede que te resulte de interés. Pero si aún no estás presente en Internet y quieres crear tu página web, te aconsejo que le des un vistazo a mi servicio "Tu Web en 14 días", conseguirás todo lo necesario para tener un sitio web atractivo y profesional.
Entrando en materia, JPG y PNG son los formatos más utilizados en archivos contentivos de imágenes, los cuales almacenan datos en forma de píxeles y esa es su principal diferencia con respecto al formato SVG, EPS y PDF.
Ahora bien, estos dos tipos de archivos tienen particularidades que los hacen fundamentalmente diferentes y te servirán para determinar cuándo es más conveniente utilizar uno u otro.
¿Qué es JPG?
Este es, posiblemente, el formato de imagen más utilizado y también se conoce como JPEG en referencia a sus creadores (Joint Photographic Experts Group), quienes lo idearon con la intención de estandarizar un tipo de archivo usado para imágenes realizadas por fotógrafos.
Este tipo de archivo tiene la particularidad de comprimir los datos de la imagen en bloques de píxeles para mantener un tamaño reducido.
El inconveniente está en que dicha compresión es permanente, pues el propósito del JPG es precisamente poder almacenar imágenes grandes sin ocupar demasiado espacio.
Su capacidad de compresión es tal que puede minimizar 100 veces su tamaño y se ha vuelto popular en Internet como un recurso útil cuando la conexión es lenta. Además, las cámaras digitales aún aprovechan esta cualidad para guardar más fotos.
Sin embargo, este formato de archivo también tiene sus desventajas y es que ese nivel de compresión acaba afectando la calidad de las imágenes, por lo que no es adecuado para guardar ilustraciones, texto o dibujos porque se verán pixelados.
¿Cómo funciona?
Cuando utilizas un editor de imágenes y escoges guardar en formato JPG puedes establecer qué tanto deseas que se reduzca para que pese menos.
Lo que debes considerar en este caso es que cuanto más comprimas el archivo, menos pesará, pero también perderá calidad.
A esto se le debe añadir que la pérdida de calidad en los archivos jpg es acumulativa, lo cual quiere decir que una vez comprimida la imagen y afectada su calidad, aunque la descomprimas no mejorará y si continúas reduciendo su peso, proporcionalmente irá empeorando.
Entonces, puedes optar por reducirla un poco para que no pierda demasiada calidad y no ocupe tanto espacio.
¿Qué es PNG?
Las siglas PNG hacen referencia a Portable Network Graphics y corresponden a un tipo de archivo que se creó como alternativa al GIF.
Su principal particularidad es que soporta transparencias sin perder color, a diferencia del GIF, por lo cual resulta útil usarlo en Internet. Además, admite colores de 8 bits y 24 bits como el formato JPG.
El inconveniente está en que al contener tantos colores y píxeles el archivo acaba siendo mucho más pesado que el JPG, por lo cual no resulta conveniente en todos los casos.
¿Cómo funciona?
El formato PNG comprime los archivos sin afectar su calidad, debido a que reconstruye los datos de manera idéntica a su versión original.
Por lo tanto, es ideal para imágenes sin fondo, que contengan texto y logotipos en general, cuando se desea mantener la máxima calidad.
Principales diferencias entre JPG y PNG
Existen algunas diferencias entre estos formatos de imagen que vale la pena puntualizar, las cuales están relacionadas con su peso, calidad, soporte y compatibilidad. Echa un vistazo.
Calidad
- El formato JPG comprime afectando la calidad de las imágenes.
- El formato PNG no afecta la calidad de las imágenes.
Peso
- Los archivos JPG son livianos.
- Los archivos PNG son más pesados.
Transparencias
- Los archivos JPG no admiten transparencias, únicamente colores sólidos.
- Los archivos PNG sí admiten transparencias.
Compatibilidad
- El formato JPG admite CMYK y RGB.
- El formato PNG no admite CMYK.
Versatilidad
- El formato JPG es útil en aquellos casos donde la imagen es muy grande y al reducirla aún conserva una calidad aceptable.
- El formato PNG es ideal para aquellas imágenes que poseen texto o carecen de fondo, logotipos y dibujos lineales.
¿Cuándo utilizar JPG o PNG en tu web?
El propósito de que conozcas las características de estos formatos y sus diferencias, es que seas capaz de determinar cuándo es más conveniente utilizar cada uno de ellos en tu web. A continuación, te ofrezco mis recomendaciones al respecto.
¿Cuándo usar JPG?
Te recomiendo usar el formato JPG en imágenes fotográficas. Las fotografías tomadas con cámaras digitales suelen ser sumamente pesadas y subirlas así mismo a tu web ocasionará lentitud al momento de cargarlas.
Lo mejor en este caso es que reduzcas su peso con las cualidades del JPG para exhibirlas en tu sitio sin afectar su velocidad de carga.
Por ejemplo, puedes comprimirlas hasta 300 o 400 KB de peso y subirlas a la web, aunque también debes considerar el espacio donde vayas a mostrarlas, en cuyo caso podrías reducir su peso aún más.
¿Cuándo usar PNG?
Te recomiendo usar el formato PNG para elementos muy específicos de tu web que desees mostrar con óptima calidad, como tu logotipo.
Las cualidades de este formato reflejarán claramente los colores del mismo y podrás beneficiarte al usar un fondo transparente que te permita ubicarlo en cualquier lugar del sitio web sin que tape nada más y luzca en armonía.
En conclusión, al momento de determinar si es conveniente usar JPG o PNG en las imágenes que subirás a tu sitio web, considera lo que te he explicado acerca del peso, la afectación de la calidad en relación con el tamaño, el uso de transparencias y su efecto en la velocidad de carga de la web.
