Ayuda Registrarse

Cómo optimizar las imágenes para tu web


No es nada nuevo que las imágenes son un pilar fundamental en nuestra página web: es lo que nos va a ayudar a captar la atención de nuestras visitas y hasta puede ser el elemento detonador de una compra... si lo hacemos bien. Subir una foto de mala calidad, o tener una pésima organización de ellas, puede ocasionar el efecto contrario claro está.

 

Vamos al lío. ¿Por qué es importante optimizar tus imágenes y qué tienes que tener en cuenta a la hora de subirlas a tu web?

¿Por qué es importante optimizar las imágenes?

Las razones son muchas pero nos quedamos con las tres más importantes:

  • SEO:  uno de los factores que contribuye al posicionamiento es la velocidad de la carga de la página o dicho de otra manera, una página cuya carga en el navegador sea lenta, tendrá menos posibilidades de posicionar correctamente. Las imágenes pesadas (muchos KB o MB) hacen que la velocidad de carga de una página se vea ralentizada.
  • Conversión: Una página cuya estructura y la combinación de imágenes y textos sea organizada, tendrá más posibilidades de atraer, retener y "convertir" en clientes a las visitas.
  • Estética: las imágenes  de pésima calidad hacen de todo menos transferir una imagen seria y profesional de nuestro negocio.

Calidad de las imágenes

¿Puedes ver la diferencia entre estas dos imágenes de abajo? A simple vista no hay ninguna diferencia, pero sin embargo una está optimizada para la web y la otra no. ¿Quieres saber cuál es la diferencia?

IMAGEN OPTIMIZADA

  • Tamaño: 350 x 233 px
  • Resolución: 72 ppp
  • Tamaño (KB): 33Kb

IMAGEN NO OPTIMIZADA

  • Tamaño: 6000 x 4000 px
  • Resolución: 300 ppp
  • Tamaño (KB): 10,3 MB

Vamos a explicar porqué una está optimizada y la otra no: 

 

PÍXELES

El tamaño en píxeles de la imagen original es el tamaño de largo y ancho. Piensa que 32 píxeles son 1 centímetro: por lo que la imagen original de la derecha (no optimizada) sería de 187,5 cm (que es la altura de un hombre adulto). Este es un tamaño innecesario para una imagen dentro de una columna. Podemos tener imágenes de 1000 o 2000 píxeles por ejemplo en el área superior de algunas plantillas (que está destinada para tener una imagen).

 

RESOLUCIÓN

ppp significa píxeles por pulgadas (también puedes verlo en inglés como dpi -dot per inch- o ppi -pixels per inch). Cuanto mayor sea el número de pp, mayor será la calidad, pero eso servirá para la impresión de una imagen. Por ejemplo, para una página web, 72 pp será suficiente; mientras que para un imagen de un periódico se necesita al menos 300 pp.

 

TAMAÑO

Efectivamente, la imagen optimizada será menos pesada (33KB) que la imagen no optimizada para web (10, 3 MB) y eso influye en la velocidad de carga de la página. Existen diferentes formas para guardar imágenes para web o incluso plataformas online como pixlr donde puedes optimizarlas. Como decíamos, lo importante es la forma de guardar el archivo para web: podemos incluso lograr que una imagen de 2000px, optimizada para web y que no sea demasiado pesada.

En resumen, tendremos que buscar el equilibrio entre el tamaño y la calidad que queremos de la imagen para poder subirla correctamente a nuestra página web. 

¿Qué formato? ¿.jpg, .png o .gif?

Vamos a presentarte a continuación los tres formatos de imágenes más comunes de una página web y para qué se utiliza cada uno.

Formato .png
Formato .png
formato .jpg
formato .jpg
formato .gif
formato .gif

  • Formato .png: se utiliza sobretodo para las imágenes que están hechas con formas geométricas y tienen colores planos. La gran ventaja de este formato es que conserva las transparencias y que no pierde mucha calidad en la compresión de la imagen, por eso se utiliza para logotipos.

  • Formato .jpg: es el formato universal que se utiliza sobre todo para las imágenes, pues aunque se pierde un poco de calidad al comprimir las imágenes, no se pierden colores o tonalidades.

  • Formato .gif: este formato se utiliza para animaciones sobretodo. Dado que se utilizan varias imágenes o un vídeo para hacer el gif, el tamaño en kb puede ser muy grande; por eso, en ocasiones se comprime la imagen y pierde calidad.

Combinación imágenes y textos

No sirve de nada que hayamos optimizado las imágenes si al final vas a hacer esto:

Para que un diseño sea efectivo y que las imágenes capten la atención de las visitas, es fundamental que estén bien combinadas. En el ejemplo superior, vemos imágenes de diferentes tamaños y con un alineación distinta (derecha, centrada...).

 

Para que las imágenes ayuden a organizar el contenido y funcionen como un elemento de atracción, debemos hacer que tengan el mismo tamaño (ancho x largo) o el mismo ratio (16:9, 4:3, 1:1) como en el ejemplo de la imagen inferior.

¿Ves la diferencia? El orden y la armonía de las imágenes y los textos hacen que las personas encuentren el diseño agradable y no; y eso es lo que hace que sea efectivo o no.

Resumiendo...

Bueno, hemos dado mucha información, así que esto es lo que debes recordar:

  • Utiliza imágenes con un tamaño en píxeles adecuado en función de para lo que lo quieras utilizar (imagen de fondo, para una columna...)
  • Optimiza la imagen para web para que no sea muy pesada (KB) pues eso ayudará a la velocidad de carga de tu página.
  • Guarda las imágenes según el formato que más convenga a la imagen.
  • Haz que las imágenes tengan el mismo tamaño o ratio para que el diseño sea más efectivo.

.

 Cómo optimizar las imágenes para tu web

SEMINARIO ONLINE GRATUITO | 25 de febrero - horarios

Las imágenes son la piedra angular de una página web. Por ello es fundamental que cuides la calidad y la presentación para lograr un diseño efectivo y retener visitas. Te mostramos cómo puedes lograrlo con un fondo impactante y diapositivas de imágenes.

MÁS INFORMACIÓN
Elena Benavente / Relaciones públicas
Elena Benavente / Relaciones públicas




Comentarios: 31 (Discusión cerrada)
  • #1

    1422786409 (miércoles, 25 febrero 2015 11:01)

    Interesante muchas gracias, Una pregunta, es recomendable llevar la imagen para editarlo a Photoshop o con paint es suficiente?? claro siempre guardado en JPG o Png, ?cuando tengo la imagen en Photoshop para banner es recomendable guardarla en "Adaptada para web"

  • #2

    Jimdo-Team (miércoles, 25 febrero 2015 11:07)

    ¡Hola!

    Bueno, existen alternativas mejores a paint :) No tiene que ser Photoshop (si no quieres pagar la licencia), puedes utilizar Gimp u otras soluciones online como Pixlr.

    "Adaptada para web" es casi una obligación si quieres que la imagen esté optimizada.

    Espero haberte ayudado,
    Elena

  • #3

    Tamara Zambrana (miércoles, 25 febrero 2015 11:07)

    Interesantimisimo artículo, muchas gracias.
    Aquí dos formas con las que podemos optimizar las imagenes:

    http://tools.dynamicdrive.com/imageoptimizer/

    Plugin gratuito para Photoshop:
    http://www.fnordware.com/superpng/

    Saludos!

  • #4

    eliasriveram (miércoles, 25 febrero 2015 11:25)

    Hola equipo.
    Muy interesante esto que comparten. Muchas gracias.
    Una pregunta: ¿Como puedo saber el tamaño en pixeles de la imagen del logo? (en la versión anterior aparecía debajo a la derecha)
    Mil gracias anticipadas por su respuesta.

  • #5

    delaÓ · Jimdo Expert (miércoles, 25 febrero 2015 12:00)

    Concuerdo, pero echo en falta algún comentario sobre como optimizar dichas imágenes para pantallas Retina Display, donde los pixeles físicos son exactamente el doble que en un monitor estándar…

    Nuestras imágenes deberán tener el doble de resolución para ser mostradas correctamente en un monitor Retina (la imagen de ejemplo del ‘logo-cooking’ se ve realmente mal) y hay que buscar soluciones para no penalizar la velocidad de carga del usuario (Retina o no): http://imulus.github.io/retinajs/ ó Media Queries que especifique el ratio/pixel según la pantalla pueden ser una solución.

    A propósito: Al crear una plantilla personalizada no suelo utilizar el módulo de imagen individual de Jimdo por la compresión que realiza sobre las imágenes al subirlas; en su lugar cargo las imágenes mediante el módulo HTML (previamente subidas al hosting de Jimdo), lo que me da más control sobre los tamaños y pesos finales.

    Gracias.

  • #6

    Manuel Ángel Rodríguez (miércoles, 25 febrero 2015 14:21)

    Buenos días Elena, nos gustaría saber tu opinión sobre las imágenes con las que trabajamos habitualmente en nuestro website, normalmente son de 900x400 y con un tamaño máximo de 573Kb y un tamaño mínimo de 37Kb, todas ellas con extensión .JPG.

    ¿Crees que debemos reducir el peso?
    ¿Podríamos hacerlo correctamente con el Vista Previa de Mac?

    Enhorabuena por el artículo, nos viene como anillo al dedo para optimizar la carga de la web.

  • #7

    d07c408ad65235118c8c879fccd7b6 (miércoles, 25 febrero 2015 15:31)

    @Manuel las imágenes que utilizas en tu página están bastante bien, no hay necesidad de reducir el peso de éstas. Existe también otra herramienta donde puedes comprimir más tus imágenes, aquí te ingreso el enlace:

    https://tinypng.com/

    Un saludo!

  • #8

    Jimdo-Team (miércoles, 25 febrero 2015 15:53)

    @Delaó como nos comentas, existen varias soluciones para la optimización de imágenes para pantallas retina y también es importante señalar que las imágenes aunque tengan el doble de resolución y si las exportas de la manera correcta, no aumentarán considerablemente su peso.

    Muchas gracias por tu comentario, lo tomaremos en cuenta para futuros blogpost.

    Saludos.

  • #9

    Jimdo-Team (miércoles, 25 febrero 2015 15:55)

    Por cierto, les recomiendo echar un vistazo a la página de David, que es nuestro más reciente Jimdo-Expert ;)
    http://www.delaoweb.com/

    Un saludo!

  • #10

    Codadi Ingles online (miércoles, 25 febrero 2015 17:02)

    Buen articulo, solo me gustaria que incluyeran informacion referente a jimdo como por ejemplo si al subir las fotos jimdo hace algun tipo de compresion o no...
    Para reducir tamaño de imagenes tinypng.com es una buena opción, reduce el tamaño hasta 75% manteniendo la calidad de imagen.
    Saludos!

  • #11

    Camalefon (miércoles, 25 febrero 2015 18:45)

    Muy buen artículo, muchas gracias.

    Nos sirve de ayuda para el desarrollo y mejora de nuestra página web, la cual os invitamos a ver, permite que cada usuario realice el mismo su propia <a href="http://www.camalefon.com">Carcasas Personalizada</a>

    Un saludo y gracias!

  • #12

    DeliM Productions (jueves, 26 febrero 2015 01:55)

    ¡Muchas gracias por estos consejos, saludos!

  • #13

    doc-online (jueves, 26 febrero 2015 09:13)

    es interessante

  • #14

    locurasdelarte3d (jueves, 26 febrero 2015 16:21)

    Muy bueno, gracias Jimdo!!!!

  • #15

    Jimdo-Team (jueves, 26 febrero 2015 16:24)

    @codadi, cuando subes una imagen en un módulo de Jimdo se comprime sin perder la calidad de la imagen. Por ejemplo, si eliges la opción de "desplegar imagen al dar click", la imagen se desplegará en su tamaño original sin perder calidad.

  • #16

    Juan Villalon (jueves, 26 febrero 2015 17:51)

    Muy buenos los comentarios de los compañer@s, estara bien seguir el seminario, saludos.

  • #17

    nemejj (jueves, 26 febrero 2015 21:00)

    Buena explicación veré las imágenes de mi pagina para que no sea lento entrar para los buscadores.

  • #18

    YURI TRAVIESO HERNÁNDEZ (viernes, 27 febrero 2015 16:42)

    Muchas gracias, realmente útil toda la información que nos compartes, saludos

  • #19

    emigraraaustraliawillworl (lunes, 02 marzo 2015 19:55)

    excelente ayuda, muchas gracias

  • #20

    abogadosdeseguros (martes, 03 marzo 2015 18:36)

    gracias

  • #21

    art-kany (jueves, 05 marzo 2015 01:59)

    muchas gracias!

  • #22

    fabiolastj (jueves, 05 marzo 2015 07:33)

    Me gustó el contenido y está muy práctico. Gracias

  • #23

    Reformas Madrid (lunes, 09 marzo 2015 05:20)

    Muy útil, gracias por los consejos, me ayuda muchísimo.

  • #24

    manuel guerra (lunes, 09 marzo 2015 15:18)

    muchas gracias po la informacion, espero tengan mas exito

  • #25

    agraltamecanica (lunes, 09 marzo 2015 20:01)

    gracias por los consejos elena.

  • #26

    alquilercochesalicantes14 (martes, 10 marzo 2015 12:40)

    Me ha venido genial la información, gracias

  • #27

    Francisco Javier Elías Orellana (miércoles, 11 marzo 2015 00:22)

    Gracias por los consejos. Seguro que nos vienen bien a todos.

  • #28

    Maricela Tamayo Chacón (jueves, 12 marzo 2015 19:23)

    muy interesante, gracias a todos

  • #29

    Casquette Vans (lunes, 23 marzo 2015 02:44)

    El tamaño en píxeles de la imagen original es el tamaño de largo y ancho.

  • #30

    Pintores Madrid (domingo, 29 marzo 2015 08:48)

    Muchas gracias por esta excelente información, muy útil.

  • #31

    Be Off On (jueves, 16 abril 2015 17:44)

    Gracias, justo lo que estuve buscando. De verdad sigo con las dudas , una imagen en las paginas responsive deben de tener muchísima calidad o sea que un tamaño bastante grande y en el mismo momento pues deben de cargarse rápido en móviles .. Interesante no ? Un saludo