Corregir fotografias desenfocadas con photoshop



Corregir fotografias desenfocadas con photoshop

¿Sabes cómo crear una galería de imágenes en WordPress?

¿Cuánto deben pesar tus imágenes para que no perjudiquen la velocidad de carga?

¿Cómo optimizarlas para que te ayuden con el SEO de tu sitio?

¿Qué plugins instalar para sacarles el máximo partido?

Si la respuesta a alguna de estas preguntas es no, sigue leyendo que lo vamos a solucionar.

Tabla de contenidos

La importancia de las imágenes en tu web

imagenes-wordpress

 

[thrive_leads id=’7463′]

Vas a comprar un tema de WordPress para tu web y todos te parecen estupendos.

“Qué bonitos, qué impactantes, qué acabados más profesionales…”

Compras uno, lo subes a tu web emocionado perdido, lo configuras, subes tus fotos y…

¿¿¿Pero qué ha pasado aquí???

¡Si este tema era una pasada y lo que me ha quedado a mi es un churro!

Pues sí, así es.

Cuando le quitas las imágenes de demo al tema y utilizas tus propias imágenes el aspecto de tu sitio puede quedar muy por debajo de lo que esperabas.

Para que tu web tenga una apariencia profesional necesitas cuidar las fotografías que publicas.

Muchos clientes no valoran este punto tanto como deberían, pero la calidad de las imágenes de tu web es uno de los factores más determinantes a la hora de conseguir una apariencia que atraiga y seduzca a tus potenciales clientes.

Buenas fotografías = aspecto estupendo, ganas de seguir en la web, sensación de calidad, buena opinión sobre el propietario de la web.

Malas fotografías = aspecto cutre, me piro de aquí, como los demás aspectos de su negocio los cuide igual…, a este tío no lo contrato.

Como le suelo decir a mis clientes:

No basta con ser bueno, también hay que parecerlo

Encuentra el equilibrio entre calidad y peso

imagenes-en-wordpressHe notado que la mayoría de la gente no sabe cómo preparar las imágenes para publicarlas en Internet.

Cuando mis clientes me pasan las fotos para su web me suelo encontrar con archivos de tamaños inmensos y/o resoluciones excesivas.

El tamaño importa.

Antes de subir imágenes a tu web tienes que tener en cuenta varias cosas.

No puedes sacar una foto de tu cámara de 15 mega píxeles y subirla directamente a tu web.

Esa imagen pesará una barbaridad y aunque WordPress hace miniaturas de todas las imágenes que subimos estarás ocupando un espacio innecesario en tu servidor.

Para la mayoría de páginas web recomiendo que las imágenes del sitio no tengan más de 800px de ancho. Una excepción a esta regla podrían ser las páginas de fotógrafos que necesitan mostrar su trabajo al mayor tamaño y con la mejor calidad posible.

Pero si tú vas a utilizar las imágenes para tu blog o para mostrar las instalaciones de tu empresa, 800px de ancho debería ser un tamaño suficiente.

Cuanto menor sea el tamaño de las imágenes, menor será su peso y menor será el impacto que tienen sobre el rendimiento de tu página.

Ten en cuenta que las imágenes son uno de los factores que más influye en la velocidad de carga de tu web, así que no descuides este punto.

Si utilizas imágenes de 800px de ancho como máximo, tal y como te he aconsejado, deberías intentar que el peso de las mismas no sea mayor a 100Kb. Esto es una aproximación, pero te servirá para saber si el tamaño de tus imágenes es excesivo.

Para optimizar el peso de tus fotografías puedes utilizar un programa de edición de imágenes o automatizar la tarea con un plugin de WordPress.

Si optas por la segunda opción te recomiendo smush.it. Este plugin optimizará todas las imágenes que ya estén en tu web, y las nuevas que subas a partir de ese momento, sin que se note una pérdida de calidad.

A la hora de controlar el peso de tus imágenes también puedes probar a guardarlas en formato jpg, png o gif. Dependiendo del tamaño y tipo de imagen la relación calidad-peso será mejor con unos formatos u otros.

Si quieres aprender más sobre cómo optimizar el peso de tus imágenes te recomiendo que te leas esta entrada.

Cómo añadir imágenes a tus entradas y páginas correctamente

Vale, ya sabes la importancia que tienen las imágenes para tu web y cómo prepararlas para publicarlas en Internet.

Ahora vamos a subirlas a una entrada de tu blog y a ver las opciones que nos da WordPress.

En el editor de textos hay un botón para añadir contenido multimedia.

anadir-imagen-wordpress

Si pulsamos en ese botón se nos abrirá la librería multimedia.

¿Qué es la librería multimedia?

Pues todas las imágenes, videos o audios que ya hayamos subido a nuestra web.

libreria-multimedia-wordpress

Solo un apunte, si has subido imágenes por ftp no aparecerán en la galería multimedia, aquí solo aparecen las imágenes que se hayan subido a través del gestor de archivos de WordPress.

Ahora tienes 2 opciones, insertar en la entrada una de esas imágenes o subir una nueva.

Para subir una nueva imagen tienes que pinchar en la pestaña de al lado “subir archivos”.

Te aparecerá algo como esto.

subir-archivos

Pulsa en el botón y elige la imagen o imágenes que quieras subir.

Cuando haya terminado de cargar verás que se ha añadido a la galería multimedia y que a la derecha aparece una columna con información de la imagen.

imagen-entrada-4

En la parte superior de la columna verás una previsualización de la imagen, el nombre de la misma, su peso y sus dimensiones, como puedes ver en el ejemplo que te pongo a continuación mis imágenes se quedan por debajo de los 800px de ancho y los 100Kb que te comentaba antes.

A continuación aparecen los siguientes campos.

imagen-entrada-5

URL: Es la ubicación de tu imagen dentro de los directorios de tu sitio. Las imágenes se guardan por defecto en la carpeta /wp-content/uploads.

Leyenda: Sirve para añadir un texto bajo la imagen, se suele utilizar para explicar el contenido de la imagen o para hacer declaraciones de copyright.

Texto alternativo (Alt text): Este punto es importante de cara al SEO de nuestra web. Lo veremos ampliado más adelante.

Descripción: aquí puedes añadir una descripción de la imagen, esta no se verá cuando publiques la foto. Es una descripción que ayudará a Google a saber de qué trata tu imagen.

Luego tenemos esto.

imagen-entrada-6

Alineación: Si quieres que la imagen quede a la izquierda del texto, a la derecha, centrada o dejarla sin alinear.

Enlazado a: Este apartado me parece importante. La mayoría de las veces utilizamos las imágenes de nuestras entradas únicamente con fines ilustrativos, no insertamos un enlace ni necesitamos que la foto se nos abra en una nueva pestaña.

Para que la imagen no contenga un enlace tienes que marcar Enlazado a: ninguno.

Si por el contrario quieres que contenga un enlace a otra página tendrás que marcar Enlazado a: URL personalizada.

Si eliges Enlazado a: Página de adjuntos el enlace te llevará a la página a la que se subió la imagen originalmente.

Si eliges Enlazado a: archivo multimedia al hacer clic sobre la imagen, esta se abrirá en una nueva pestaña de tu navegador. Esta es la opción que viene por defecto en WordPress. El comportamiento de WordPress en este sentido deja mucho que desear, por suerte hay una solución. Si lo que quieres es que la imagen se amplíe al hacer clic sobre ella sin que se abra en una nueva pestaña, puedes instalar el plugin Lightbox Plus, mejorará notablemente la usabilidad y la experiencia de usuario.

Tamaño: Si quieres que se muestre el tamaño original de la imagen o alguna de las miniaturas que ha creado WordPress.

Ahora ya puedes insertarla en la entrada.

¿Y si quieres cambiar algo después de insertarla?

No pasa nada, en el editor de textos haz clic sobre la imagen y verás que te sale algo así.

imagen-entrada-7

El aspa sirve para eliminar la foto y el lapicerito para volver a editar todo lo que hemos visto antes.

Si le das al lapicero también tendrás la posibilidad de añadir el atributo “Title” que hace que al pasar el ratón por encima de la imagen se muestre un texto como etiqueta de la imagen. Tiene importancia a nivel de usabilidad y hay quien dice que también mejora el SEO.

Por cierto, si te fijas, cuando has pinchado sobre la imagen aparecían unos selectores en las esquinas, puedes arrastrar desde estos puntos para redimensionar la foto.

Qué es la imagen destacada

Dentro de las entradas de WordPress hay otro punto que debes tener en cuenta.

La imagen destacada.

Esta imagen aparece en tus listados de entradas, es una pequeña previsualización que aparece junto al texto.

Seguro que lo has visto en un montón de blogs.

El caso es que esa imagen se elige desde la columna derecha del editor de texto, suele estar bajo los bloques de “Publicar”, “Etiquetas”, “Categorías”, etc.

Puedes elegir una imagen destacada entre las que has añadido al post o subir una nueva. El proceso es el mismo que has seguido para añadir fotos a la entrada.

Cómo crear una galería de imágenes en WordPress

Recuerdo la primera vez que intenté añadir una galería de imágenes en WordPress sin utilizar un plugin.

Casi me vuelvo loco y al final no lo conseguí.

Añadir las miniaturas es sencillo pero luego no se muestran en una Lightbox.

Una Lightbox es cuando las fotos se muestran a un tamaño más grande en el medio de la pantalla y hay unas flechitas para ir pasando de una a otra.

Puedes ver un ejemplo de lo que te digo en mi portfolio.

Para conseguir que tus imágenes se muestren así, lo más sencillo es utilizar un plugin.

Uno de los más populares es NextGen Gallery.

Te explico cómo crear y añadir galerías con él.

1. Crear una galería nueva

1.1 En el panel de control de WordPress tienes que ir a la columna de la izquierda y pinchar al final del todo en “Gallery”. Tiene un icono cuadrado verde.nextgen-gallery-wordpress

1.2 Clic en “Agregar Galería/Imágenes”.

1.3 Introduce un nombre para la galería y pincha en “Agregar archivos”.

1.4 Selecciona las imágenes a subir.

1.5 Clic en “Iniciar carga”.

Hasta aquí lo que hemos hecho ha sido crear la galería con las imágenes que queremos que muestre. Ahora vamos a añadir la galería a una página o entrada para publicarla.

2. Publicar una galería

2.1 Nos vamos a la entrada o página donde queramos publicarla.

2.2 Para insertar la galería hay que hacer clic en el último botón de la fila de arriba que hay en el editor de textos. En esa fila están las opciones para hacer negritas, itálicas, listas, comillas, las alineaciones de texto, etc. y al final de todas está el botón “Attach NextGen Gallery to post”. Clic en él.

2.3 Se desplegarán las opciones de la galería. Para la mayoría de los casos los ajustes serían:

2.4 En la primera pestaña, “Mostrar Galerías” (las demás pestañas no hay que tocarlas):

2.4.1 Seleccione tipo de pantalla: “NextGEN Basic Thumbnails”.

2.4.2 ¿Qué claves le gustaría mostrar?

2.4.3 Recursos: “Galleries”

2.5 Galleries: “aquí selecciona la galería que has creado previamente”

2.6 Personalizar la configuración de pantalla:

2.6.1 Ignorar configuración de miniaturas: “Si”. Y pones las dimensiones que mejor te cuadren para tu entrada o página.

2.6.2 Recorte de miniatura: “Si”.

2.6.3 Todas las demás opciones: “No”. Desmarca “Mostrar enlace de presentación” o la galería mostrará un enlace poco estético.

2.7 Ordenar o excluir imágenes: A tu gusto.

Guardas y listo.

Ahora, si lo que quieres es añadir imágenes a una galería que ha sido creada previamente y que ya se está mostrando en alguna página esto es lo que tienes que hacer.

3. Añadir imágenes a una galería creada previamente

3.1 Ir a la columna de la izquierda en el panel de control de WordPress y pinchar al final del todo en Gallery.

3.2 Agregar galerías/Imágenes.

3.3 Clic en “Crear una nueva Galería”, selecciona la galería que quieras modificar, y pincha en “agregar archivos”.

3.4 Selecciona las imágenes a subir.

3.5 Clic en “Iniciar carga”.

Como la galería ya la insertaste en la página correspondiente, no tienes que hacer nada más, con lo que acabas de hacer la galería ya está actualizada y está mostrando las imágenes añadidas.

Sencillo ¿no?

Si tienes dudas o necesitas ajustes extra puedes ver los videos del creador del plugin en YouTube.

Cómo hacer SEO con tus imágenes

Las imágenes también se posicionan en los buscadores. Igual que los contenidos.

La diferencia es que en los contenidos hay una lucha feroz por posicionar y en las imágenes no tanto, sobretodo porque mucha gente no las optimiza en condiciones.

A ver, preparar tus imágenes para el SEO no te va a dar miles de visitas pero todo ayuda y todo cuenta.

Para optimizar tus fotos de cara al posicionamiento de tu web te recomiendo que cojas una imagen de tu entrada y pongas tus palabras clave en:

  • El nombre de archivo de la imagen. Por ejemplo “vestidos-de-novia.jpg
  • El atributo “alt” de la imagen, WordPress lo llama “texto alternativo”.
  • El atributo “title” de la imagen, WordPress lo llama “título”.

Con eso ya estarás optimizando tus imágenes más que la mayoría de la gente.

Si te da tanta pereza como a mi añadir esos atributos puedes ayudarte de algún plugin como SEO Friendly Images. El plugin añadirá dichos atributos tomando como referencia algunos parámetros que puedes configurar.

Plugins para optimizar el uso de imágenes en WordPress

A lo largo de la entrada ya te he hablado de:

Smush.it para optimizar el peso de tus imágenes.

NextGen Gallery para crear galerías de imágenes.

SEO Friendly Images para añadir automáticamente los atributos Alt y Title.

Lightbox Plus para que tus imágenes se amplíen en vez de abrirse en una nueva ventana.

Aparte también te pueden venir bien:

Soliloquy

Uno de los mejores plugins para mostrar sliders en WordPress. Tiene muchas opciones, es responsive, fácil de utilizar, ligero, se añade mediante shortcode, puedes añadir sliders e imágenes infinitos, etc.

WP Retina 2x

Crea imágenes optimizadas de forma automática para que se muestren nítidas en los dispositivos con pantalla retina (de alta densidad de píxeles). Útil para que tu web se vea perfecta en todas las resoluciones.

My Eyes Are Up Here

Cuando WordPress crea las miniaturas de las imágenes que subimos, a veces recorta por el sitio menos oportuno. Este plugin detecta los rostros, o si lo prefieres puedes indicarle qué parte de la imagen es importante para que haga el recorte respetando esas zonas.

Easy Watermark

Un buen plugin para añadir marcas de agua a tus imágenes.

Dónde conseguir imágenes gratuitas de buena calidad

Ya estamos acabando.

Solo te queda saber de dónde te puedes descargar fotos gratuitas de buena calidad. En Internet hay cientos de opciones.

Aquí tienes un listado con 21 bancos de imágenes excelentes.

Ala.

Ahora ya sabes todo lo que necesitas para sacar el máximo rendimiento a las imágenes en tu WordPress.




Corregir fotografias desenfocadas con photoshop 100
Cached
Corregir fotografias desenfocadas con photoshop 26
10
Corregir fotografias desenfocadas con photoshop 17
16 Maneras de no arruinar las paredes con las fotos de tus hijos
Corregir fotografias desenfocadas con photoshop 9
BBC - Earth - There are diseases hidden in ice, and they are
Corregir fotografias desenfocadas con photoshop 56
Blog iris medeiros: Moldes: bichinhos decora o de
Corregir fotografias desenfocadas con photoshop 1
Corregir fotografias desenfocadas con photoshop 15
Corregir fotografias desenfocadas con photoshop 2
Corregir fotografias desenfocadas con photoshop 42
Corregir fotografias desenfocadas con photoshop 30
Corregir fotografias desenfocadas con photoshop 20
Corregir fotografias desenfocadas con photoshop 9
Corregir fotografias desenfocadas con photoshop 88
Corregir fotografias desenfocadas con photoshop 97
Corregir fotografias desenfocadas con photoshop 39
Corregir fotografias desenfocadas con photoshop 24