{"id":328,"date":"2020-04-14T13:00:01","date_gmt":"2020-04-14T11:00:01","guid":{"rendered":"http:\/\/carontestudio.com\/blog\/?p=328"},"modified":"2021-12-22T13:11:30","modified_gmt":"2021-12-22T12:11:30","slug":"como-optimizar-imagenes-para-web-guia-util","status":"publish","type":"post","link":"https:\/\/carontestudio.com\/blog\/como-optimizar-imagenes-para-web-guia-util\/","title":{"rendered":"C\u00f3mo optimizar im\u00e1genes para web: Gu\u00eda \u00fatil."},"content":{"rendered":"\n

\u00bfSabes c\u00f3mo optimizar im\u00e1genes para web<\/strong>? Es frecuente encontrarse con usuarios que, como es natural, desean subir im\u00e1genes a sus sitios web, y muchos de ellos se hacen esta pregunta. En este art\u00edculo te traemos varios consejos para optimizar las im\u00e1genes de tu sitio web. \u00bfTe animas?<\/p>\n\n\n\n\n\n\n\n

\u00bfPor qu\u00e9 deber\u00eda optimizar im\u00e1genes para web?<\/h2>\n\n\n\n

Lo primero que hay que destacar es la necesidad de optimizar las im\u00e1genes para lograr un buen dise\u00f1o web<\/a>. Puede parecer l\u00f3gico pensar que a mayor calidad de imagen de las fotos de una web, mejor se ver\u00e1 \u00e9sta, pero no es tan sencillo.<\/p>\n\n\n\n

\n
\n
\"C\u00f3mo<\/figure>\n<\/div>\n\n\n\n
\n

Hemos de tener en cuenta que lo que ha de primar en nuestra web es la \u00abexperiencia de usuario\u00bb.<\/strong> Seguro que ya has o\u00eddo hablar de este t\u00e9rmino con anterioridad. B\u00e1sicamente se refiere a c\u00f3mo percibe el usuario la navegaci\u00f3n y el uso de nuestro sitio web<\/strong>. Es por eso que aunque una imagen se vea algo mejor que otra, si ello conlleva un incremento en el tiempo de carga del sitio web o un gasto inapropiado de transferencia de datos, puede ser contraproducente. <\/p>\n\n\n\n

Debemos reducir los tiempos de carga de la web al m\u00ednimo<\/a> para mejorar la experiencia de usuario y por ende, el SEO<\/strong>. Los motores de b\u00fasqueda como Google penalizan los sitios web pesados y de cargas excesivas. Se ha demostrado que los tiempos de carga excesivos hacen que los visitantes no permanezcan en la web, aumentando as\u00ed la tasa de rebote. En nuestro art\u00edculo dedicado a los t\u00e9rminos del SEO<\/a> te explicamos qu\u00e9 significan estos t\u00e9rminos.<\/p>\n<\/div>\n<\/div>\n\n\n\n

Si quieres averiguar si tu web es algo lenta puedes comprobarlo t\u00fa mismo. Google pone a tu disposici\u00f3n varias herramientas de desarrollo web con las que comprobar el rendimiento de tu sitio web. Mediante PageSpeed Insights<\/a> puedes medir su velocidad de carga.<\/p>\n\n\n\n

Dicho esto, no te asustes, usar im\u00e1genes en tu sitio web es algo clave dadas las estad\u00edsticas. Se estima que nueve de cada diez usuarios leen p\u00e1ginas y art\u00edculos con im\u00e1genes antes que aquellos que carecen de ellas.<\/strong><\/p>\n\n\n\n

\u00bfC\u00f3mo puedo optimizar im\u00e1genes para web?<\/h2>\n\n\n\n

Existen varias opciones para optimizar im\u00e1genes para web. La m\u00e1s avanzada y personalizable probablemente sea hacerlo tras tratarlas en nuestro software de edici\u00f3n habitual. Es com\u00fan retocar las im\u00e1genes antes subirlas a la web, bien sea editando sus colores, la luz, o simplemente redimensionandolas.<\/p>\n\n\n\n

Teniendo esto en cuenta, una vez vayamos a guardarlas o exportarlas, podemos proceder a optimizarlas para web. Muchos editores de imagen cuentan con la opci\u00f3n \u00abGuardar para web\u00bb<\/strong>, donde podremos elegir el formato de salida, su compresi\u00f3n y p\u00e9rdida de calidad.<\/p>\n\n\n\n

Factores a tener en cuenta a la hora de optimizar im\u00e1genes para web<\/h2>\n\n\n\n
\n
\n

Formato<\/h3>\n\n\n\n

El formato por excelencia en web es el JPG por su excelente nivel de compresi\u00f3n y su leve p\u00e9rdida de calidad. No obstante, en muchos casos necesitamos recurrir a formatos con soporte de canal alfa o transparencia como el PNG. \u00c9ste tambi\u00e9n tiene una compresi\u00f3n bastante elevada, pero menor que la del JPG.<\/p>\n\n\n\n

Menci\u00f3n especial para los formatos GIF. El que fuera por durante mucho tiempo rey de gr\u00e1ficos animados, con la aparici\u00f3n de formatos como el WEBM, el PNG animado y otros, ha quedado relegado en un segundo lugar en sitios web. Debido a su mala relaci\u00f3n calidad\/peso ha quedado casi en desuso como imagen fija, no as\u00ed como sustituto para breves clips de v\u00eddeo sin audio.<\/p>\n\n\n\n

Otra de las opciones a la hora de incorporar im\u00e1genes (sobre todo logotipos y figuras planas) son los formatos vectoriales como el SVG. Al no basarse en un mapa de bits, su peso es \u00ednfimo y re-escalable sin perdida alguna. Adem\u00e1s, pr\u00e1cticamente cualquier navegador lo soporta.<\/p>\n\n\n\n

Tama\u00f1o<\/h3>\n\n\n\n

Cuando queremos implementar una imagen en web hemos de plantearnos la funci\u00f3n de esta misma. Si va a ser una imagen que cubra por completo la ventana del navegador, ser\u00e1 conveniente que cuente con un ancho considerable. En el caso de im\u00e1genes incrustadas en contenedores o secciones que nunca van a ocupar un ancho excesivo no tiene sentido incorporar tama\u00f1os tan grandes. De este modo, un fondo de pantalla puede tener 1500px de ancho mientras la foto de un avatar bastar\u00e1 con 300px de ancho aproximadamente.<\/p>\n\n\n\n

A la hora de preparar im\u00e1genes para web debemos prestar especial atenci\u00f3n a la resoluci\u00f3n. \u00c9sta viene dada por puntos por pulgada (ppp) o \u00abdots per inch\u00bb. Para web considera m\u00e1s que suficiente una resoluci\u00f3n de 72ppp, pero la aparici\u00f3n de pantallas de mayor calidad, capaces de soportar densidades de puntos mayores. <\/p>\n\n\n\n

<\/p>\n<\/div>\n\n\n\n

\n
\"Consejos<\/figure>\n<\/div>\n<\/div>\n\n\n\n

Compresi\u00f3n<\/h3>\n\n\n\n

En cuanto a la compresi\u00f3n de im\u00e1genes, resulta esencial plantearse la calidad que podemos sacrificar en pos de la reducci\u00f3n de peso. Hay casos en los que no es necesario comprimir las im\u00e1genes en exceso, o la web requiera una alta calidad de im\u00e1genes. Para esos casos puntuales existen varias herramientas y utilidades alternativas.<\/p>\n\n\n\n

Herramientas para optimizar im\u00e1genes para web<\/h2>\n\n\n\n

La mejor opci\u00f3n, siempre que sea posible, es la de tratar nosotros mismos las im\u00e1genes y especificar el tama\u00f1o, la resoluci\u00f3n y el nivel de compresi\u00f3n. Para ello los editores principales como Adobe Phosothop o Gimp entre otros, poseen opciones para exportarlas a nuestro gusto.<\/p>\n\n\n\n

Cuando esto no es posible, o queramos ahorrar tiempo con una compresi\u00f3n m\u00e1s que aceptable, podemos hacer uso de herramientas como las siguientes:<\/p>\n\n\n\n