La velocidad de tu web es un factor muy importante que debes tener en cuenta en todo momento. Por ello es imprescindible optimizar todas las imágenes que vayas a publicar, ya que su tamaño influirá mucho en el tiempo de carga de la web.
Cuando hablo de optimizar imágenes, me refiero a reducir su tamaño. Mi cámara de fotos, por ejemplo, saca imágenes con una resolución enorme, 5000 px de ancho, haciendo que algunas pesen hasta 50 Mb. Te aseguro que no es necesario tener fotos con una resolución tan alta a no ser que vayas a hacer un cartel para una exposición.
Las imágenes que vas a subir a tu web no deberían tener en ningún caso más de 2000 px de ancho y ocupar más de 600 – 700 kb de espacio. Para conseguir reducir su tamaño tienes varias opciones.
Distintos formatos de imágenes
En función de para que quieras utilizar una imagen necesitaras un formato u otro.
GIF: es el formato que utilizaras si queréis subir una imagen animada (secuencia de varias imágenes)
PNG: con este formato podrás guardar imágenes con fondo transparente (como el logo te tu web por ejemplo)
JPG: es el formato estándar para fotografías y el más utilizado. En este post me voy a centrar en explicarte como reducir imágenes en este formato.
Reducir el tamaño con Photoshop
Te voy a explicar dos formas de reducir el tamaño, el resultado es el mismo y los principios que voy a explicarte también, solo cambia el proceso, así que elige el que te resulte más cómodo o intuitivo.
MÉTODO 1
1 – Abre la imagen en Photoshop
2 – Imagen / Tamaño de imagen / Ancho = 1000 px máximo. Si la imagen la vas a utilizar como portada de un post o en el header del blog 1000 px está bien. Si es una imagen que va dentro del post pero no en la portada, con 800 px bastara.
3 – Guardar como / Selecciona JPG / Calidad alta-media. Te recomiendo entre 7-9, veras que el tamaño de la imagen aparece debajo del botón de OK y que varía en función de la calidad que elijas. Intenta que no supere los 200-300 kb.
MÉTODO 2
1 – Abre la imagen en Photoshop
2 – Guardar para web
3 – Te aparecerá una ventana con varias opciones:
- Selecciona formato JPG
- Tamaño de imagen (abajo del todo), de nuevo 1000 px máximo
- Calidad entre 70-90 (equivale al 7-9 de antes)
Como puedes ver es exactamente lo mismo pero hecho de dos formas. Si no conoces muy bien Photoshop y lo único que quieres hacer es reducir el tamaño, el método 2 te resultara más rápido y fácil ya que está todo en la misma ventana.
Yo suelo utilizar el primero porque me gusta retocar “pequeñas cosas” y así puedo trabajar con el tamaño real en el que se va a ver la imagen final. En cualquiera de los dos casos te recomiendo que conserves la imagen original, no guardes sobre ella, nunca sabes lo que puede pasar y si la vas a volver a utilizar ?
*NOTA: no escribas guiones bajos ni símbolos extraños en el nombre de la imagen. Los móviles no los leen bien y puede que no algunos dispositivos no muestren las imágenes si lo haces.
Reducir el tamaño con ImageOptim
Si no tienes Photoshop instalado en el ordenador y te parece muy engorroso tener que ponerte a reducir las imágenes con el método anterior, siempre puedes optar por una solución más sencilla.
Existen algunos programas, como ImageOptim, que se encargan de reducir el tamaño de las imágenes de forma automática. Tan solo tendrás que arrástralas hasta la ventana correspondiente y el resto se hará solo.
Si tienes muchas imágenes que quieres optimizar de golpe, este método puede ser una muy buena opción, aunque no se suelen obtener resultados tan buenos como con Photoshop.
Optimizar las imágenes con WP Smush
Además de reducir el tamaño de las imágenes en el ordenador, también es conveniente instalar algún plugin que las comprima al subirlas a la web. Así te aseguras que están completamente optimizadas.
Mi opción favorita para esto es el plugin WP Smush. No requiere ninguna configuración y funciona de maravilla. Tan solo tienes que instalarlo y él solo se encarga de optimizar automáticamente todas las imágenes que subas sin hacer nada. Lo instalas y te olvidas.
Si buscas por la red verás que hay muchísimas herramientas para ayudarte a optimizar tus imágenes. En mi selección he añadido las que utilizo en mi día a día porque son las que conozco y sé que funcionan bien. Espero haberte ayudado y ya sabes que si tienes dudas o preguntas puedes dejarme un comentario más abajo. Estaré encantada de leerte 😉
