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.
Hola
Muchas gracias al autor de este blog. Eso es lo que busco.
Buen trabajo.
Los mejores deseos
James
Como autora de este blog, te doy las gracias por tus palabras y me alegro haberte servido de ayuda :).
Hola Carolina,
Muy bueno el contenido. Dejaste muy claro el tema, describiendo a la perfección lo que siempre hago con las imágenes antes de subirlas a mi blog. 😀
Solo apuntar que además de hacer esto, elijo el formato en función de del tipo de imagen. Por ejemplo JPG va excelente en fotografías, mientras que PNG en ilustraciónes. No siempre JPG es lo mejor.
Un saludo. 👋
Hola Luis Alberto, tienes toda la razón. Intentaré editar o haré otro post con esa información.
Muchas gracias por tu comentario.
Ayyyy hija q apañá q eres jejeje yo nunca me había planteado lo del tamaño de las fotos. Feliz día! Muack! !
Esto me va a venir genial,yo siempre lo hago con Pic Monkey,pero Photoshop las reduce mas,así que probaré jeje
Besos
Si, Photoshop es más específico y se pueden manipular más valores. Me alegro de que te sirva.
Besossssss
Me estoy poniendo las pilas con esto del blog así que estos post me vienen que ni pintado ^_^. Ya sabemos que el saber, no ocupa lugar, jiji
Un abrazo 🙂
Ah pues muy bien, me alegro muchísimo serte un poquito útil.
Besos
Chica eres toda una profesional 😉
Yo lo hago desde lightroom, tengo el tamaño de las fotos configurado para exportarlas en tamaño blog, pixeles y megas, así todas las fotos van siempre igual 😉
Jajajanaj profesional? Soy como el maestro liendre, que de to sabe y de na entiende jejeje. Ah pues muy bien, mira como te apañas!
Hola, te he dejado un premio bloguero en la entrada de hoy. Puedes pasar a recogerlo si te apetece.
Un beso.
https://eldiariodesensi.wordpress.com/2015/09/28/recogida-de-premios/
Muchas gracias, recogido jejeje
Madre mía me has dejado flipada con la explicación, me parece tan complicado!!. Echaba de menos tus tecnomamablogger porque aprendo muchísimo.
Yo tuve una vez un problema con las fotos porque no sabía nada de este tema y ya no me dejaba subir más. Menos mal que pude utilizar la optimización de web empresa.
Un besote
Te ha parecido complicado? Si tienes alguna duda me dices…La verdad es que los de webempresa tenemos suerte con estos servicios que ofrecen. Pero si las optimizamos nosotras es mejor.
Uff más trabajo aún! Yo las edito para que se vean lindas pero no había pensado en lo del tamaño.. Muy buen post! Empezaré a mirarlo desde ya, jeje?
Pues tenlo en cuenta, las fotos sin más, sin optimizarlas son muy pesadas para el blog! Me alegra que te sea útil.
Hola!!!!! Pues yo soy un desastre, busco la foto que me interesa y la pongo, sin más, sin editar ni nada. Ya sabes que el último viernes de mes hago un resumen de las cosas chulas que me han pasado, pongo unas 15 fotos y nunca las edito ni les hago nada, y el resto de los post con fotos tampoco, ainnnns.
La verdad es que no tengo photoshop pero desde ya me lo estoy planteando. Un besito y soy fan de esta sección.
Pues yo no sé en blogger pero en wp ya hubieras petado el hosting jejejejej por cierto a ver si vas pensando en cambiar! 😉
Me alegro que te sea útil esta sección.
Besos