Source: http://www.luislar.es/reducir-tamano-las-fotos-web/
Timestamp: 2017-09-25 15:03:18+00:00

Document:
Cómo reducir el tamaño de las fotos de tu web • Luis LAR.es
Tú estás aquí: Inicio / Blog de Marketing online + SEO + Diseño Web + Comercio Electrónico / Desarrollo web / Cómo reducir el tamaño de las fotos de tu web
Hoy quiero hablarte de cómo reducir el tamaño de las fotos de tu web, un tema que me parece crucial.
Este será el último post hasta septiembre… y quiero asegurarme que, a la vuelta, no voy a escuchar más excusas del tipo ” Yo es que no sé cómo reducir el tamaño de las fotos para la web“… ¡Menudos diseñadores web éstos!
Me parece increíble que uno de los errores más habituales que encuentro en las auditorias web sea que haya que reducir el tamaño de las fotos porque pesan una barbaridad.
Reducir el tamaño de las fotos de una web es una práctica que debes dominar si quieres resultados de tu web, así que no quería dejar pasar la oportunidad de hablarte de cómo comprimir fotos para hacer más óptima tu web.
1 ¿Por qué hay que reducir el tamaño de las fotos de tu web?
2 ¿Cuál es mejor tipo de imagen para mi web?
2.1 ¿Cuando se debe utilizar uno u otro formato?
3 Optimizar imágenes para la web
3.1 ¿Qué resolución escoger?
3.2 Que no debes hacer nunca con las imágenes para la web
4 Los mejores programas para optimizar imágenes para web
4.5 FILEminimizer Pictures
¿Por qué hay que reducir el tamaño de las fotos de tu web?
Las imágenes sin optimizar, sin comprimir correctamente, tienen un efecto muy negativo en la efectividad de una web.
¿Por qué? Pues porque la hace terriblemente lenta y eso repercute negativamente en:
El SEO: Ningún buscador posicionará bien una web que tarda en cargar
La Usabilidad: No es cómoda de usar una web en la que tienes que estar esperando que cargue la siguiente página
La Eficiencia de la web: ¿Tu esperarías segundos a que cargue una web o harás una nueva búsqueda para encontrar una alternativa?
Saber reducir el tamaño de de las fotos, optimizar imágenes para la web, saber comprimir correctamente las imágenes es imprescindible para cualquier diseñador web
Es vergonzoso que aún hayan webs con fotos de varias megas y que nadie las optimice
¿Cuál es mejor tipo de imagen para mi web?
Cómo sabes, no puedes usar cualquier tipo de imagen para tu web. Un tiff, por ejemplo, sería una muy mala elección.
Los formatos estándar de imagen para la web son:
Todos ellos basados en mapas de bits o, también llamados ráster.
También existe un formato vectorial que puedes usar en tu web (y no es flash, no):
¿Cuando se debe utilizar uno u otro formato?
GIF es un formato decano de imagen comprimida que se ha recuperado ultimamente en las redes sociales, aunque llevaba ya unos años en el olvido.
Este formato tiene la desventaja de usar sólo 256 colores y el acierto de posibilitar pequeñas animaciones gracias a que funciona por capas.
Incluso tiene una capa transparente.
Este formato se comprime bajando la cantidad de colores utilizados por la imagen, por lo que en una época fue muy útil para imágenes planas, dibujos y/o logotipos.
Imagen original de hatandriyapramusesa
JPG es el formato comprimido más conocido y utilizado en la web.
Aunque puede usar millones de colores, cuanto más comprimida está la imagen menos resolución tiene, aunque da muy buen resultado si se equilibra correctamente la fidelidad original con la compresión moderada.
Imagen original de www.neuronagroup.cl
PNG es un formato que se queda un poco a medio camino entre el GIF y JPG.
También puede trabajar con millones de colores (PNG 24) y, además, incluye la posibilidad de crear fondos transparentes con una capa Alpha.
Aunque se inventó para ser un formato sin pérdida, no deja de ser una evolución de GIF.
Sería el formato perfecto si no fuese el más pesado de todos.
SVG es un formato que, a diferencia de los anteriores, está basado en vectores y no en mapas de bits.
Aunque no es todo lo conocido que debería, lleva muchos años en la web y parece que cada vez tiene más adeptos.
Tiene muchas ventajas y todos los números para sustituir finalmente al GIF:
Se redimensiona sin pérdida
Está aceptado y recomendado por el Consorcio WWW
La desventaja es que está limitado su uso a imágenes planas, logotipos y/o dibujos
Imagen original de http://s.culturacion.com
El primer consejo que te voy a dar para reducir el tamaño de las fotos es que debes aprender a usar los formatos de imagen según el caso.
Saber escoger correctamente cuando usar jpg, png o svg será definitivo para que tu web sea más usable.
Pero también tienes que saber cuando no usarlas.
Siempre que puedas solucionar la cuestión estética con CSS, no uses imágenes
Es una postura inteligente usar fuentes web (como las Google Fonts), efectos visuales CSS (como degradados) frente al uso de las imágenes. La carga será mucho más rápida y eficaz si evitamos usar imágenes de forma gratuita.
En cuanto a la optimización de imágenes para reducir el tamaño de las fotos, hay una regla que debes seguir y que yo les repito a mis alumnos hasta la saciedad:
Optimiza tu imagen al 100% del tamaño en que se ha de publicar y con resolución de pantalla
Para comprimir fotos o imágenes de forma correcta debes seguir siempre unas pequeñas reglas:
El tamaño de tu imagen debe estar al 100% cuando se muestre en la web
Tus imágenes deben tener la resolución de pantalla. Actualmente hay una pequeña guerra entre dos formatos de resolución:
Resolución de pantalla estándar: 72 ppi
Retina es un sistema que aplica Apple a sus dispositivos, sobretodo móviles, que mejora ampliamente la calidad de visionado de las imágenes.
Pues dependerá de cuál sea el público objetivo de tu web.
Si éste es clase alta, diseñadores, profesionales liberales, etc… Es decir, personas que por su poder adquisitivo o profesión consumen dispositivos Apple, necesitarás aplicar Retina, para el resto de webs, la resolución estándar es más que suficiente.
Que no debes hacer nunca con las imágenes para la web
No redimensiones nunca a la baja tus imágenes: Aunque la veas más pequeña, la imagen sigue siendo grande y sigue pesando lo mismo: demasiado.
No redimensiones nunca al alta tus imágenes: Si tu imagen es más pequeña y la redimensionas a un tamaño mayor sólo conseguirás que se vea pixelada
No vuelvas a subir una imagen que ya está subida: No lo necesitas, vuelve a enlazar la misma imagen… Sí, se puede hacer. Ten el detalle de poner la fuente de procedencia y asegúrate que no tiene derechos de publicación antes de usar una imagen de terceros.
No comprimas demasiado: Deformarás la imagen y tu web dará la sensación de una web amateur.
Si sigues estas prácticas harás todo lo contrario a reducir el tamaño de las fotos.
Los mejores programas para optimizar imágenes para web
imagen original de http://i.emezeta.com
Reconozco que no soy especialmente amigo de Photoshop para la optimización de imágenes web, pero como estoy seguro que o la usas o has oído hablar de ella, voy a comentarla un poco por encima.
No la recomiendo especialmente ya que, aunque con Photoshop se puede manipular la compresión y el tamaño de una imagen, el resultado aún sigue siendo más grande de lo que debería ya que deja mucha información innecesaria dentro de la imagen.
De todas formas, te incluyo un acceso donde los amigos de 40 de fiebre explican paso por paso, cómo usar Photoshop para comprimir imágenes:
Este es un servicio online que recomiendo para quién no se quiere complicar demasiado la vida.
Comprime todos los formatos de imagen que te he comentado en este artículo e incluso tiene la opción Lossless que comprime sin pérdida de calidad.
En este vídeo te explica cómo utilizarlo para tus imágenes
También muy recomendado.
Incluye los mismo servicios que Compressor.io y más opciones.
A mi me gusta especialmente la posibilidad de comprimir una imagen con sólo la URL de la misma.
Esta es otra aplicación online con la que podrás subir 20 imágenes al mismo tiempo y de hasta 5 MB cada una.
Además, si usas WordPress, dispones de un plugin con el que podrás comprimir las imágenes desde tu propia web.
En este vídeo verás como usar TinyPNG.
FILEMinimizer Pictures es una pequeña maravilla gratuita que puedes instalar en tu ordenador para reducir tamaño de fotos e imágenes.
Este programa es capaz de reducir cualquier imagen hasta en un 98% y sin pérdida de calidad.
Trabaja con los formatos JPG, BMP, GIF, TIFF, PNG y EMF y con un tamaño máximo de 5 megas.
No es que recomiende FILEminizer Pictures, debería ser obligatorio para cualquier desarrollador o webmaster.
Te dejo un vídeo para que aprendas a usarlo, aunque verás que es extremadamente sencillo:
Creo que ya no tienes ninguna excusa para reducir el tamaño de tus fotos o imágenes en tu web.
Espero que este artículo te ayude a optimizar las imágenes de tu web y, por tanto, optimizar la carga de tu web y así mejorar los resultados de ésta.
¿Conoces otras técnicas para optimizar las imágenes de tu web? ¿Sabes de algún programa que no haya comentado y te buenos resultados?
Etiquetas: comprimir fotos, comprimir imágenes, reducir tamaño fotos
http://www.luislar.es/wp-content/uploads/2016/07/Como-reducir-el-tamaño-de-las-fotos.jpg 315 560 Luis A. Román Mañas http://www.luislar.es/wp-content/uploads/2016/01/luislar_logo.jpg Luis A. Román Mañas2016-07-12 18:41:522017-04-27 09:10:48Cómo reducir el tamaño de las fotos de tu web
Buenisimo artículo, Luis. Había leído otros artículos sobre lo mismo pero el tuyo es muy completo.
12 julio, 2016 en 19:45
12 julio, 2016 en 19:44
Tio, muy buen artículo. Me va ayudar mucho con mi web. Gracias
Espero que te ayude y si tienes alguna cosa que comentar, aquí me tienes siempre
sergi masdeu Dice:
13 julio, 2016 en 09:20
¿Como es posible que un programa sea capaz de comprimir 98% y no tenga perdida? Hasta que no lo pruebe no me lo creo
13 julio, 2016 en 10:38
No es que comprima siempre al 98%, es hasta el 98%.
Te recomiendo que lo pruebes, los resultados son espectaculares.
El titulo de cada herramienta está enlazado con su página, así que solo pulsando en el titulo te llevara a la página de descarga.
19 julio, 2016 en 09:35
Artículo muy completo e interesante para poder reducir la imágenes y por lo tanto mejorar nuestra velocidad de carga.
Muchas gracias por tu valoración Jesús.
diseÃ±o web tarragona Dice:
7 diciembre, 2016 en 14:22
Muchas gracias. Espero verte por aquí más amenudo
¿Por qué Microsoft compra Linkedin? ¿Google quiere matar al SEO?

References: resolución 
 resolución 
 resolución 
 resolución 

Resolución 
 resolución