7 Recomendaciones para optimizar las imagenes de una web de wordpress

7 Recomendaciones para optimizar las imagenes de una web de wordpress
optimizar-las-imagenes-de-una-web-de-wordpress

El uso y optimización de imágenes es una cuestión importantísima tanto en el diseño de una página web como en la creación de un blog y su mantenimiento diario. Cada nueva publicación de un blog requiere de una imagen destacada como mínimo, y esta necesidad se va a ver incrementada con el paso del tiempo.

Si no subes tus imágenes con la optimización adecuada estarás sobrecargando tu hosting y relentizando la velocidad de tu web, algo indispensable a tener en cuenta de cara al posicionamiento SEO y a la usabilidad de tu web.

Por eso he decidido crear este post para recordar tanto a mis alumnos como a los seguidores de Autoempleo Bloguero, los recursos básicos e imprescindibles para optimizar las imagenes de una web de WordPress que tenemos que tener en cuenta en nuestro quehacer diario.

Consejos para optimizar las imágenes de una web

1. Tamaño

Las tres dimensiones fundamentales que tenemos que tener en cuenta son:

  • Anchura total de la web, por ejemplo para los Sliders de portada.
  • Anchura de la imagen destacada para el Post.
  • Anchura de las imágenes para los widgets o la sidebar para los banners.

Pero además, si tu web es una tienda online o un portfolio, deberás tener muy en consideración también los tamaños de imagen que se usan en cada custom post de portfolio o de producto.

¿Cómo saber que tamaños de imagen usa una plantilla?

Cada Tema de wordpress tiene una anchura diferente, que debe estar especificado en las características del propio tema. Si no es así puedes adivinar los tamaños simplemente descargándote una de las imagenes de la demo y viendo sus propiedades o colocando el ratón encima, pulsando botón derecho y selecionando “inspeccionar elemento”.

Puedes tener en cuenta los siguientes Standares como referencia, porque siempre van a ser medidas muy aproximadas a estas:

  • 1000 píxeles para las imagenes que ocupen la anchura total de la plantilla.
  • 700 píxeles para las imágenes destacadas de los posts.
  • 300 píxeles para los banners de la sidebar.

2. Resolución

La resolución de internet es de 72 píxeles/pulgada. Mientras que para imprimir una imagen convencionalmente usamos una resolución de 300 ppp, en internet siempre que superemos los 72 ppp estaremos desperdiciando calidad, ya que la mayoría de los dispositivos solo leen a 72.

Se empieza a usar una nueva resolución para las pantallas Retina de 150 píxeles/pulgada, pero esto solo está en sus comienzos y es conveniente esperar un poco más adelante a cuando se haya extendido el uso de esta resolución, ya que aún se verán perfectamente las imágenes que subamos ahora con la resolución actual.

3. Peso

Cuidado con el peso; Fíjete que una fotografía hecha con un smartphone tiene un peso aproximado de 4 Mb; Para un post sería suficiente con un peso 40 veces más pequeño! Usa esta referencia: Para la Imagen destacada de un post = 100 Kb aproximadamente.

4. Formato

Para las imágenes rectangulares no transparentes, es decir, la mayoría, vamos a usar la definición de .jpg; En cuanto a los logos, que tendrán normalmente el fondo transparente para adaptarse mejor al color del fondo de la web, usaremos la definición en .png.

5. Recursos gráficos

El editor de imágenes de wordpress parece no ser totalmente efectivo, además siempre va a guardar la imagen original para recuperarla en cualquier momento, independiente del tamaño y peso que tenga. Por eso es conveniente subir la imagen previamente optimizada.

Además de nuestro Curso de Photoshop, donde te enseñamos a retocar y optimizar las imágenes de manera profesional, te ofrecemos varias aplicaciones web super útiles para optimizar tus imágenes:

  • Tinypng: Nuestro último descubrimiento para reducir el peso de las imágenes: Se trata de una plataforma donde puedes arrastrar y soltar las imágenes en masa desde tu ordenador e inmediatamente verás como le quita un gran porcentaje del peso sin perder nada de calidad! Es la bomba!
  • Image Optimicer: Reduce tamaño y peso de imágenes antes de subirlas a tu web con un clic. Selecciona un archivo de tu ordenador y escoge la calidad y anchura de la imagen optimizada; dale a optimizar y ya puedes descargala para subirla a tu wordpress!
  • Pixlr.com: Aquí tienes un Photoshop online gratuito, como lo oyes! Puedes crear imagenes usando capas, así como dibujar y diseñar con un montón de herramientas; Para crear un logo con esta herramienta, selecciona “crear una nueva imagen” y activa la opción “crear una nueva imagen transparente”, luego guárdala luego como .png y ya tienes el logo resuelto!

6. Cuestiones de cara al posicionamiento SEO

Los datos más importantes a tener en cuanta cuando vamos a “añadir objeto” multimedia en wordpress son el título y el texto alternativo (alt text) de la imagen. Son los datos clave para el posicionamiento SEO y ambos deben contener las keywords o palabras clave usadas en la página o post en cuestión pero sin abusar, porque a Google no le gusta que hagamos SEO, y un uso excesivo de las palabras clave puede perjudicarte más que ayudarte.

7. Bancos de imágenes (y cuestiones legales)

Existen básicamente dos tipos de licencia: Creative Commons (CC) y Copyright (©):

  • Las imágenes con CC son de uso libre pero siempre que mencionemos al autor en los créditos de atribución. Con estas imágenes hay que tener cuidado porque a veces tienen restricciones de uso según el nivel de CC al que se acojan. Te recomiendo leer muy bien las normas de uso especificadas en la web oficial de Creative Commons antes de utilizarlas.
  • Las imágenes con © directamente no se pueden usar.

¿Cómo y donde conseguir imágenes?

Aquí tienes dos interesantes bancos donde puedes descargar imágenes para tu web, uno gratuito y otro premium profesional:

  • Photopin es un interesante banco de imágenes gratuitas con licencia de creative commons. Puedes descargar miles de imagenes super interesantes, pero no olvides mencionar al autor junto a la imagen tal y como te indican en las condiciones. Es normal que a veces te aparececan imágenes esponsorizadas (de pago) al principio, de algo tienen que vivir!
  • Fotolia es un banco de imágenes, diseños e incluso vídeos, súper profesional y que puedes comprar por unos pocos euros. No tienes que mencionar al autor. Si te vas a dedicar a crear webs te recomiendo mirar los portfolios de autor donde podrás encontrar imágenes con una unidad de estilo, algo imprescindible a tener en cuenta en el diseño de una web. Con muy poco presupuesto puedes tener resuelto todo el aspecto gráfico de manera sorprendente!

 

Y estos son los 7 consejos o recomendaciones para optimizar las imagenes de una web de wordpress. Si tienes alguna recomendación más, déjala en los comentarios y esteré encantado de añadirla!

Hola, yo soy Juan Manuel Santaella, artista plástico, arquitecto, emprendedor, formador profesional y... creador de Autoempleo Bloguero! Más información...

8 Comentarios

  1. Natalia 1 año hace

    Muy buen post Juan Manuel. En IDA encontramos una forma de optimizar la carga de imágenes en WordPress que complementa muy bien tus consejos. Esta técnica permite ahorrar espacio en el servidor y mantenerlo organizado, revisa nuestro artículo en http://www.ida.cl/blog/desarrollo/optimizar-carga-imagenes-wordpress/.

    Saludos!

  2. Aida 1 año hace

    Hola Juanma , soy Aida del curso de WordPress . Como dices en el post las medidas de las fotos de productos de tiendas online o portafolio son diferentes , ¿existe una medida estándar para ellas? . Las fotos de los productos de la tienda online q me he descargado de la demo miden 450x 450 pero si las optimizo igual no quedan bien alguna con las que lo he intentado y si las optimizo para que queden bien en cuanto al peso…me queda cada una de un tamaño . ¿Qué estoy haciendo mal ? . Un saludo

    • Autor

      Hola Aida!, veo que ya lo solucionaste, me alegro! Si tienes cualquier otra duda por aquí me tienes! Un saludo

  3. williams maldonado 1 año hace

    hola soy williams maldonado, alguien sabe que clase de cámara debo usar su voy a tomar las fotos yo mismo para mi pagina de comercio electrónico, por supuesto quiero que las imágenes me salgan de buena calidad

    • Autor

      Hola Williams! A ver si alguno de los lectores puede hacerte alguna recomendación. Mientras tanto puedes consultarle a un amigo experto en la materia que creo que te puede dar buenas referencias: http://www.latiffoto.com/ Suerte!

  4. Luis Aguilar 1 año hace

    Hola Williams, con una cámara de un smartphone de la gama del Galaxy SII consigues muy buenas fotos. Este tiene 8 megapixeles. Yo lo uso como cámara auxiliar o cuando no quiero cargar con mi réflex. En condiciones de luz normales hace muy buenas fotos, de gran calidad. Incluso de noche cuando hay iluminación artificial. Mi consejo es que no tienes que complicarte la vida, ni caer en un gasto más si posees un móvil con una resolución de 8 megapixeles o más.

    • Autor

      Muchas gracias Luis!!! Yo también soy pro- “menos es más”; en este caso, menos recursos y más imaginación; Pero también a veces ciertas tecnologías sí que son necesarias para desarrollar algunas cosas…

Dejar una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*