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

Anuncios

4 pensamientos en “Cómo optimizar e insertar tus imágenes

  1. Hola José Ramón, bienvenido a mi blog. Veo que acabas de nacer, es decir tu blog, ¡Felicidades! Lo que quieres hacer es muy fácil. Asumo, por el [buen] aspecto y el tema de tu blog que manejas HTML. Siendo así, en esta entrada del blog de Fernando y Guille, encuentras las instrucciones. Si hay algo más en lo que te pueda ayudar, déjame saber.

    :-)

  2. Hola, Quisiera insertar una imagen y no puedo . cuando le doy click al boton insertar imagen no me aparece nada y resulta que me aparece el siguiente error en la página de entrada:
    Detalles de error de página web

    Agente de usuario: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB7.2; InfoPath.2; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; OfficeLiveConnector.1.4; OfficeLivePatch.1.3; yie8)
    Fecha: Thu, 15 Dec 2011 00:41:46 UTC

    Mensaje: Object doesn’t support this property or method
    Línea: 155
    Carácter: 10447
    Código: 0
    URI: http://nextassistant.com.ar/blogdos/wp-admin/load-scripts.php?c=0&load=hoverIntent,common,jquery-color,schedule,wp-ajax-response,autosave,wp-lists,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-resizable,jquery-query,admin-comments,suggest,jquery-ui-sortable,postbox,post,thickbox,media-upload&ver=2b90289b41abe121b9400cf60c21cac7

    Mensaje: Object doesn’t support this property or method
    Línea: 41
    Carácter: 4043
    Código: 0
    URI: http://nextassistant.com.ar/blogdos/wp-admin/load-scripts.php?c=0&load=hoverIntent,common,jquery-color,schedule,wp-ajax-response,autosave,wp-lists,jquery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-resizable,jquery-query,admin-comments,suggest,jquery-ui-sortable,postbox,post,thickbox,media-upload&ver=2b90289b41abe121b9400cf60c21cac7

    Perdón lo extenso del mensaje pero estoy perdida. Podrías ayudarme? No logro saber que pasa.
    Muchas gracias!!! Hermosa la nieve cayendo!!..
    Analia

  3. Hola, lamento mucho la tardanza en responder. Karen, la autora del blog está de vacaciones y me ha pedido que la ayude con sus comentarios pendientes. No puedo hacer nada sin la dirección de tu blog. Por favor dámela si es que persiste el problema, aunque supongo que ya no. En esa fecha parece que hubo un desperfecto en WordPress que ya se ha resuelto, de lo contrario, déjame saber.

¿Qué opinas tú?

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s