Tema: Compresión de imágenes para sitio


 2000 visualizaciones - 5 respuestas.
Ultima respuesta por Johana Venavides el 31/08/2016 a las 14:08 Ir a la ultima respuesta

  07/05/2016 2:04 pmtema inicial  
Fuera de línea Sebastian D Alessandro
Compresión de imágenes para sitio
Hola a todos! Tengo una consulta: Cual es el workflow que optimiza la imágen para el sitio? Esto surge ya que quiero subir una foto de paisaje que debo reducir drásticamente en calidad para poder encajar en los 1500px y 400kb que requiere el sitio. Debo llevarla a calidad 5 de jpg con 240 pixeles por pulgada, lo cual degrada bastante la calidad visual.
Desde ya agradezco sus comentarios!
Saludos.


me gusta

  07/05/2016 7:14 pmrespuesta #1 
Fuera de línea José Aris Martínez
RE :Compresión de imágenes para sitio
Hola Sebastián, te paso mi método que es similar al que Mariano Fernández publicó una vez en su tutorial de edición.

Se parte del redimensionamiento de la imagen en 2 pasos: en la primera reducción  hay que llevar el tamaño a una dimensión igual al tamaño final x 1,66666. Por ejemplo si el lado mayor va a tener 1500 px, entonces en el primer paso hay que llevarlo a 1500 x 1,66666 = 2500 px. Esto tiene que ver con el algoritmo utilizado en el método de remuestreo de Photoshop.

Una aclaración: de los píxeles por pulgada olvidate completamente porque para visualizar una foto en una pantalla no tienen nada que ver, los píxeles por pulgada hacen referencia a las imágenes impresas, la resolución propia de cada pantalla es la que establece que cantidad de píxeles por pulgada se van a visualizar, y todas las imágenes se van a ver con la misma resolución en la misma pantalla (siempre que se vean al 100%)

1) Ir a Imagen / Tamaño de imagen
Marcar los casilleros: Cambiar escala de estilos, Restringir proporciones y Remuestrear imagen
Seleccionar Bicúbica automática
En el lado mayor ingresar 2500 px (asumiendo que el tamaño final será 1500 px).

2) Ampliar la visualización a tamaño de píxeles reales (100%)
Ir a Filtro / Enfocar / Enfoque suavizado
Marcar casilla Más Exacto y seleccionar Desenfoque de Lente
Cantidad: entre 100 y 200
Radio: 0,1 px

3) Ir a Imagen / Tamaño de imagen
Igual al paso 1, ingresando 1500 px

4) Igual al paso 2, con Cantidad 30 a 80, todo lo demás igual

5) Ir a Archivo / Guardar para web....
En la solapa Optimizado:
Marcar casillero Optimizado
Marcar Convertir en sRGB
Abajo a la derecha seleccionar Bicúbica
Arriba a la derecha buscar un valor de calidad lo más alto posible que arroje un peso inferior a 400kb.

La calidad va a depender tanto del tamaño en píxeles como de la cantidad de información que contenga la imagen en base a colores, detalles, etc.
Yo en general subo con un tamaño máximo de 1200 px en el lado mayor para tener una calidad alrededor de 70-80

Espero que esto te sirva, saludos!



me gusta
Me gusta en esta respuesta:

  07/05/2016 11:22 pmrespuesta #2 
Fuera de línea Sebastian D Alessandro
RE :Compresión de imágenes para sitio
Muchas Gracias José por tu respuesta tan detallada! Voy a poner en práctica el método.

Un abrazo.

Sebastián.


me gusta

  12/05/2016 8:33 pmrespuesta #3 
Fuera de línea Carlos Cuñado Strelkov
RE :Compresión de imágenes para sitio
Editado por Carlos Cuñado Strelkov el 17/05/2016 1:19 pm.
Hola Sebastian 
En esta pagina hay muchos que saben más que yo del tema y tienen más experiencia (y yo voy a estar atento a las futuras respuestas para ver si aprendo algo nuevo jaj)  pero por si te sirve te comento lo que yo hago para reducir las fotos y en mi caso es lo que mejor me esta funcionando tanto por lo simple que es como por la calidad de resultados:
Primero y muy importante siempre me aseguro de no modificar el archivo original si no que siempre por las dudas trabajó en una copia y lo que hago es abrir esta copia en Ps (suponiendo que ya realice todas las mejoras que quiera hacerle a la imagen) me dirijo a archivo/ Guardar para web (Alt+Mayus+Ctrl+S) Cuando hagas clik se te va a abrir una ventana en la que vas a ver dos veces tu imagen, la de arriba va a decir original y la de abajo JPEG, los dos imágenes van a estar aumentadas por defecto al 100% para que puedas ver en detalle los cambio que hagas, para verlo así asegurarte de elegir la opción que dice 2 copias en vez de la que dice original, 4 copias, etc.
Al otro lado de la pantalla podes poner los cambios que quieras hacer:
En este caso sería formato JPEG.
La calidad al comienzo la dejo al máximo.
 El tilde lo pongo en optimizado y paso directo a las siguientes configuraciones (te recomiendo leer bien las diferentes opciones y ver lo que preferís)
La visualización lo dejo en rgb estándar para internet.
Tamaño: el que necesites para internet normalmente entre 900 y 1400 es más que suficiente para la mayoría de los casos, en el recuadro que dice calidad lo dejo en bicúbica más enfocada.
 En cuanto completes esto podes volver a la parte de arriba donde también dice calidad aunque la opción es diferente, en ese punto podes ir reduciendo hasta que la foto tenga el peso que necesites (para esta pagina seria 400) Como sugerencia final te recomendaría nunca darle una calidad menor de 80, si ves que bajaste hasta 80% y el archivo sigue siendo muy pesado es mejor volver al tamaño de imagen y reducir más los px, por ejemplo si habías probado con 1400 y la foto es muy pesada reduci a 1100, porque si en vez de hacer esto seguis bajando la calidad la foto se va a comenzar a ver mal porque estas teniendo una menor calidad para una imagen del mismo tamaño y es preferible que la imagen se vea más chica a que se vea más grande de lo que puede soportar.
El peso y tamaño de la imagen lo vas a ver en letras pequeñas debajo de la foto que dice JPEG y cada vez que realices un cambio estos números se van a ir actualizando. 
Saludos y espero que te sirva


me gusta

  02/08/2016 5:50 pmrespuesta #4 
Fuera de línea Federico Burgos Bauer
RE :Compresión de imágenes para sitio
Hola, medio tarde para responder, pero te cuento que yo uso un plug-in de Photoshop que se llama WebSharpener, y lo que hace justamente es re-dimensionar tu imagen a los px que vos le pidas, sin perdida de datos, y con la posibilidad de aplicar algunos ajustes extras. A mi me va muy bien, y es muy rápido e intuitivo, saludos!

me gusta

  31/08/2016 2:08 pmrespuesta #5 
Fuera de línea Johana Venavides
RE :Compresión de imágenes para sitio
Editado 8 veces. Ultima edición por Johana Venavides el 27/04/2019 3:01 am.
En caso ya lo ayas conseguido te dejo lo que utilizo, igual que el amigo de arriba utilizo WebSharpener pero también hay una opción en Photoshop que es la sección del menú. Mas información:eliminarelacneya.com/

 ir a : archivo - guardar para web , ahí te sale todo los formatos, dimensiones y la calidad. 

Acá te dejo esto por si te interesa:



me gusta

 


Escribir nueva respuesta