Cómo optimizar e insertar tus imágenes

En lenguaje simple, optimizar tu imagen significa reducir su peso con la menor pérdida posible de calidad. En esta entrada veremos cómo optimizarlas e insertarlas en tus entradas o en las Páginas de tu blog. El cómo colocarlas en tu barra de navegación viene en otra entrada, más adelante.

Optimizando tus imágenes

Lo primero que necesitas saber es el ancho final que debes darle a tu imagen. Y éste lo determina la plantilla que has escogido, más específicamente, el ancho máximo de su columna principal, es decir de la columna donde van tus entradas.

El ancho máximo

En las preguntas frecuentes de WordPress encontrarás una lista muy útil de los anchos máximos (en pixeles) de las columnas principales de cada plantilla.

Al ver la lista notarás las variaciones en las medidas de un tema a otro. Por esta razón, ten en cuenta que cada vez que cambies tu plantilla es muy posible que necesites reajustar los anchos de tus imágenes anteriores, no sólo de las nuevas.

Otras medidas

En este punto, entramos en el tema del diseño, sobre el cual no quisiera abundar. Mi recomendación es que mantengas una medida uniforme (o, como máximo, dos medidas) para tus imágenes, en aras de la armonía visual de tu blog.

Una de de estas medidas, para las imágenes grandes, debe ser el ancho máximo que permite tu plantilla. La otra medida, para tus imágenes pequeñas, debe ser unos 10-20 pixeles más o 10-20 pixeles menos que la mitad de este ancho máximo. En general, es preferible evitar que la medida sea justamente la mitad.

De esta manera, obtendrás espacio necesario para escribir de forma legible a un lado de tu imagen y que no te quede un espacio vacío, que casi siempre se ve muy mal. Para muestra, dos botones:

bad3.jpg

.
Este es un ejemplo de dos entradas de un mismo blog que muestran qué tan mal puede llegar a verse el uso de diferentes anchos en las imágenes y en los textos de una misma entrada.

En resumen, dale a tus imágenes grandes el ancho completo de tu columna principal; y a las pequeñas, un poco menos o un poquito más de la mitad.

Cómo ajustas las medidas y el peso de tus imágenes

Para hacerlo, vas a necesitar un programa de edición de imagen o uno que tenga la función de editar imágenes. El estándar profesional para esto es el archifamoso Photoshop y su hijito especializado en imágenes para Internet, llamado Image Ready, ambos de la casa Adobe.

Pero si no los tienes, hay otros programas que puedes descargar en forma gratuita. Por ejemplo, entre los que tienen una presentación en español, posiblemente el más sencillo de todos sea Picasa, de Google. Si quieres algo más de aventura, puedes descargar el GIMP, de estándard profesional, y que además está disponible para las plataformas Mac y Linux. Hay otros, pero –hasta donde pude ver– no están en español.

Sea cual sea tu editor de imágenes, esto es lo que necesitas hacer:

  • Asegurarte de que tu imagen tiene una resolución de 72 ppi.
  • Darle el ancho requerido (y, naturalmente, su correspondiente altura, en proporción).
  • De ser necesario, ajustar su nitidez (es decir, mejorar lo “borrosa” que te pueda quedar luego de ampliarla o reducirla), así como su luminosidad y contraste. (Esto no es estrictamente parte de la optimización, pero muchas veces es necesario hacerlo).
  • Grabar tu imagen optimizada en formato jpg.

Estos son pasos muy sencillos. Si nunca antes lo has hecho, sólo sigue las instrucciones del Tutorial o la Ayuda del propio programa, usa la tecnología de estudio y con un poco de práctica lograrás un buen resultado sin mayores dificultades.

Insertando tus imágenes

Como vimos, esta entrada trata de insertar imágenes en tus entradas o en tus Páginas, el procedimiento es el mismo.

Lo primero es “subir” tu imagen. La forma más sencilla es la siguiente: En tu panel de control, vé a la entrada o página donde vas a insertar tu imagen. Sobre los botoncitos del editor de texto hay un iconito parecido a una foto para subir imágenes, si colocas el cursor sobre él se ve más o menos así:

Haz click en el ícono que dice “Add an image” (añadir una imagen). Se abre un visor semitransparente para que selecciones en tu computadora la imagen que vas a subir. Haz clic en “Choose files to upload” (Seleccionar archivos para subir).

Selecciona en tu computadora el archivo que deseas subir. Dale unos segundos para que suba y entonces el visor se amplía hacia abajo mostrándote varias opciones:

  • Título es por defecto el mismo nombre del archivo que acabas de subir. Lo puedes cambiar si deseas.
  • Caption es el “pie de foto” que aparece en un letrerito amarillo o blanco (dependiendo de tu navegador) cuando colocas el cursor sobre la imagen. No todas las plantillas muestran este pie de foto.
  • Descripción es la descripción de la imagen para tu propio uso y archivo. (Por ahora).
  • Enlace URL es un espacio para que escribas el URL en caso que quieras enlazar tu imagen con alguna página web. Por defecto, se enlaza con la propia imagen que has subido, que aparece en una nueva página cuando haces clic en la imagen. Si no quieres enlazar nada, haz clic en el botón gris que dice “Ninguno”.
  • Alignment es para que determines la posición de tu imagen. “Ninguno” es la opción por defecto y la que necesitas si tu imagen ocupa todo el ancho de tu entrada. Si es una imagen pequeña, escoge “izquierda” o “derecha”. En general, las imágenes se ven mejor a la izquierda.
  • Tamaño se explica por sí mismo. Como se supone que has preparado tus imágenes con anterioridad, usarás normalmente “Tamaño completo”.

Para insertar la imagen en tu entrada, haz clic en “Insert into post” (Insertar en la entrada).

En tu editor de texto ahora aparece tu imagen.

¡Y ya! ¡Eso es todo!

No olvides colocar un pie de foto con el crédito correspondiente al autor/a de tu imagen.

Ahora dedícale un tiempo a explorar todas las posibilidades, a practicar, practicar, practicar, a descubrir por ti mismo/a otras funciones relacionadas y a darle por fin a tu blog la apariencia que siempre quisiste. :-)

Entradas relacionadas:
Las medidas de tus imágenes
En tu blog, un buen video vale por 1,000 imágenes
Imágenes para tu blog

Las medidas de tus imágenes

Muy a menudo, antes de publicar una imagen en tu blog, necesitas prepararla, ajustarla. Posiblemente, te preguntas ¿por qué?. La respuesta corta es: porque a menudo son o muy grandes, o muy pequeñas.

Sin embargo, si te pones perfeccionista (como mi amiga Milla) ;-) verás también que a veces son muy claras o muy oscuras, o algo borrosas; o están mal encuadradas; o tienen un encuadre diferente al que tú necesitas o deseas. A veces están movidas o desenfocadas, pero éstas no las quieres ni mucho menos las necesitas, así que sencillamente puedes desecharlas. En fin…

Sin embargo, para mantener esta entrada en el nivel adecuado, hablaremos aquí sólo del tamaño. Todo lo demás está cubierto en el tema Edición de Imagen, sobre el cual puedes investigar y aprender también, desde luego.

Cómo se miden las imágenes

Lo primero que necesitas comprender es que las imágenes físicas (fotos impresas en papel, o recortadas de una revista) funcionan de modo diferente a las imágenes digitales (las que ves en tu computadora).

Podría decirse que las imágenes físicas son bidimensionales: tienen un ancho y una altura, que generalmente se miden en pulgadas o centímetros (aquí usamos pulgadas); y que las digitales son tridimensionales: tienen una tercera medida, que es la resolución.

La resolución de tu imagen

La resolución no es más que la cantidad de pixeles por pulgada cuadrada que tiene tu imagen. Esta unidad de medida de resolución se llama en inglés “ppi” (pixels per inch) o también “dpi” (dots per inch), es decir pixeles o puntos por pulgada cuadrada, respectivamente.

Mientras más pixeles hay en cada pulgada cuadrada, más nítida es tu imagen y más detalles tiene, mientras menos, es más borrosa.

Cuánto pesa tu imagen

El peso de tu imagen se llama así porque indica la facilidad o dificultad que tiene para transportarse por la red. En realidad, mide cuánta memoria ocupa en tu computadora, sea al almacenarla, o mientras la descargas para poder verla, o mientras la envías.

La combinación de las 3 dimensiones anteriores: ancho, altura y resolución es lo que determina el peso de tu imagen. El peso se mide usualmente en “KB” o en “MB”, es decir kilo o mega bytes; esto es, mil o un millón de bytes.

Un byte es el espacio aproximado de memoria que utiliza un caracter (un número, una letra, un símbolo, etc.) Es decir que una imagen de 12 kb, “pesa” lo mismo que un documento que contiene 12,000 caracteres (unas 2,500 palabras; para darte una idea, esta entrada tiene 677 palabras).

El peso óptimo

Si vas a imprimir tu imagen en papel fotográfico o en imprenta, por regla general necesitas darle una resolución de unos 266 dpi. Sin embargo, tu monitor sólo puede “mostrarte” un máximo de 72 ppi. Esto significa que en tu pantalla, una foto de 72 ppi se verá exactamente igual que otra de 250 ppi. La única diferencia que verás es tener que esperar más de 3 veces el tiempo necesario para cargarla. Pero una de 45 ppi se verá bastante mal.

En otras palabras, al usar una resolución mayor a 72 ppi en una imagen que únicamente se verá en tu computadora, sólo le estás agregando peso, sin ningún beneficio en cuanto a nitidez. Por el contrario, si vas a usar una foto tomada de internet para imprimirla en una revista, por lo general se verá bastante pobre, ya que no tiene la resolución suficiente.

Como nota al margen, no sirve de nada “aumentar” o “disminuir” la resolución de una imagen luego de haber sido creada. Sólo puede restarle calidad. Por esta razón, al momento de tomar una foto digital, debes saber de antemano su uso posterior, para así obtener el mejor producto posible.

En una próxima entrada veremos las mecánicas de cómo ajustar el peso de tu imagen, con la menor pérdida posible de calidad. Esto, técnicamente hablando, se llama optimizar tu imagen.

Entradas relacionadas:
Cómo optimizar e insertar tus imágenes
En tu blog, un buen video vale por 1,000 imágenes
Imágenes para tu blog