Ayuda para bloggers: Cómo ahorrar espacio para imágenes

Buenos días amigas!

Hace tiempo que quería publicar un post como éste pero nunca encontraba el momento y esta sección Ideas del miércoles es perfecta para ayudar a mis compañeras bloggers en algo que quizás no conozcan.

Hace algún tiempo que tengo blog, empecé en 2009 con My Things by Danae, seguí con My Place by Danae y finalmente creé {MissMrs} mucho más que una boda, este blog que me ha servido para promocionar mi trabajo y además me ha dado tantas alegrías (como por ejemplo lo que vivimos el fin de semana pasado en #TC3D).

En nuestros blogs solemos poner sobretodo imágenes y éstas suelen ocupar bastante espacio, sobretodo si son nuestras propias fotos. El pasado domingo volviendo de Valencia, Alba de A todo confetti comentó que estaba preocupada porque se le había acabado el espacio en Picasa para colgar sus fotos y no tuvo más remedio que comprar espacio extra. Blogger, Gmail, Picasa (el grupo Google) son plataformas gratuitas pero hasta cierto punto, hay un límite de espacio y hemos de aprovecharlo al máximo. Por eso quiero explicaros algunas maneras para que podáis ahorrar espacio, que he aprendido en este tiempo mientras intentaba resolver este problema que yo misma tenía. Además, después de leer este post de Elena de Srta. Limón creí que era una buena idea explicar técnicas a mis compañeras. Hoy os enseñaré unas cuantas maneras de conseguir ocupar menos espacio y además os lo enseño con algunas de las fotos que hice este fin de semana #TC3D... Para ir abriendo boca...

1. Hacer que las imágenes ocupen menos espacio.
Una foto hecha con una cámara digital puede tener un largo de aprox. 2500px y ocupar unos 2MB de espacio, si contamos en colgar unas cuantas fotos de los eventos a los que asistimos, en dos días se nos acaba el espacio que tenemos.
Por eso es imprescindible modificar el tamaño de las imágenes antes de colgarlas, en el caso de Blogger, en Picasa.
Dependiendo de la calidad con que hacemos las fotos, la resolución de las imágenes puede ser de unos 180ppp (píxeles por pulgada) para que se puedan imprimir con buena calidad, pero para pantalla y para vuestros blogs no es necesario, con 72ppp es suficiente y sólo cambiando ésto os ahorraréis un buen espacio (en mi caso la imagen original tiene 72ppp así que no lo he cambiado).
Empezamos con una imagen con estas características: (yo trabajo con Photoshop, en otros programas de edición imagino que será lo mismo)
72ppp
2592px de anchura
1728ppp de altura

Esta imagen tiene 450px de ancho

Para un blog, las imágenes suelen tener aprox. unos 600px de ancho, en realidad no necesitamos más ya que es exactamente el tamaño que veremos en la web. Por ejemplo las imágenes de este blog son de 600px si son en horizontal y 450px si son en vertical, así que siempre las cambio todas a 600px de ancho y listos (en ambos casos, siempre el lado horizontal). Si prefieres que sean más grande puedes hacerlas de 640px que es una medida estándard (aunque son imágenes muy grandes que quizás no sean compatibles con tu plantilla).
Verás que al cambiar un dato, se cambian los demás automáticamente.
72ppp
600px de anchura
400ppp de altura

Esta imagen tiene 450px de ancho

Guardar la imagen con otro nombre para seguir teniendo las originales en el ordenador "Guardar como..." y veréis la diferencia de tamaño.
En este caso, la foto original ocupaba 2MB mientras que esta que véis aquí ocupa sólo 340KB.
La veis bien, ¿verdad? Pues tiene sólo 600px de ancho.

Esta imagen tiene 600px de ancho y ocupa 340KB

Esta es la manera de modificarlas una a una pero con programas como Adobe Lightbox puedes escoger unas cuantas fotos y automáticamente te las cambia todas al tamaño que quieras, es una maravilla.

2. Instertar las imágenes con código html desde otras páginas web.
Muchas de vosotras no tendréis ni idea de código html, yo tampoco sabía nada hasta que fui descubriendo cosas yo solita, que me han sido muy útiles y por eso hoy os lo quiero enseñar a vosotras.
Cuando escribes un post en Blogger lo puedes hacer desde la pestaña "Redactar" o desde la pestaña "HTML".
- Si lo haces desde "Redactar": Importas las imágenes desde el icono por defecto. Las fotos se guardan automáticamente en una carpeta X de Picasa y no podemos escoger el tamaño exacto de la imagen.
- Si lo haces desde "HTML": Puedes insertar las imágenes desde una página externa y darle el tamaño que quieras. Hoy os explicaré cómo.

Yo utilizo el espacio "Redactar" para escribir el texto y darle características (negrita, cursiva, subrayado, links, colores...) y luego cuando llega el momento de insertar las imágenes paso al "HTML".

Espacio "Redactar"

Espacio "HTML"

¿Cómo insertar una imagen desde Picasa?
Necesitas escribir este código de inserción de imagen en el modo "HTML":

<img src="url de la imagen" width="ancho de imagen"/>

Para empezar, podemos escribir el ancho que queremos que tenga la imagen en concreto, en mi caso serían 600px para una foto horizontal y 450px para una vertical. En este caso pondremos una foto vertical.

<img src="url de la imagen" width="450"/>

Abriremos la imagen que queramos insertar desde nuestra carpeta de Picasa y clicaremos sobre "Enlace a esta foto" para que se abra el desplegable. En el desplegable "Seleccionar tamaño" escogeremos el tamaño "Grande 800" que siempre será la medida más grande (si la imagen hace 600px seguirá haciendo 600px).

Seleccionar el tamaño "Grande 800"

Después debemos seleccionar la casilla "Sólo imagen" y copiar el link que aparece resaltado, esa es la dirección directa a la imagen, en su ubicación original.

Copiar la dirección de la imagen

Donde pone "url de la imagen" es donde debemos insertar este link que hemos copiado, la dirección de la imagen, y en "ancho de imagen" el tamaño que queremos.

<img src="url de la imagen" width="ancho de imagen"/>

Quedaría así:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilAcIM0uK_dgVjvw7nKRFX8RA4o5YCZAJO50pYslYWW5tlyknjxs1wsQ8mHvhQfNM4s98ueTq7LftVNr-V2mSfIpBcOuhXvha8vzNnNEAvJBCXObfBnU5BKIBLvexNP318qpyUQg22CsA/s800/IMG_4322.jpg" width="450"/>


Recoradad que para que el código sea válido debe estar escrito desde el espacio "HTML", sino, simplemente obtendréis un texto como el que veis aquí arriba.

Esta es la imagen que hemos instertado desde Picasa con el código que véis arriba, con 450px de ancho

¿Cómo insertar una imagen desde otra página web?
Muchas veces queremos mostrar imágenes que hemos visto en otros blogs y que nos han gustado, entonces debemos guardar estas imágenes y subrilas desde Blogger... Bien eso ha sido así hasta ahora, pero hoy os quiero explicar que eso no es necesario en la mayoría de los casos. Esta es una práctica que puedes hacer solamente si tienes permiso de esta página web y siempre citando la fuente. Si se trata de una página web con hosting privado le estarás "robando" cantidad de transferencia y es preferible preguntar a la fuente antes de hacerlo. En el caso de imágenes alojadas en hostings gratuitos como Picasa, Photobucket etc no hay problema, siempre y cuando cites la fuente.


Os ha quedado claro que para instertar una imagen debemos escribir un código siempre desde el espacio "HTML" pues esto sirve tanto para insterar imágenes de Picasa como de cualquier otra página web, lo que cambia es la manera de conseguir la dirección url de la imagen en concreto.

Os lo mostraré insertando una imagen del blog de las hermanas A todo confetti, que para eso va dedicado a ellas este post de hoy... Sólo tienes que clicar con el botón derecho sobre la imagen que quieras insertar en tu blog, seleccionar en el menú desplegable la opción "Copiar la ruta de la imagen".
Nota: Hay algunas páginas web hechas en Flash u otros formatos donde no se puede copiar la dirección de imagen (para que lo sepáis, por si os pasa).

Clica sobre la imagen que quieras y en el menú elige la opción "Copiar la ruta de la imagen"

Esta será la dirección url de la imagen que debes insertar en el código tal como hemos hecho antes. También debes escoger el tamaño de ancho que queremos que tenga, en mi caso 600px porque es una imagen horizontal. En este caso la imagen original tenía 640px i al escribir 600px se ha reducido para adaptarse a las medidas que yo quiero.

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgURw6OADZAm1rv1V0N61fHEielPycLvPFi29tKjdaTyEN8fLU-Li0V-uTF-0c_nJAyv4vp7anP3AY7HTHS3JNbaHfzIbGcnLCn_ZADGFjJRQ7wjTB3gahlyUZQ8uFvlN_9nvijDrFT76cA/s640/8.jpg" width="600"/>

Esta es la imagen que hemos insertado con el código que véis arriba

3. Abrir una cuenta en otro servidor
Y si tienes tantísimas imágenes que ya no puedes hacer nada, siempre tienes la opción de abrir una cuenta en otro servidor com Photobucket o Flickr.

El código html es el mismo para todo, sólo tienes que conseguir la dirección url de la imagen que quieres insertar y listos, siempre desde el espacio "HTML".

<img src="url de la imagen" width="ancho de imagen"/>

Espero que os haya servido de ayuda, yo lo hago siempre así y aunque al principio te costará un poquito, al final lo haces con los ojos cerrados, yo me sé el código de memoria!
¿Qué os ha parecido?

---

Notas extra:
- En el caso de que queráis insertar una imagen que originalmente es más pequeña que el tamaño deseado, si la insertáis con las medidas definidas y se agranda la imagen, se verá pixelada.

<img src="url de la imagen" width="ancho de imagen"/>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPU50CKcs6G-W9iF0Khp8kb3kf8ubiV_-K8krzIUIgN5kCbtM5JUJrxupQXATi6qmxKtpolkialSxzkALkwepS0ceEMf2ZoqnIEC2p8Kml8IQ4MLBzKl8aSQbifmk4iZWaJh4vuYkbfts/s800/MM-firma.jpg" width="600"/>
 

En este caso lo mejor es dejar el tamaño original de la foto aunque no sea el mismo que en vuestra página web. Para dejar el tamaño original simplemente hay que borrar el texto donde se concreta el tamaño de la imagen (os pongo un ejemplo exagerado para que veáis lo que pasa).

<img src="url de la imagen"/>

<img src="https://lh5.googleusercontent.com/-PGISUU0uGus/T2IJAz/AAAAAAAAFI0/-icXjpO67Mc/s800/MM-firma.jpg"/>

- También podéis modificar el tamaño de la altura de la imagen en lugar de el ancho como habéis visto. En lugar de "width" escribiremos "height".

<img src="url de la imagen" height="alto de imagen"/>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilAcIM0uK_dgVjvw7nKRFX8RA4o5YCZAJO50pYslYWW5tlyknjxs1wsQ8mHvhQfNM4s98ueTq7LftVNr-V2mSfIpBcOuhXvha8vzNnNEAvJBCXObfBnU5BKIBLvexNP318qpyUQg22CsA/s800/IMG_4322.jpg" height="200"/>  

En este caso he escogido que la altura mande, y tenga 200px de alto

También podéis cambiar las dos cosas a la vez pero os aconsejo que no lo hagáis ya que si no escribís las proporciones correctas podéis hacer que la foto quede deformada, y de la otra forma siempre se calculan automáticamente:

<img src="url de la imagen" width="ancho de imagen" height="alto de imagen"/>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilAcIM0uK_dgVjvw7nKRFX8RA4o5YCZAJO50pYslYWW5tlyknjxs1wsQ8mHvhQfNM4s98ueTq7LftVNr-V2mSfIpBcOuhXvha8vzNnNEAvJBCXObfBnU5BKIBLvexNP318qpyUQg22CsA/s800/IMG_4322.jpg" width="400" height="400"/>

En este caso lo he hecho exagerado para que notéis qué pasa, he puesto la altura y el ancho de 400px y la imagen queda deformada

Síguenos en Facebook | Twitter | Bloglovin' | Pinterest