Cómo Optimizar las Imágenes de mi Blog con Photoshop

Hace unos días que te comentaba en Cómo posicionar las Imágenes en Google para atraer visitas al Blog, la importancia de las imágenes y fotografías que incluyes en los posts de tu sitio. Uno de los puntos que destacaba era el tamaño de las imágenes y como éste afecta a la velocidad de carga de tu web. Y lo que es más importante, cómo esto afecta al amor que tus lectores y Google tienen por ti…¡un blog lento no lo quiere nadie!. Así que hoy vamos al lío con Cómo Optimizar las Imágenes de mi Blog con Photoshop.

Antes de seguir, te recuerdo que no solo con optimizar fotos tu blog va a volar, aquí te dejo otros 10 consejos para mejorar la velocidad de carga de un blog. Por cierto, en este post, además de la importancia de optimizar las imágenes, te doy algunas alternativas para medir la velocidad de carga 😉

Si te soy sincera, en mis inicios, me liaba un montón con esto de los Píxeles, los KB,  los MG, cuál es la diferencia entre PNG8 y PNG24… y qué sé yo, mil cosas más que me sonaban a chino. Lo que hacía era simplemente poner la foto o imagen como quedara más mona para el post, ajustando el tamaño desde el mismo blog.

Hasta que me dí cuenta de que las imágenes hay que tratarlas antes de subirlas al blog si no queremos que se coman el espacio del hosting, además de hacer nuestro sitio superlento y que la experiencia del lector sea malísima.

Pero antes de explicarte cómo optimizar imágenes con Photoshop, permíteme contarte.

¿ Qué es optimizar una imágen ?

La optimización para Web es el proceso de compresión de imágenes y de definición de opciones de visualización para un uso óptimo en Internet. Al colocar imágenes en Internet, el tamaño de archivo es un factor importante a tener en consideración; se pretende obtener un tamaño de archivo que sea lo suficientemente pequeño como para permitir un tiempo de descarga razonable pero lo suficientemente grande como para mantener unos colores y detalles satisfactorios. (Información obtenida textualmente de la página de Adobe)

Ahora te voy a poner un ejemplo muy sencillo para entender todo esto del peso, tamaño…

Imagina que quieres meter una maleta en un coche. Hay varias posibilidades por las que puede resultar imposible hacerlo; porque la maleta sea demasiado grande en dimensiones y simplemente no cabe (tamaño en píxeles). Otra porque, aunque la maleta cabe perfectamente, lleva dentro algo muy pesado que hace imposible que el coche pueda circular correctamente con ella (peso en KB/MG). Y otra porque, aunque la maleta sea normal con unas dimensiones normales, el coche ya está lleno y no cabe ni un pelo, alojamiento petado.

Por último una aclaración, cada cosa va como por libre, pero también están muy relacionadas. Es decir, no porque pongas una foto pequeña te creas que pesa menos. Sin embargo, por lógica, una foto grande en dimensiones, pesará más que una pequeña. Siiii ya sé que es un poco lío, pero es de estas cosas que es más complicado explicarlas que hacerlas.

¿ Cómo Optimizar las Imágenes de mi Blog con Photoshop ?

Antes de nada decir que yo uso Photoshop porque es el programa que me gusta y me viene genial por mis dibujos, cabeceras, poner fondos transparentes, siempre tengo que recortar las imágenes o añadir texto…en definitiva optimizarlas, así que lo hago todo con él.

Pero hay más aplicaciones online para optimizar imágenes muy útiles y sencillas, aunque quizá con menos posibilidades. En otro post hablo de ellas si te interesa.

Empezamos…

Imagínate que esta foto acabo de hacerla con mí móvil o cámara. Así es tal y como la he tomado. Ves que es un archivo en formato JPEG, es el que suelo usar porque pesa mucho menos.

La foto mide 6000X4000 en pixeles, así que en un cuerpo de blog normal no cabría, y pesa una barbaridad 4.15MB (y no es de las que más pesan, ¿eh?). Compara, si tienes un hosting por ejemplo de 500MG y eres de poner muchas fotos, te va a durar un suspiro.

Vamos a optimizarla. Pincha con el botón derecho del ratón sobre el archivo y le das a Abrir con. En la ventana paralela busca Adobe Photoshop.

Ya la tienes abierta en Photoshop. No se ve muy bien pero os digo que la foto está al 12.5% y fíjate en las dimensiones que tiene…¡es enorme!. Y pesa 68.7MB, más que un collar de melones. ¿Te has fijado? ¿por qué ahora pesa mucho más de lo que pesaba antes!? Porque ahora está en formato Photoshop que es mucho más pesado. Imagina que lo guardas así sin darte cuenta…eh, que a mí me ha pasado.

Bueno seguimos, pincha arriba en  Imagen y abajo sobre tamaño de imagen.

Nos aparece la pantalla de Tamaño de Imagen. Si te fijas arriba te dice lo que pesa ahora con las nuevas dimensiones y lo que pesaba antes. Más abajo aparecen las casillas donde tienes que poner las dimensiones que tu quieras, para mi blog 800×533 por ejemplo. También he puesto una resolución de 72 pixeles/pulgada que es la resolución óptima para web. Y si te das cuenta te he señalado también la opción Restringir proporciones, que es por si quieres poner una anchura y una altura por separado, sin que guarden proporción (ojo con esto que se pueden distorsionar las imágenes). Una vez hechas las modificaciones picha en OK.

Bueno pues ya tienes la foto casi optimizada, ahora tienes que guardarla.

Pincha arriba en Archivo. En condiciones normales lo harías con Guardar como, verdad!?. Pero como la estás optimizando para subirla a un post, puedes/debes reducir su peso aun más. Así que la guardamos pinchando en Guardar para Web y Dispositivos Móviles.

Se nos abre una pantalla completa del mismo Photoshop pero en la pestaña de Optimizada.

A la derecha, puedes hacer varias modificaciones; el formato en el que quieres guardarlo, mejor JPG, la calidad (baja, media, alta…o bien en número), y la posibilidad de elegir una opción por defecto.

Pero lo más importante es el dato de abajo, si te fijas estás guardando la foto con un peso de 66.98KB y con la calidad alta adecuada para web y móviles. Eso ya es otra cosa, ¿verdad!? ¡Va a ocupar poquísimo espacio! Si te parece bien así, le das a Guardar.

Y listo, después de optimizar tus imágenes para web con Photoshop, ya solo tienes que subirla a tu post con la tranquilidad de estar poniendo una foto o imagen optimizada.

TipsparaBlogs: Por cierto, a los que tengáis el hosting con Webempresa, os recuerdo que ofrecen como servicio gratuito un optimizador de imágenes WordPress, muy útil para poner al día el blog y aseguraros de optimizar todas las imágenes que ya tenéis incluidas…Y los que no lo tengáis, aquí tenéis un motivo más para contratarlos a través de mis banners jejejej

Pues esto es todo por hoy, espero que te haya útil la información. Si es así o te ha surgido alguna duda, te agradecería que me dejaras un comentario.