En este art\u00edculo vamos a contarte las diferentes opciones que tienes de incluir im\u00e1genes en entorno web y en qu\u00e9 circunstancias deber\u00edas usar cada una de ellas.\u00a0<\/b><\/p>\n
Escoger un formato de imagen para nuestra web parece un asunto f\u00e1cil, \u00bfverdad? Podr\u00edamos subir <\/span>laimagenquemegusta.jpg<\/span><\/i> solo prestando atenci\u00f3n a que se vea bien y que muestre el contenido que queremos. Sin embargo la elecci\u00f3n del formato de imagen y su optimizaci\u00f3n tiene importantes implicaciones que deber\u00edamos tener en cuenta.<\/span><\/p>\n \u00bfPor qu\u00e9 es tan importante?<\/b><\/p>\n En primer lugar, debemos considerar el tiempo de carga de las im\u00e1genes que usamos en la web. Una imagen que no est\u00e9 optimizada (es decir, que no se haya tratado para tener la mejor calidad posible con el menor tama\u00f1o de archivo) a\u00f1adir\u00e1 peso innecesario que se traducir\u00e1 en una mayor lentitud de carga de la p\u00e1gina y en un mayor consumo de datos del usuario\u2026 y a nadie le gusta quedarse sin datos cuando navega, \u00bfno? Intentemos que esto no ocurra.<\/span><\/p>\n <\/p>\n Formatos vectoriales<\/b><\/p>\n En ellos se guarda la informaci\u00f3n de forma ligera y escalable, es decir, podemos ampliar la imagen tanto como queramos y no pierde calidad, y adem\u00e1s pesa poco. En ellos no existe compresi\u00f3n, son un c\u00f3digo que se renderiza directamente en la web. En general, siempre que sea posible es recomendable usar formatos vectoriales ya que con ellos vamos a restar peso al contenido que cargamos mientras aseguramos una buena calidad en la visualizaci\u00f3n.<\/span><\/p>\n <\/p>\n Si usas vector usa SVG<\/b><\/p>\n El formato SVG (Scalable Vector Graphics) es el m\u00e1s extendido en web, es abierto y basado en XML, por tanto compatible con cualquier navegador. Ser\u00eda recomendable usar .svg para iconos, logotipos\u2026. Y podr\u00edamos decir para todo aquello que sea \u201cformas, color plano, texto\u201d. Conviene recordar que .svg tiene la opci\u00f3n de animarse, y es compatible con CSS.<\/span><\/p>\n <\/p>\n Formatos \u201cpixel\u201d (rasterizados o <\/b>mapa de bits<\/i><\/b>)<\/b><\/p>\n No todo lo que vemos en Internet son gr\u00e1ficos, hay tambi\u00e9n muchas fotograf\u00edas. Por su riqueza de matices no es factible usar formatos vectoriales, sino que tienen que utilizar miles de <\/span>pixels <\/span><\/i>para representar el \u201cmundo real\u201d. Contienen, por as\u00ed decir, un mosaico de cuadraditos donde cada uno de ellos lleva unas instrucciones de color. En el caso de color para pantallas, RGB, indica con qu\u00e9 intensidad se tienen que encender en ese p\u00edxel concreto cada uno de los tres diodos, rojo, verde y azul.\u00a0<\/span><\/p>\n <\/p>\n Los cl\u00e1sicos, PNG y JPG<\/b><\/p>\n Los reyes de la categor\u00eda son PNG y JPG (o JPEG). Si no sabes cu\u00e1l usar hazte la siguiente pregunta: \u00bfNecesito transparencia en las fotos? Si este es tu caso, usa .png (Portable Network Graphics). En principio se trata de un formato de compresi\u00f3n sin p\u00e9rdida capaz de guardar canal alpha (transparencia) y, por si te lo preguntabas, al haber nacido para web solo soporta espacio de color RGB y no CMYK <\/span>pero esto ya es otro tema<\/span>.<\/span><\/p>\n Sin embargo la mayor\u00eda de las fotos que vemos y descargamos suelen ser .jpg\/.jpeg (Joint Photographic Experts Group) por dos razones:<\/span><\/p>\n La primera es porque es el formato hegem\u00f3nico en c\u00e1maras digitales, y la segunda es porque es capaz de comprimir much\u00edsimo, ahora s\u00ed, con p\u00e9rdida. JPEG lleva siendo mucho tiempo el est\u00e1ndar en web y puede que te suene JPEG2000, un formato lanzado en 2000 con mejor compresi\u00f3n que JPEG con intenci\u00f3n de reemplazarlo\u2026 spoiler, no ocurri\u00f3. De modo que est\u00e1 bien saber que JPEG2000 existe, pero \u00fasalo solamente si tu cliente te lo pide o tu proyecto lo requiere, ya que no es soportado por la mayor\u00eda de navegadores.<\/span><\/p>\n En cualquier caso lo que deber\u00edas hacer si usas im\u00e1genes rasterizadas (png o jpg) es optimizar la imagen antes de subirla a la web o pasarla al equipo de desarrollo.<\/b><\/p>\n Esto har\u00e1 que sin perder calidad de imagen tu archivo pese menos y cargue antes sin dar mucho problema. Para esto existen varias herramientas online que comprimen tu archivo reduciendo bastante su peso y sin diferencia de calidad perceptible por el ojo en un entorno web.<\/span><\/p>\n Las m\u00e1s usadas y que te recomendamos son:<\/span><\/p>\n TinyPNG<\/span><\/a><\/p>\n\u00bfSabes diferenciar entre vector y pixel?<\/b><\/h3>\n