Mejora la velocidad de tu Blog I - Optimizando las imágenes

Muchos usuarios se preocupan lógicamente por el rendimiento que su Blog ofrece de cara a sus usuarios. Saben que la decisión de pasar de una web a buscar en otra puede durar unos escasos dos segundos, que no hay nada más impaciente ante un navegador que un usuario deseando acceder a los contenidos de una página.

El posicionamiento de las páginas en los buscadores está en gran medida condicionado por el rendimiento que una web puede dar frente a las otras. Cualquier buscador basará la posición en múltiples parámetros que quizás no estén totalmente en nuestra mano tanto como el de mejorar el rendimiento.

Dado que el interés que suscita esta materia es importante y que prácticamente el soporte que se encuentra en Internet es "duro" de seguir, me propongo hacer varias entregas donde explicarte cómo puedes mejorar la velocidad de carga de tu Blog, para que tus clientes disfruten de una navegación de calidad y tú dispongas de un posicionamiento mejor.

LA IMPORTANCIA DE LA PÁGINA PRINCIPAL DE NUESTRO BLOG

Todos los puntos que en la gestión de imágenes te voy a indicar deben utilizarse especialmente en aquellas que aparecerán en los resúmenes de las entradas de la página principal de tu blog.

Nos centramos sobre todo en la parte principal del Blog por tratarse de la "fachada" exterior que da entrada a todos nuestros contenidos. Cuanto más depurada esté, más rápido se cargará nuestro Blog en sus máquinas. 

No obstante, lo mismo que lo aplicas a la página principal con el resumen de las entradas, deberías procurar igualmente emplear estos conceptos en el interior de las entradas. 

LOS TRES FACTORES A TENER CUENTA AL TRABAJAR CON IMÁGENES EN NUESTRO BLOG

• La cantidad de imágenes a mostrar en la página principal del blog, la que muestra todas nuestras entradas iniciales, deben ser las estrictamente necesarias. Los resúmenes de entrada no deberían de tener más de una imagen, de manera que dejemos más ancho de banda disponible para direccionar otros objetos que componen nuestro blog en el navegador de nuestros usuarios.

• El "peso" en Kilo Bytes  de las imágenes de la página principal del Blog debe ser lo más reducido posible. Cuando insertéis imágenes en la entrada que correspondan al apartado de resumen, debéis intentar utilizar el tamaño "pequeño" de las opciones de inserción que se os presentan en Blogger. Luego las del contenido de la entrada podéis hacerlas más grandes pero como mínimo aquellas que se mostrarán en la página principal deben ser reducidas. 

• La extensión de la imagen es fundamental para que esta se encuentre comprimida todo lo posible. No utilicéis .bmp jamás pues su compresión es bajísima y consumiréis ancho de banda innecesariamente. Siempre tratad de que las imágenes que se muestren en la página principal tengan extensión .jpeg y dentro de las entradas, si queréis más nivel de detalle utilizad .png.

Te explico a continuación cómo poder editar imágenes sin herramientas externas instaladas en tu ordenador para que puedas mejorarlas para poner en tu Blog. La Edición de imágenes con Google+ sin programas externos:

Procura buscar imágenes que no contengan resoluciones excesivas, imágenes con tamaños elevados y sin comprimir. Podéis utilizar para cambiar su tamaño cualquier editor de imágenes como Photoshop, Image Resizer o incluso el editor de Google. Podéis utilizar un álbum en Google Plus para colocar las fotos que utilizaréis en vuestro Blog y poder editarlas.

¿QUÉ VAMOS A HACER?

Cuando subiste la imagen a Blogger esta seguramente era más grande que los tamaños que has comprobado que realmente se les ha asignado para dibujarse en la página principal, dentro del resumen de tu entrada. Ahora debes retocar esa imagen para que mida justamente el tamaño que Blogger le ha asignado para dibujarse en el navegador. Así conseguirás ganar en velocidad porque:

• El navegador de tu usuario no tendrá que reescalar a menor tamaño o a mayor tamaño la imagen que has subido a Blogger para "dibujársela" después a tus usuarios. Es decir, si la imagen mide directamente un valor fijo, que no necesita reescalado, se dibujará más rápido al evitarse el reescalado.
• La descarga de la imagen será más rápida porque ocupará sólo el tamaño que debe ocupar, ni más ni menos. Es decir, el navegador de tu usuario tardará menos en descargarla porque es más pequeña.

1) DESCUBRE EL TAMAÑO DE LA IMAGEN QUE UTILIZAS EN EL RESUMEN DE TUS ENTRADAS:

El "peso" de la imagen va muy relacionado con su "tamaño" o resolución. Cuantos más píxeles componen una imagen, más compleja es y más espacio ocupa. Voy a explicarte cómo descubrir el tamaño de una imagen ya insertada en tu Blog, dado que son las que vas a corregir. En un futuro, incluso antes de subirlas, podrás ya darles el tamaño adecuado.

Paso a Paso, viendo el tamaño real de la imagen en el Blog 

Vamos a ver dos formas de poder medir el tamaño, una muy sencilla y otra más compleja pero avanzada. Una alternativa por medición en el Blog utilizando las herramientas para desarrollo de Explorer o Chrome en cualquier punto del Blog y otra para medirlo directamente en en una imagen del Blog con Explorer.

A) Alternativa por  medición sobre el Blog en una imagen concreta (la más sencilla):

 - Haz "clic" derecho sobre la imagen que desees medir y a continuación del menú contextual que Explorer te muestra, selecciona propiedades. Te saldrá una pequeña ventana con el detalle de la imagen sobre la que te has puesto, en Dimensiones te vendrá el ancho y alto que deberías utilizar después al editarla para que no sea necesario que el navegador la reescale.

Clic derecho sobre la imagen, pulsamos propiedades y miramos Dimesiones en la ventana de información.

B) Alternativa por medición sobre el Blog de manera libre, sobre cualquier parte del Blog (más compleja pero más avanzada): 

- En primer lugar debemos conocer el tamaño del "marco" donde va la imagen. Es importante este paso porque dependiendo de lo que mida en píxeles (cada "cuadrito" que compone la imagen) la imagen, en pasos posteriores deberemos editarla para adptarla de manera que quede "encajada" en el cuadro.

Si quieres sigue el ejemplo que te hago con mi Blog para que te sea más sencillo. Está basado en el tutorial que hicimos para poner una imagen de fondo al título. 

Para realizar la "medición" en píxeles del ancho y alto del "marco" de la imagen, abrid vuestro blog en Internet Explorer o Chorme (en Mozilla lo que voy a explicar requiere tener instalado "Firebug"). Una vez se muestre la pantalla principal pulsad F12 y se os abrirá el editor de desarrollo que Explorer o Chrome incorporan de serie:

- En Explorer en el menú superior pulsa la opción "Buscar" y después "seleccionar elemento con un clic". Si es con Chorme pulsad el icono con forma de "lupa" que se encuentra en la parte inferior izquierda bajo el bloque de código que se ve de la página.

- Acto seguido dirigid el cursor del ratón a la zona de título y procurad seleccionar el "marco" completo que engloba la imagen, observaréis que está en "<div id="header-inner". Apuntaros los valores que veis en "Height" (alto) y "Width" (ancho) que determinarán el tamaño final que tendrá que tener la imagen que pondremos de fondo del título.

Se aprecia en el código los textos width (ancho) y height (alto) del marco seleccionado de nuestro blog.

En mi caso, el tamaño del marco (del <div id="header-inner") es de 920 de ancho por 157 de largo. 

Esto mismo se puede aplicar a las imágenes de resumen de las entradas, poneros encima de ellas con la lupa seleccionada y veréis el tamaño que tienen asignado.

En Chrome, podrás directamente hacer "clic" derecho sobre la imagen en cuestión y seleccionar "inspeccionar elemento"

Ponte sobre la imagen, haz "clic" derecho y selecciona "inspeccionar elemento"

Esto te abrirá las herramientas de desarrollador igualmente pero ya centrado sobre la imagen que quieres medir.

DANDO EL TAMAÑO ADECUADO A NUESTRAS IMÁGENES CON GOOGLE+

1) EN TU ESCRITORIO GOOGLE+ FÍJATE EN LOS ICONOS A MODO DE MENÚ QUE TE APARECEN A LA IZQUIERDA: "INICIO", "PERFIL", "EXPLORA" Y "FOTOS". SI PASAS EL RATÓN POR ENCIMA DE "FOTOS" SIN HACER CLIC TE SALDRÁ LA OPCIÓN DE "AÑADIR FOTOS".

2) TE SALDRÁ UNA PANTALLA DONDE PUEDES PONER EL "NOMBRE DEL ÁLBUM" Y A CONTINUACIÓN HACER "CLIC" EN EL BOTÓN "SELECCIONAR FOTOS DE TU ORDENADOR", DONDE AL PULSARLA, PODRÁS SUBIR LA IMAGEN QUE VAS A UTILIZAR PARA TU TÍTULO DEL LUGAR DEL DISCO DURO DONDE LA TENGAS ALMACENADA PARA COLOCAR EN EL BLOG.

3) UNA VEZ HA SUBIDO LA IMAGEN, LA VERÁS EN UNA VENTANA "PEQUEÑA" A MODO PREVIEW, SI PASAS POR ENCIMA DE LA PREVISUALIZACIÓN, SE TE DIBUJARÁN UNOS PEQUEÑOS ICONOS DENTRO DE LA MISMA DONDE EL QUE TIENE FORMA DE LÁPIZ TE ABRIRÁ EL EDITOR DE IMÁGENES.

 4) ANTIGUAMENTE [PIKNIC] HTTP://WWW.PICNIK.COM/ ERA UNA POTENTE WEB ESPECIALIZADA EN LA EDICIÓN DE IMÁGENES QUE FINALMENTE ADQUIRIÓ GOOGLE. EL EDITOR QUE SE TE ABRE TRAS REALIZAR EL PASO 3 ES PIKNIC. DESDE AQUÍ VAMOS A CONFIGURAR LA IMAGEN PARA QUE ADQUIERA LOS VALORES DE ALTURA Y ANCHURA DESEEMOS, DE MANERA QUE NO TENGA UNA RESOLUCIÓN EXCESIVA Y POR TANTO SU PESO EN KILO BYTES SE REDUZCA DRÁSTICAMENTE.

 TENEMOS DOS OPCIONES:

• RECORTAR: PUEDES EXTRAER DE LA IMAGEN LA PORCIÓN QUE TE INTERESE PARA PONER EN TU BLOG. 

ESTAMOS RECORTANDO EL TROZO QUE QUEREMOS. PONEMOS EL TAMAÑO DEL PUNTO DESEADO DE LA IMAGEN PARA MOSTRAR EN EL BLOG.

• CAMBIAR TAMAÑO: REDUCIR DIRECTAMENTE EL TAMAÑO DE LA IMAGEN QUE DESEAMOS UTILIZAR DE FONDO DEL MARCO DEL TÍTULO. EL PROBLEMA AQUÍ ES SER CAPACES DE CONSEGUIR RESPETAR LA RELACIÓN DE ASPECTO DE LA IMAGEN DE ORIGEN PARA QUE NO QUEDE "ESTIRADA" O "DEFORMADA" CUANDO LA SITUEMOS EN EL BLOG

ESTAMOS PONIENDO QUE EL TAMAÑO DE LARGO SEA 920 DE ANCHO POR 517 DE ALTO. LA IMAGEN ORIGINAL ERA DE 1920X1080, LA REDUCCIÓN DE RESOLUCIÓN NOS PERMITE AHORRAR EN EL TAMAÑO QUE OCUPARÁ CUANDO SE DESCARGUE EN EL NAVEGADOR DEL USUARIO.

5) SI DESPUÉS DE HABER ALMACENADO LA IMAGEN EN GOOGLE+ DESEAS UTILIZAR LA IMAGEN EDITADA EN TU BLOG, CUANDO UTILICES EL ICONO DE "INSERTAR IMAGEN", EN LUGAR DE HACER "CLIC" SOBRE LA OPCIÓN "SUBIR" O "DESDE ESTE BLOG", SELECCIONA LA OPCIÓN "DESDE ÁLBUMES WEB DE PICASSA" DONDE SE ENCONTRARÁ LA IMAGEN EDITADA.

¡TODO LISTO! , POCO A POCO Y CON PACIENCIA PONDRÁS LAS IMÁGENES DE TU BLOG A PUNTO. NO HAGAS TODAS EL MISMO DÍA, CÉNTRATE INICIALMENTE EN LAS PRIMERAS DE TU PÁGINA PRINCIPAL Y SIN PRISAS LAS OPTIMIZAS, VERÁS COMO LA CARGA ES MÁS RÁPIDA. ESTO APLICA A TODO LO QUE SEAN IMÁGENES: "ICONOS", IMÁGENES DE BARRAS, DE FONDO, ETC...