¡Prueba nuestra solución gratis durante 15 días! (sin compromiso) Prueba Gratis
Síguenos
Linkedin XopieFacebook XopieTwitter XopieGoogle Plus XopieYouTube Xopie
Suscríbete a nuestra newsletter e-commerce
Enviar
He leído y acepto la política de privacidad
Contáctanos
93 242 50 06
Guías Gratis
Descargar
Oxatis FranceActinic UKXopie Espagne
N°1 en soluciones e-commerce en Europa
Tu cesta 0 0,00 €
Blog ecommerce
Buscar   Regreso a las entradas

Cómo optimizar las imágenes para la web

Cómo optimizar las imágenes para la web

Uno de los factores a tener en cuenta cuando se analiza el rendimiento de una página web es la velocidad de carga. 

Hay muchos aspectos que influyen en la velocidad de la carga de una página y muy amplios: comprenden desde los servidores hasta el código fuente. La mayoría son de carácter técnico, pero hay uno en que el usuario que administra la página o la tienda tiene una influencia directa: las imágenes.

Vamos a ver cómo optimizar las imágenes para que aquel banner o aquella foto que tanto te gustan no penalice la carga de tu tienda. Para este ejercicio vamos a utilizar el programa Adobe Photoshop, aunque también pueden usarse otras aplicaciones.

Los pasos son los siguientes:

1.- Abre la imagen en Photoshop.

2.- Haz las modificaciones que necesites, en caso que debas editar la imagen. A la imagen de este ejemplo se le ha cambiado el tamaño, pues 1920 x 1080 px es un tamaño muy grande para la publicación en Internet, mejor, por ejemplo 900 x 506 px.

3.- En vez de guardar la imagen con el comando Archivo -> Guardar, pincha en Archivo -> Guardar para web y dispositivos.

4.- En la ventana que te aparecerá, en la parte superior hay cuatro pestañas, pincha en la de más a la derecha (4 copias) para poder ver 4 versiones distintas de la imagen: la original, y 3 de configurables.

optimización de imágenes para la web

4.1.- Los parámetros a la izquierda indican el tipo de fichero, el espacio en disco que ocupará, y el tiempo que tardará en descargarse con una conexión de la velocidad indicada (en Kbps).

optimización de imágenes para la web

4.2- Los parámetros a la derecha son los más significativos para el tipo de fichero de la versión.

optimización de imágenes para la web

5.- Ahora prueba distintos tipos de fichero con distintas configuraciones. En el ejemplo anterior, puedes ver distintos tamaños para el tipo PNG-8. 

6.- Para finalizar, pincha en Guardar.

Y ahora viene la pregunta del millón. ¿Què formato utilizar?

Antes de responder, introduzco un poco los cuatro formatos con los que se suele trabajar en web:

- JPG, el más utilizado, ideal para fotografías.
- GIF, conocido por poder hacer animaciones, su uso más general es en imágenes con pocos colores y planos; además, admite transparencias. Su uso más habitual es en logotipos, por ejemplo.
- PNG. Hay dos tipos, PNG-8 y PNG-24. Se les puede comparar a los formatos GIF y JPG, respectivamente.


¿Cuál escoger? Pues dependerá básicamente de la pérdida de calidad que quieras tolerar. 

Espero que este artículo te haya sido útil para la optimización de vuestras imágenes ;)

Escrito el  15 Nov 2013 16:21 en EmpezandoHerramientas  -  Enlace permanente

Comentarios

Ningún comentario.

Escribe un comentario

El nombre y el email son obligatorios. El email no será públicado.
Comentario
Nombre *
Email *
Sitio Web