Cómo usar las imágenes en WordPress

como usar las imagenes en wordpress+videos

 

Si estas creando tu web ya sea desde el editor de wordpress o mediante un plugin de maquetación, ya puedes empezar a escribir contenido creando tu primera entrada.

Pero espera, no corras porque como ya te expliqué saber cómo usar las imágenes en wordpress es muy importante.

Te cuento esto ahora porque no quiero que escojas la primera que te guste en Google y la subas a tu wordpress con las dimensiones y peso que trae por defecto, además de que esto no es una buena forma de obtener imágenes.

 

Elegir una buena imagen para tu blog ,ya sea para el diseño de tu sitio o para cada entrada que crees es fundamental, cada nuevo post que redactes tiene que estar medido al detalle: contenido, Seo, negritas, cursivas, colores, encabezamientos e imágenes forman parte de diseño del artículo y no solo tienen que tener una buena arquitectura, sino que además debe pesar poco.

Ya sea para reducir el peso de cada artículo o para ganar ancho de banda de tu hosting contratado, bajar los kilobytes de cada una de ellas es una tarea a tratar antes y durante la creación del post.

Una buena imagen captará la atención del lector y el que un usuario haga clic o no en ella depende en muchas ocasiones de lo atractiva visualmente que sea, no puedes tomarte esta labor de elección a la ligera

Además la importancia que tiene las imágenes de cara al Seo, es otro factor  a tener en cuenta ya que a veces es más fácil posicionar una imagen que el contenido.

 

videobarFormatos de imágenes para wordpress

Existen varios formatos para asignar a cada imagen, dependiendo para que sea hemos de usar uno u otro.

Te voy  a explicar para las características de los más usuales a usar en wordpress

jpeg-png-gif

Jpeg (join photographers expert group)

Se trata de un formato para fotografía.

Este formato consta de mucha calidad ya va desde 24 bits a 16 millones de colores.

Es un tipo no apto para una imagen con texto, no soporta transparencia.

En general, es una extensión muy buena para la fotografía pero no tanto para la edición ya que su compresión a través de sus ajustes conlleva pérdida de calidad.

 

• Png (portable network graphics)

Se trata de un formato para optimizar las imágenes en internet ya que sus ajustes mantienen la calidad de la imagen.

Es un formato ideal para capturas de pantalla, ilustraciones, imágenes pequeñas, imágenes con efectos como brillos y sombras, o para aquellas que requieran transparencia

No soporta imágenes muy grandes y solo es para imágenes estáticas

La reducción en archivos en png para imagende fotografías con muchos colores pueden ser más pesado que el jpeg.

Hay dos tipos siendo mejor a la hora de elegirel png24  a png8

 

• Gif (graphics interchange format)

Pueden ser animados o no.

Con un máximo de 256 colores, es un formato apto para imágenes con texto e imágenes pequeñas

Ideal para colores limitados (escala de grises por ejemplo) o logos.

Evitar este formato para fotografías

 

En resumen:

Si vas a subir imágenes realistas usa jpeg, si van a ser imágenes vectoriales, gráficos, logos, ilustraciones o fondos, usa png.

Yo uso para casi todo el diseño del blog PNG.

Para qué vas a coger imágenes de Google si tienes otras miles gratisClick To Tweet

vista-slide-showCómo usar las imágenes en wordpress

 

Como ya sabrás los derechos de autor están muy presentes hoy día y no solo copiar una imagen es ilegal, sino que a Google no le gusta.

No tiene por qué pasar nada pero denunciarte el autor de una foto si quiere puede hacerlo.

Dirás, bueno cojo una foto de Google imágenes, le doy luz , la recorto e inserto texto…, ya te digo que Google te pilla

Tienes que hacer un trabajo de chinos para que Google vea que esa imagen no está duplicada.

Si no haz la prueba y retoca una imagen , cuando acabes arrástrala a Google imagenes y verás si la detecta como única o también puedes usar el programa tineye y te dirá si es única o no.

 

 Dónde escoger las imágenes para usarlas en wordpress

 

No te estoy diciendo que no puedas usar las de google, si puedes pero no elegir la que quieras, antes  tienes que pasarla por el filtro.

Para ello una vez encuentres en Google imágenes lo que te guste haz clic en “Herramientas” y luego en “Derechos de uso”. Acto seguido elige la opción más adecuada sin problemas de derechos.

 

 Dónde escoger las imágenes para usarlas en wordpress

 

Lo que creo es que no merece la pena esta edición de imágenes ni andar buscando si esa foto que tienes en tu pc tiene derechos o no existiendo la cantidad de herramientas de imágenes libres que hay en internet

En este enlace tienes muchísimos banco de imágenes libres totalmente gratis para que no te preocupes por los derechos .

En ellos no solo encontrarás herramientas con imágenes sin derechos de autor y algunas totalmente libres de mención, además tienes opción de ver iconos, memes o los tan novedosos gifs.

Aunque cualquiera de estas herramientas te ofrece imágenes de calidad, con Flick a veces no te hace falta buscar más ya que tiene un buscador mediante el cual puedes filtrar la búsqueda y encontrar miles de imágenes libres de derechos.

Aprovecho para decirte que si no lo has hecho, te suscribas ?

Suscríbete y elige el TEMA QUE TE INTERESE para recibir consejos y trucos

Recuerda que tienes que hacer clic en el enlace que recibirás para que se active 😉


El que algunos bancos de imágenes sean gratuitos no quiere decir que  la imagen sea libre por completo, es decir antes de la descarga tienes que ver si tiene copyright, es libre de descarga o tiene licencia creative commons

Licencia creative commons son imágenes que aunque siguen siendo gratuitas te piden que hagas una mención al autor.

Esta puede hacerse al pie de la foto, al final del post o dentro del atributo alt.


 

dll-fileFlickr

Con flick difícil es que no encuentres una imagen que te guste para una entrada de tu blog.

Es una herramienta online para optimizar imágenes muy sencilla de manejar, en español y en la cual no es necesario que te registres.

Para usarla haz clic en Flickr

Una vez dentro solo tienes que insertar en el cuadro lo que quieres buscar.

Después haz clic en avanzado y elige la opción cualquier licencia.

De esta manera podrás elegir la forma legal de descargar la imagen, si no marcas esta opción saldrán todas las imágenes existiendo muchas de ellas con copyright.

Para el ejemplo he elegido sin restricciones de derechos de autor conocidas.

 

flickr imágenes

 

Cuando elijas la foto que te guste haz clic en ella y elige ver todos lo tamaños.

tamanos

 

Una vez elegido el tamaño que te guste haz clic en descargar y lo hará en jpeg.

 

flickr imágenes

 

Esta imagen una vez descargada podrás usarla libremente.

Es importante que te asegures y elijas la opción de licencia adecuada para tener la absoluta tranquilidad de que la imagen descargada no genere ningún tipo de problemas.

No tiene porque pasar nada por escoger una foto de autor sobre todo cuando no vas a hacer uso comercial de ella, no obstante lo mejor es usar el filtro.

 


Mediante otro programa que explicaré más abajo podremos pasar esta imagen a otros formatos


drawingHerramientas para el diseño de imágenes para wordpress

Si lo que quieres es diseñar tus propias imágenes puedes optar por retocar e insertar texto en las imágenes descargadas a través de los bancos de imágenes que acabo de recomendarte.

Para ello puedes ver todos los programas de diseño gráfico que yo utilizo y que son totalmente gratuitos.

En ellos no solo encontrarás programas de edición sino también para comprimir imágenes, programas de creación de logos, infografías o mockup.

Programas de infografías como picktochart te permite también crear poster mediante los cuales ajustando la medida puedes crear tus propias imágenes personalizadas.

Para editar fotos yo utilizo sobre todo el programa Pixrl

dll-filePixlr

Con Pixlr puedes subir retocar, rotar, insertar texto y mil funciones más para optimizar imágenes para web.

Consta de dos programas online:

  • Pixlr Express: Es simple, lo uso básicamente para recortar una imagen, insertar texto y cambiar el formato.También tienes la opción de descargar el programa para usarlo sin conexión. Tendrás que registrarte.

Yo recomiendo que descargues el programa ya que es más sencillo a la hora de usar y ganas en rapidez. Además evitas la publicidad.

  • Pixlr Editor: Programa de edición con muchas más opcciones

Para acceder a esta herramienta haz clic en Pixlr

 

pixlr para wordpress

 

Si pinchas en las flechas se despliegan los dos programas de los que te estoy hablando.

 

pixlr

 

Haciendo clic en launch web app podrás acceder a cualquiera de ellos.

En el video de abajo te explico todo el proceso de ajustes y reducción de una imagen para poder subirla posteriormente a tu blog e insertarla en cualquier entrada o localización dentro de tu web.

 

edit-cutPor qué hay que reducir las imágenes en wordpress

No termina aquí la tarea a desempeñar con las imágenes, una vez descargadas hay que reducirlas al máximo pero sin perder calidad.

Calidad se pierde es cierto pero en algunas ocasiones es inapreciable y en otras un pequeña perdida de calidad sin importancia es positivo para la velocidad de la página web.

Cuando ya tienes imágenes y quieres comprobar si pesan demasiado puedes usar programas de medición de velocidad como son Gtmetrix.

Por ejemplo imagina que tienes una web en la cual en su momento no redujiste las fotos que tenias, como no vas a ir una a una lo mejor es usar plugins wordpress como Wp smush it, o ewww image optimizer.

Un buen hosting tratará las imágenes para que pesen menosClick To Tweet

 

Un buen hosting es vital para que el tamaño de imágenes para wordpress pesen menos.

Webempresa por ejemplo aunque tu ya subas las imágenes reducidas como te estoy contando, ellos además cuentan con un servicio gratuito adicional en las que reducen el peso de las fotos de tu web automáticamente.

Este servicio disponible cada 15 dias consiste simplemente en abrir un ticket y en cuestión de minutos te envían a tu email un informe para que puedas verificar mediante un test de velocidad que ya está el trabajo hecho.

Si quieres saber porque sigo considerando que webempresa es mejor que otros, lee el artículo cómo elegir el mejor hosting para wordpress.

 

control-panel-2Cómo reducir las imágenes para wordpress

Lo primero que tienes que tener en cuenta es que no es recomendable subir imágenes con más pixeles que el ancho de tu web a no ser que puntualmente quieras una foto a una calidad extrema.

Lo bueno que tiene es que esto WordPress lo hace automáticamente con lo cual ahorras trabajo; lo malo es que la redimensión no es del todo buena, provocando algunas imágenes un tanto borrosas con lo cual lo recomendable es reducirlas manualmente antes de subirlas

Para reducir imágenes yo uso Riot

 

dll-fileRiot

Riot es un programa de compresión y redimensión de imágenes de fácil manejo. Este puede llegar a  reducir el peso hasta un 90 % en fotos de poco color y un 70% aproximadamente las que tienen más colorido.

Si quieres usarlo debes descargarlo a tu pc.

Para ello haz clic en Riot para descargarlo.

riot para wordpress

 

Ahora te enseño como funciona en el video

 

vista-camera-2Video: Proceso de reducción de una imagen para wordpress

 

 

add-tabOtros aspectos a tener en cuanta al tratar las imágenes

Además las imágenes una vez subida hay que etiquetarlas asignándoles una etiqueta ALT, un título y opcionalmente una leyenda y una descripción de la foto pero esto ya lo veremos cuando hablemos de Seo.

Si es importante y que debes tener en cuenta que una imagen una vez subida a wordpress tiene que tener asignado un tamaño adecuado, es decir de nada sirve que subas una imagen de por ejemplo 920×550 si luego vas a redimensionar imágenes usando las esquinas de la imagen.

Si haces esto aunque la quedes pequeña wordpress tomará la imagen del tamaño a la cual la subiste.

La manera de tratar imágenes desde wordpress gallery o subir archivos es muy sencilla y la puedes ver en el articulo Opciones básicas de wordress.

 

booksConclusión

El proceso de elección y compresión de imágenes es muy necesario para la carga de la página, el intentar reducirlas al máximo ha de ser un tarea para cada post que vayas a publicar en tu log.

A la hora de usar las imágenes en wordpress tenemos que considerar muchos aspectos, la calidad es importante pero hay que hacer todo o posible para que sea inapreciable para el ojo humano ganando en ligereza.

Los pequeños detalles hacen que la velocidad de carga de página web sea mejor y las imágenes son un punto determinante.

Y tu ¿Qué programas utilizas, conoces otros que sean más rápidos y reduzcan más? Cuenta cuenta…

¿No conoces nada sobre Marketing Digital?

 Llévate el Minicurso Gratuito: Iniciación rápida al Marketing Digital

An error occurred. Please try again and make sure all form fields are filled out.
GRACIAS POR SUSCRIBIRTE. EN BREVE RECIBIRÁS EL MINICURSO ¡BIENVENIDO!
Cómo usar las imágenes en WordPress
5 (100%) 2 votes

José M. Peña

Diseñador web especializado en WordPress y consultor SEO. Trabajo como freenlance realizando sitios web para clientes que desean hacer crecer su negocio a través de internet. Además, enseño en mi Blog cómo crear un proyecto web absolutamente de cero. Me puedes encontrar en las redes sociales.

More Posts - Website

Follow Me:
TwitterFacebookLinkedInGoogle PlusYouTube

2 comentarios en “Cómo usar las imágenes en WordPress

Deja un comentario

170 Shares
Share120
Tweet26
+12
Share22
Email