fbpx

¬ŅQUIERES QUE TE ENVIEMOS UNA V√ćDEO CONSULTOR√ćA GRATUITA DE LA WEB DE TU NEGOCIO? ¬°P√ćDELA SIN COMPROMISO!

Tratamiento de imágenes para tu página web: Guía completa

guia tratamiento imagenes digitales

Si est√°s comenzando con tu p√°gina web o ecommerce, ya te habr√°s dado cuenta de la ingente cantidad de im√°genes que necesitas. ¬ŅY de d√≥nde las saco? ¬ŅEs legal? ¬ŅSon las m√°s adecuadas para mi p√°gina? ¬ŅCumplen la RGPD?

No te preocupes, todas estas cuestiones son plenamente normales y las hemos tenido todos en alg√ļn momento u otro.

En esta breve gu√≠a te vamos a contar todo lo relativo al tratamiento de im√°genes digitales. Toma nota ‚úŹÔłŹ

¬ŅQu√© es el tratamiento de im√°genes?

Como su propio nombre indica, y como si de una parte del cuerpo se tratase, el tratamiento de imágenes es el conjunto de técnicas que se pueden aplicar a una imagen para obtener un fin  concreto. Por ejemplo:  mayor calidad en la misma, efectos de imagen que la distorsionen o incluso un realismo más acentuado.

Sin entrar en hechos históricos, estamos hablando de una práctica muy extendida entre el gremio de la fotografía y que ya se puede apreciar en las primeras impresiones manuales de fotografías. Así que, no estamos descubriendo nada nuevo.

Mejores programas de procesamiento de im√°genes digitales

Hemos querido incluir en este post un peque√Īo r√°nking¬† con nuestro top 3 de programas para edici√≥n y tratamiento de fotograf√≠as online favoritos. Creemos que re√ļnen tienen particularidades diversas que se adaptar√°n mejor a un perfil de usuario u otro.

1. ADOBE PHOTOSHOP:

Mejor programa tratamiento imagenes

Este software de tratamiento de im√°genes necesita poca introducci√≥n. Mundialmente conocido como “el programa” para editar fotos. Cuenta con una variedad de posibilidades y funcionalidades pr√°cticamente ilimitada ‚úĒÔłŹ. Lo cual puede ser, a su vez, su principal h√°ndicap. En la red existen miles de tutoriales para dominarlo, pero quiz√°s no sea el m√°s apropiado para todos los usuarios. Puesto que, por un lado, tiene una curva de aprendizaje relativamente lenta y por otro, es menos intuitivo que otros programas ‚ĚĆ. Por lo que, si requieres de peque√Īas modificaciones, quiz√°s te haga perder demasiado tiempo.

2.GIMP

Programa para tratar im√°genes digitales

 

 

 

Quiz√°s sea menos conocido que el primero, pero no por ello cuenta con caracter√≠sticas menos interesantes. Para nada.¬† Con este software podr√°s tratar cualquier tipo de imagen digital.¬† Adem√°s de las diversas funcionalidades, tiene algunas ventajas con respecto a Photoshop que pueden hacerte valorar instalarlo en tu ordenador. Por un lado, es un software Open Source, o lo que es lo mismo, 100% gratuito ‚úĒÔłŹ. Por otro, incorpora numerosas opciones de compatibilidad con plugins externos, que puedes incluir en tu wordpress. Aumentando tu productividad a la hora de trabajar con im√°genes digitales.

3. PIXLR X y PIXLR E

Tratamiento im√°genes digitales

En realidad, estamos hablando de dos programas distintos realizados por un mismo fabricante.¬† La versi√≥n X orientada a un p√ļblico menos experimentado, con una interfaz m√°s intuitiva y menos funcionalidades. En contraposici√≥n a la versi√≥n E, que es la apuesta de la marca por un s√ļper-editor de im√°genes. Precisamente, en la versatilidad de ambas y en su facilidad de uso encontramos su principal ventaja ‚úĒÔłŹ. Adem√°s, incluye una versi√≥n online, muy √ļtil para nuestro siguiente consejo.

4. CANVA

Canva es de los editores de im√°genes preferidos por los dise√Īadores novatos. Adem√°s de ser un magn√≠fico programa para dise√Īar, es un¬†banco de im√°genes gratuitas, as√≠ que si necesitas una imagen para tu blog o tu p√°gina web, tambi√©n puedes utilizar Canva.

Quiz√°s su principal desventaja es que no se ha desarrollado a√ļn una app para los smartphone, pero s√≠ podr√°s trabajar con Canva mediante el Ipad. Reg√≠strate con tu usuario de Facebook¬†y comencemos a trabajar.

Lo primero que tienes que hacer es escoger el tama√Īo de la imagen con la que vas a trabajar porque despu√©s no podr√°s cambiarla. Usa im√°genes propias que subas desde tu ordenador o las que ya te ofrece el propio programa.

En la web encontrar√°s dos pesta√Īas llamadas¬†Editor Picks¬†y¬†Designs Picks. Estas dos opciones te ¬†ayudar√°n con tutoriales, con consejos para seguir, gu√≠as que a todos nos vienen muy bien cuando comenzamos a dise√Īar o editar im√°genes.

5. PLACEIT.NET

editores gr√°ficos para web

¬ŅSabes hacer un fotomontaje? No, no pienses en Photoshop. Para hacer fotomontajes te traemos Placeit.net, la herramienta que te ayudar√° a parecer un gran profesional del dise√Īo. Como casi todos los editores de im√°genes, cuenta con plantillas para que puedas llevar gu√≠as sobre el dise√Īo que quieras realizar.

Podr√°s subir im√°genes desde tu ordenador o introduciendo la URL de la p√°gina. Y ahora lo mejor: cuando haya completado un montaje digno del Festival de San Sebastian,¬†desc√°rgatelo de manera gratuita¬†a baja resoluci√≥n. O ya que est√°s, estira un poco tu bolsillo y desde 8$ podr√°s tenerlo en tus archivos a una resoluci√≥n alta. ¬ŅLo has probado ya?

6. PIKTOCHART

optimizar imagenes para wordpress

¬ŅCu√°ntas veces te has encontrado con un inconveniente llamado infograf√≠a? A veces en las redes sociales, o en dossiers encuentras dise√Īos que a priori parecen complicados. ¬ŅC√≥mo lo hacen? Su secreto es Piktochart y es f√°cil de usar.

Con unas cuatrocientas plantillas de gráficos y de iconos, podrás ilustrar de forma muy visual cualquier estadística que tengas a tu alcance.

Sus plantillas predefinidas pueden hacer de gu√≠a en tu trabajo si nunca te has propuesto dise√Īar. Adem√°s, dentro de¬†Gallery, una de las secciones de Piktochart, podr√°s encontrar las m√°s usadas por otros usuarios. Yo que t√ļ empezar√≠a hoy mismo a practicar para tener los dise√Īos de infograf√≠as m√°s impactantes de todos.

7.BEFUNKY

optimizar imagenes para seo

El mism√≠simo Instragram siente envidia del quinto en la lista de editores de im√°genes. ¬ŅSabes cu√°ntos filtros puedes utilizar?

Wharholizer, ¬†Si conoces a Andy Warhol ya sab√©s c√≥mo quedar√°n tus fotos. ¬†Cartoonizer, para poner tus im√°genes como aquellos dibujos animados de anta√Īo. Ay, qu√© recuerdos.¬†Charcola, modificar√° tus im√°genes de forma que parezcan dise√Īadas a l√°piz. Y esto son solo algunos de los ejemplos que te ofrece befunky. Quieres probarlos todos, lo sabemos.

Si quieres un resultado impresionante, utiliza BeFunky porque podr√°s ordenar tus im√°genes como quieras.

Im√°genes sin derechos de autor

A la hora de introducir fotos en tu p√°gina web debes respetar una premisa. Las im√°genes tienen un due√Īo, y si no cuentas con una autorizaci√≥n por su parte, est√°s cometiendo una ilegalidad al introducirlas en tu web. Sencillo.

Así, deberás buscar imágenes que no tengan derechos de autor, o copyright. Para ello, dispones de varias páginas denominadas banco de imágenes. Estas, cuentan con millones de fotos subidas por fotógrafos profesionales y que puedes acceder a ellas de forma gratuita o mediante el pago de una mensualidad.  Algunos de los bancos más conocidos son:

  • Pixabay – gratis
  • Shutterstock ūüíł
  • Stock Photo Secrets ūüíł
  • Creative Market ūüíł

 

Tratamiento de im√°genes para el logo de una web

Si me permiten realizar un peque√Īo s√≠mil, el logo de una web es como el escudo de un equipo¬† o la bandera una localidad. Y ,de igual forma, nadie querr√≠a que un horrendo dise√Īo estuviese impreso “de por vida” en alguna de ambas opciones.

Cuidar el dise√Īo de tu logo, es clave. Pues inspira una determinada sensaci√≥n¬† que condicionar√° de forma positiva, o negativa, a tu usuario o potencial cliente.¬† Y ,gracias a la tecnolog√≠a, hoy es m√°s f√°cil que nunca obtener uno que enamore‚̧ԳŹ.

Partimos de la base de que no somos expertos en dise√Īo gr√°fico.¬† Puesto que , si as√≠ se fuese, podr√≠amos elaborar nosotros mismos uno con alguno de los programas mencionados anteriormente.

Otra posibilidad es la de intentar elaborar uno con la ayuda de tutoriales de Youtube.¬† ūüĎČ S√≥lo apto para valientes¬† ūüĎą.

Y si t√ļ tampoco te incluyes en este grupo, te quedan dos opciones √ļnicamente:

  • ¬†Encontrar a un profesional para ello:

La oferta de agencias de publicidad y dise√Īo que realizan este tipo de servicios es muy basta. Con tan solo una b√ļsqueda en google, aparecer√°n miles. Puedes encargar a ellos este trabajo ,aunque suele ser la opci√≥n menos econ√≥mica.

Otra posibilidad es encontrar un dise√Īador gr√°fico freelance. Y fivver es uno de los marketplace de servicios digitales m√°s reconocidos. All√≠ podr√°s dar con miles de perfiles evaluados por otros usuarios a los que pedir presupuesto sin compromiso.

  • ¬†Dise√Īa uno de forma online:¬†

Existen diversas p√°ginas encargadas de ofrecer logos est√°ndar con peque√Īas opciones de personalizaci√≥n. Su funcionamiento es muy b√°sico; Introduces el nombre de tu empresa o web , eliges el que m√°s te agrade entre los diversos dise√Īos generados de forma autom√°tica y lo descargas.¬† Ah√≠ mismo podr√°s cambiar el color, la posici√≥n de ciertos elementos del mismo e incluso el tama√Īo.

Entre los m√°s reconocidos se encuentran: freelogodesign.org , logomaker.com y logomaster.ai

¬ŅC√≥mo mejorar el SEO con tus im√°genes?

Si quieres ir un poco más allá y mejorar el posicionamiento de tu página web (SEO),las imágenes también cuentan. Por supuesto.  Aquí te dejamos los tips más importantes, que llevarán tus imágenes al siguiente nivel.

  • ORIGINALIDAD

Para el todopoderoso buscador, tanto el texto como las im√°genes deben ser originales y √ļnicas. Y muchas de las fotos que puedes adquirir en bancos de im√°genes pueden haber sido utilizadas ya en otras p√°ginas web de la red. Por ello, trata estas im√°genes digitales antes de subirlas. Adem√°s de los editores mencionados anteriormente, tienes otros en l√≠nea, como¬†Fotoram.io. Con una peque√Īa variaci√≥n en el √°ngulo, saturaci√≥n del color o brillo, tendr√°s im√°genes 100% originales de forma gratuita.

Para comprobar si la imagen subida a tu web ya aparece en otros sitios online, haz click derecho sobre la misma y selecciona la opci√≥n buscar la imagen en Google. Con ello ,podr√°s ver de un plumazo cu√°ntas webs la han usado o si tu propia foto retocada es considerada como √ļnica por el buscador.

 

  • TAMA√ĎO Y PESO

Cuida el tama√Īo de las im√°genes: La velocidad de carga de tu sitio es fundamental para aparecer m√°s arriba en el buscador. Comprime las im√°genes en l√≠nea con Tinypng antes de subirlas.

comprimir en Tinypng

Arrastra la imagen desde tu ordenador y autom√°ticamente se comprimir√° su tama√Īo al m√≠nimo posible sin perder su calidad.¬† Una vez concluido el proceso, te indicar√° el porcentaje de reducci√≥n del peso alcanzado y la posibilidad de descargar de nuevo esa imagen.

Para esta misma funci√≥n ,tambi√©n existen plugins para wordpress que autom√°ticamente optimizar√°n el tama√Īo de todas las im√°genes de tu web. Existen diversas opciones tanto de pago como de forma gratuita.¬† Y algunas de las m√°s interesantes son:

    • Optimizador.io¬†
    • WP Smush.it
    • Imagify¬†
    • EWWW Image Optimizer

 

  • ETIQUETA ALT

¬†Los llamados textos alternativos permiten orientar al buscador sobre la tem√°tica de dicha foto. Cuidalos. Incluye en esta casilla palabras clave por las que te gustar√≠a aparecer en google con ese post. Cuando hagas clic en la opci√≥n de a√Īadir im√°genes a un post, aparecer√°s en la galer√≠a de im√°genes. Selecciona una de ellas y a la derecha aparecer√° esta etiqueta m√°gica. Aprov√©chala.

Cuanta mayor y mejor sea la información detallada, más fácil tendrá el buscador indexar tu imagen para la palabra clave objetivo .

¬ŅC√≥mo optimizar las imagenes en WordPress?

Todo el mundo habla de¬†SEO¬†con relaci√≥n a optimizar el contenido, escribir t√≠tulos descriptivos, crear estructuras de enlaces internos, adoptar el dise√Īo web responsive, etc. No muchos sin embargo, le dan importancia a las im√°genes, las cuales tambi√©n pueden ser optimizadas para SEO y de hecho ofrecen grandes beneficios en t√©rminos de tr√°fico org√°nico. Para asegurarnos de aprovecharlas al m√°ximo, a continuaci√≥n te compartimos 5 plugins para optimizar im√°genes en tu blog WordPress.

5 plugins para optimizar im√°genes en WordPress

  1. FB Responsive Images

Este es un plugin WordPress para optimizar im√°genes que nos permite hacer que las im√°genes se vean optimizadas en las pantallas de diferentes tama√Īos. El plugin tiene la capacidad de darle formato a las im√°genes para adaptarlas al dise√Īo responsivo y mejorar la calidad general del sitio de forma significativa. No m√°s problemas de carga por culpa de las im√°genes de gran tama√Īo.

  1. EWWW Image Optimizer

Este es un plugin para optimizar im√°genes en WordPress que de hecho es bastante popular entre los usuarios de esta plataforma. El plugin tiene la capacidad de ejecutarse en su propio servidor, lo que elimina el tiempo de espera para los servidores de terceros al procesar las solicitudes. Puede optimizar im√°genes en formatos PNG y JPEG, adem√°s que tambi√©n puede encontrar el formato de archivo m√°s peque√Īo para convertir las im√°genes a ese tama√Īo. No solo eso, las im√°genes pueden ser optimizadas de forma individual o por lotes. Todo esto en su conjunto hace que los elementos en el sitio web se carguen m√°s r√°pido.

  1. Hammy

Hammy es un plugin que toma las im√°genes de la p√°gina web y las reproduce a un tama√Īo de imagen mucho menor pero sin perder calidad. El tama√Īo de la imagen va a depender del ancho del contenido, pero en general es un plugin de gran utilidad ya que proporciona una mejorada experiencia de usuario en los dispositivos m√≥viles y ordenadores de escritorio.

  1. Media File Renamer

También es otro de los mejores plugins para optimizar imágenes en tu blog WordPress que en este caso permite cambiar el nombre de las imágenes mediante la actualización de los subtítulos. También es posible cambiar los enlaces en los posts de forma automática y si se utiliza con las palabras clave más relevantes, el SEO de la página mejorará significativamente.

  1. Imsanity

Terminamos con este plugin que est√° dise√Īado para cambiar el tama√Īo de las im√°genes de forma autom√°tica, principalmente aquellas que tienen un gran tama√Īo. Se puede cambiar el tama√Īo de las im√°genes por lotes e incluso hay una opci√≥n para convertir im√°genes bmp a jpg.

Y hasta aqu√≠ esta gu√≠a sobre c√≥mo tratar im√°genes digitales. Esperamos que os haya resultado √ļtil y ,por supuesto,nos leemos en pr√≥ximas entradas ūüėä

¬ŅQu√© buscas?

Lo más leído

¬ŅQuieres tener una agencia como Dosmedia?

¬ŅEn qu√© podemos ayudarte?

RELACIONADOS
Artículos relacionados

¬ŅEn qu√© podemos ayudarte?

CONTACTO
¬°No pierdas el tiempo!