{"id":3335,"date":"2017-01-19T12:45:47","date_gmt":"2017-01-19T10:45:47","guid":{"rendered":"https:\/\/www.andreoliestudio.com\/?p=3335"},"modified":"2024-10-04T10:08:26","modified_gmt":"2024-10-04T08:08:26","slug":"formato-imagen-mas-adecuado-pagina-web","status":"publish","type":"post","link":"https:\/\/www.andreoliestudio.com\/en\/noticias\/formato-imagen-mas-adecuado-pagina-web\/","title":{"rendered":"\u00bfCu\u00e1l es el formato de imagen m\u00e1s adecuado para tu p\u00e1gina web?"},"content":{"rendered":"

\"EstudioUna imagen vale m\u00e1s que mil palabras y escoger el formato adecuado para una p\u00e1gina web<\/strong>, parte de buscar originalidad, ligereza y claridad.<\/p><\/blockquote>\n

En el posicionamiento de una p\u00e1gina web<\/strong><\/a>, las fotograf\u00edas juegan un papel fundamental. El cuidado que les demos y el etiquetado, permitir\u00e1n obtener resultados favorables en los motores de b\u00fasqueda.<\/p>\n

De all\u00ed, que se deben tomar en cuenta diversas caracter\u00edsticas para escoger el formato m\u00e1s adecuado seg\u00fan sus cualidades y necesidades particulares.<\/p>\n

GIF<\/strong><\/p>\n

Este formato,<\/strong> cuya abreviaci\u00f3n significa \u201cGraphic Interchange Format\u201d, s\u00f3lo puede representar un m\u00e1ximo de 256 colores, pero es el \u00fanico que puede mostrar animaciones de im\u00e1genes. Los GIF fueron ampliamente utilizados hace dos d\u00e9cadas, pero con el tiempo han disminuido su protagonismo, debido a que las fotograf\u00edas no se ven con buena calidad.<\/p>\n

Aunque ofrece la posibilidad de trabajar con transparencias, lucen pixeladas. Se puede emplear para im\u00e1genes sencillas, con colores y formas simples, como los logotipos.<\/p>\n

PNG8<\/strong><\/p>\n

Bajo la extensi\u00f3n PNG tenemos que distinguir entre PNG8 (con un m\u00e1ximo de 256 colores) y PNG24 (capaz de representar hasta 16 millones de colores).<\/p>\n

El PNG8 es bastante similar al GIF, con la diferencia de que no puede mostrar animaciones y tiene una mejor tasa de compresi\u00f3n que har\u00e1 las im\u00e1genes sean menos pesadas.<\/p>\n

Como el anterior, el PNG8 ser\u00e1 una buena opci\u00f3n si la imagen que queremos mostrar no tiene un patr\u00f3n de colores simples como en el caso de textos, ilustraciones planas o logotipos.<\/p>\n

JPG<\/strong><\/p>\n

El formato JPG sigue siendo el m\u00e1s utilizado en p\u00e1ginas web. <\/strong>Esto se debe, en parte, a la excelente compresi\u00f3n que realiza, consiguiendo pesos m\u00ednimos, con una calidad aceptable.<\/p>\n

El tal\u00f3n de Aquiles de este formato de compresi\u00f3n es que en zonas amplias de color se pueden apreciar los artefactos t\u00edpicos de este tipo de compresi\u00f3n. Sin embargo, en fotograf\u00edas con unos patrones de color m\u00e1s complejos, dichos artefactos son inapreciables. Esta es la raz\u00f3n por la que, a pesar de no soportar las transparencias, sigue siendo el formato favorito para incluir fotograf\u00edas en la web.<\/p>\n

Otra cosa a tener en cuenta, es que este tipo de compresi\u00f3n conlleva p\u00e9rdida de calidad. Cada vez que editamos y guardamos una imagen en JPG, se pierde calidad respecto al formato original. Si volvemos a abrir un JPG, lo editamos y lo guardamos como JPG, volveremos a sufrir perdida de nitidez. Es aconsejable, por lo tanto, editar la imagen en otro formato que no sufra este \u2018deterioro\u2019 y cuando obtengamos el resultado deseado, lo exportemos a JPG una sola vez.<\/p>\n

PNG24<\/strong><\/p>\n

El formato PNG24 admite color en 24 bits por lo que es otra opci\u00f3n eficiente a la hora de presentar fotograf\u00edas en nuestra p\u00e1gina web.<\/strong><\/p>\n

Presenta 2 ventajas: admite transparencias que, adem\u00e1s, son mucho m\u00e1s sutiles que en el caso de los GIF o los PNG8 y utiliza un tipo de compresi\u00f3n sin p\u00e9rdida de calidad.<\/p>\n

La principal desventaja con respecto al JPG, es que los archivos resultantes utilizando el formato PNG24 son considerablemente mayores. Esto ralentizar\u00e1 la p\u00e1gina web<\/strong> y perjudicar\u00e1 la experiencia de usuario.<\/p>\n

Entonces \u00bfQu\u00e9 formato uso?<\/strong><\/p>\n

A pesar de que puede haber opiniones encontradas, se puede hacer tomando en cuenta las siguientes consideraciones:<\/p>\n