Cómunicado Importante: Mudanza Programada - 31/07/2017 + información


Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Photoshop: Optimizar imágenes para acelerar tu sitio
#1
Con algunos conocimientos básicos en la compresión y optimización de las imágenes, es posible reducir significativamente el tamaño de una imagen mientras aumentamos su calidad.

Minimizar los tiempos de carga hará más rápida y placentera la experiencia del visitante. Por eso en esta nota te contamos cómo optimizar las imágenes de nuestro sitio con Photoshop para lograr un mejor desempeño.

“Guardar para web & Dispositivos” en Photoshop


La primera clave para una mejor optimización de las imágenes es ajustar cómo se guardan las imágenes web desde Photoshop. Si estás acostumbrado a las típicas funciones “Guardar” o “Guardar como”, es tiempo de aprender un truco nuevo:

“Archivo > Guardar para Web & Dispositivos…” es la funcionalidad que deberías comenzar a utilizar al guardar tus imágenes para la web. Trabajar desde esta herramienta te brindará mucho control extra sobre tu imagen, con pre-visualizaciones de cómo lucirá una imagen luego de la compresión.

Utilizar la función “Guardar para Web” nos permitirá un mejor control sobre la compresión de la imagen.

Existen 3 formatos que son de los que más hablaremos y los que más se utilizan:

* * .jpg - Se pierde calidad, formato genial para las fotografías
* * .png (8-bit) - Tipo de compresión sin pérdida, rango de color limitado
* * .gif - sin pérdida con rango de color limitado como .png de 8-bit, pero .png es usualmente una mejor elección

Habrá instancias en las que necesitarás utilizar.png de 24-bit. Por ejemplo: es el único tipo de archivo comunmente soportado con un canal alpha para transparencia de imagen en la web. Casi siempre será más grande que cualquier otro formato dado que es un tipo de compresión sin pérdida que soporta un rango de color más amplio.

Compresión .jpg

El formato de imagen .jpg calza mejor en aquellas imágenes que poseen un amplio rango de colores en las que no hay ejes finos o transiciones afiladas. Debido a su algoritmo de compresión, funciona muy bien con fotografías. Es posible reducir significantemente el tamaño del archivo usando JPG mientras se mantiene la calidad de la imagen alta. En la imagen de abajo, por ejemplo, existe una diferencia difícilmente percibible entre la imagen guardada en calidad máxima y el .jpg guardado como calidad “High” (o 60%). Y a pesar de eso, la imagen tiene casi ¼ del tamaño de la original.
[Imagen: image-compression-quality-comparison.jpg]

A la izquierda se encuentra la imagen de máxima calidad utilizando “Guardar para Web” en Adobe Photoshop (74.9 KB). En el medio está la misma imagen guardada como calidad alta, a pesar de que hay una pequeña diferencia notable a la vista, ¡El tamaño del archivo fue reducido a 19.6 KB! En el lado derecho está la misma imagen guardada como calidad baja, con fallas muy notables (6.29 KB).

Con la compresión .jpg posees la habilidad de prácticamente ajustar la calidad de la imagen a gusto, a cambio del tamaño del archivo. Con las fotografías seguramente encontrarás que la calidad de 60-70% funciona bien. Si hay texto en la imagen, notarás más defectos dada la agudeza de los ejes, y puede que necesites mejorar la calidad.

Compresión .gif y .png

Los formatos de imagen .gif y .png de 8-bit son mejores para imágenes con rangos de color limitados (pueden mostrar hasta 256 colores), donde hay grandes áreas de colores uniformes. En estas instancias, .png y .gif usualmente producirán una representación de la imagen original cercana a la perfección. El uso típico de estos formatos incluye íconos, ítems de interfaz e imágenes en las que el texto necesita ser representado con precisión.

A menudo, el formato .png de 8-bit compresionará mejor que .gif. Ambos formatos soportan pixeles transparentes (no confundir con transparencia alpha que es soportado por .png 24-bit).
[Imagen: gifvspngvsjpg.png]

Ambos, .gif y .png de 8-bit, utilizan compresión sin pérdida, pero están restringidas a un número de colores limitado. Estos tipos de compresión serán mucho más altos en calidad, y mucho más pequeños en tamaño de archivo de acuerdo a la limitación de color de la imagen. Estos formatos suelen ser muy buenos para interfaces y textos donde una compresión con pérdida como .jpg requeriría que fueran guardados en una calidad mucho más alta para lograr verse igual (es decir, archivos más grandes).

El tamaño de la imagen verdaderamente importa

La compresión de una sola imagen puede no variar mucho, pero si lo vuelves una práctica común a todas las imágenes de tu sitio, terminarás ahorrando una gran cantidad de ancho de banda. Al utilizar archivos más pequeños, puedes lograr que las páginas carguen más rápido y mejorar muchísimo la experiencia del usuario.

Y como sabemos, el tiempo de carga es un factor determinante en cuando a la retención de los usuarios. Así que optimizar tus imágenes, no sólo es una buena forma de aumentar la velocidad de tu sitio, sino su popularidad también.
[Imagen: bann.png]
WWW
#2
Gracias x el dato TQ..
Sonrojado
WWW
#3
Muy bueno el artículo, grasias Gran sonrisa
WWW
#4
de nada, un artículo que intenté rescatar

igualmente, si hay algun post bueno y que no esté aqui, pónganlo, no hay ningún problema
[Imagen: bann.png]
WWW
#5
el png se utiliza para transparecias y gif para que puedan pesar lo minimo una imagen por ejemplo su uso en las web´s

Salu2 ;-)
#6
que bueno que veo este post tengon un monton de dudas al respecto, indudablemente para ahorrar espacio y perder la menor calidad jpg, pero e estado esperimentando con alguos temas y es mucho mejor png por su capasidad de trasmparecias, pero todabia no entiendo por que dos imagenes png de las mismas dimenciones y no muy direrentes en los tonos puedn cer tan diferentes una a 500kb o otra a 1.4mb esto se vuelve un incombeniente para mi por que quiero usar vario header y muchos de ellos superan el mb.

¿hay alguna forma de comprimir eficientemente los png 24bit? no me importa si pierden un poco de calidad, lo que me interesa en las trasparencias.
Crear tipo de nodo. Agregar campos CCK. Crear Vista. Enjuague. Y repita.
WWW
#7
Esta Muy Bueno Este post, con esto podemos reducir el peso de nuestras imagenes. Gracias.
#8
joksan escribió:que bueno que veo este post tengon un monton de dudas al respecto, indudablemente para ahorrar espacio y perder la menor calidad jpg, pero e estado esperimentando con alguos temas y es mucho mejor png por su capasidad de trasmparecias, pero todabia no entiendo por que dos imagenes png de las mismas dimenciones y no muy direrentes en los tonos puedn cer tan diferentes una a 500kb o otra a 1.4mb esto se vuelve un incombeniente para mi por que quiero usar vario header y muchos de ellos superan el mb.

¿hay alguna forma de comprimir eficientemente los png 24bit? no me importa si pierden un poco de calidad, lo que me interesa en las trasparencias.

pues de que se puede, se puede

en los png, además del tanmaño importa la resolución

si quieres comprimir un Png, te recomiendo PNG OUT, pruebalo y me dices como te fue
[Imagen: bann.png]
WWW
#9
gracias taquion pero creo que si me estoy mancgando con imagenes de mas de un 1mb como header, no se combrimen mucho.

creo que no me va a quedar mas remedio que unarlas a 8 bit.
Crear tipo de nodo. Agregar campos CCK. Crear Vista. Enjuague. Y repita.
WWW
#10
no se si en verdad haya una gran diferencia en la percepcion entre 8 bits y 24 bits en la imagen que andas tratando de "achicar"
[Imagen: bann.png]
WWW


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  Imagenes RAW directamente en android ghmillet 4 48 12-07-2017, 07:36 PM
Último mensaje: juanjj
  PicMonkey editor de imágenes online Milagro García 26 541 15-02-2017, 02:37 PM
Último mensaje: Milagro García
  20 Imágenes más impresionantes que verás en tu vida MultiDescargas 16 1.021 02-04-2016, 05:38 PM
Último mensaje: YamaT
  Burbujas Animadas en Photoshop MultiDescargas 6 685 01-03-2016, 04:37 PM
Último mensaje: YamaT
  Basico-Photoshop, basico graffiti dormio 9 688 05-05-2015, 02:46 AM
Último mensaje: Renguit0
Fotografía Editor de imágenes "Photoshop" Online davilro 7 939 27-09-2014, 08:26 AM
Último mensaje: ElZorro74
  Tutorial Photoshop - Retoque Fotografico danesth 0 383 08-08-2014, 04:57 PM
Último mensaje: danesth
  Texturas Nature HD [Para Photoshop] CarlosLP0 2 1.877 30-07-2014, 09:23 PM
Último mensaje: Kevin9908
  basico photoshop, color selectivo dormio 0 406 28-04-2014, 01:22 PM
Último mensaje: dormio
  Herramientas para Diseñadores. Photoshop. nicoovg 11 1.028 06-10-2013, 04:50 AM
Último mensaje: tyler



Usuarios navegando en este tema: 1 invitado(s)