Tutorial: Imagen responsive para tus post

Google declaró oficialmente que todos los diseños de sitios web deben adaptarse a los dispositivos móviles. Esto es, debe verse perfectamente tanto en un ordenador, como en una tableta o teléfono móvil. Existe una clara tendencia hacia el uso de dispositivos móviles, así como al uso de la nube para almacenar datos y, por último ( entre otras cosas que me dejo en el tintero) el trabajo del contenido a través de infografías, imágenes.

Si queréis que vuestras imágenes sean responsive tal como recomienda Google, podéis usar el siguiente sistema que seguro más de uno ya conoce:

En primer lugar, debemos conseguir las imágenes con licencia de uso para evitar problemas en el futuro. Existen bancos de imágenes como por ejemplo, fotolia, donde podréis obtener imágenes para vuestros blog y nichos de mercado. En este caso, os muestro una imagen de un post con el siguiente tamaño width="500" height="334" .


En el siguiente paso, la vamos a convertir a responsive trabajando con porcentajes y no con los valores que aparecen en el tamaño de la imagen mostrada. En el ejemplo citado, sería de la siguiente manera:
src="http://tecnopsi.com/wp-content/uploads/2014/03/servidores-dell.gif" alt="servidores dell" width="50%" /></a></p>

Ahora la imagen se adaptará dispositivos móviles y Pc. Para finalizar un truco ( - bueno no es un truco, sino código html 😛irate: )
y así conseguir una imagen más atractiva y que enganche a vuestros lectores. Si bien esto último es a gusto de cada uno de vosotros.
Ahí va:

src="http://tecnopsi.com/wp-content/uploads/2014/03/servidores-dell.gif" alt="servidores dell" width="50%" /></a></p>
<strong>Dell PowerEdge R905</strong>

Aquí tenemos la imagen. Bien pues antes de src vamos a añadir el siguiente fragmento de código que os dará un sombreado a la imagen de vuestro post:

style="box-shadow: 5px 5px 10px rgba(0,0,0,0.5); -moz-box-shadow: 5px 5px 10px rgba(0,0,0,0.5); -webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.5);"

entonces quedando así finalmente tanto visualmente como en texto:

Texto

visual

Imagen sombreada

Espero os sea útil a tod@s aquellos que no conocieran estos detalles. Un saludo compañer@s

Muy buen tutorial men agregado a favoritos gracias por el aporte 🙂

Me será de gran utilidad :O

Muchas gracias por compartirlo, la verdad yo no tenía idea de que así se podría hacer :$

Soy algo nuevo en esto!

Muy bueno, aver que uso le damos 😛irate:😛irate:😛irate:

Se va a favoritos. Un tips sencillo pero que hace diferencia. Muchas gracias.

Gracias por el aporte. :encouragement:

Mal tutorial.

El porcentaje ocupará el 50% de la pantalla o del contenedor donde se encuentre la imagen. Para hacer la imagen responsiva de forma correcta se utiliza CSS, la propiedad max-width.

La manera correcta es usando el max-width y otro problema es que el responsive no te soluciona el problema de la carga de la imagen en mobile. El responsive lo que hace es escalar la foto pero el peso se sigue manteniendo, por lo cual no es adecuado para mobile y se debe hacer uso de una segunda imágen que tenga la medida o por ende un js.

Así como Google prefiere cada vez mas el responsive, también quiere que las imágenes se compriman ^^.

WeRunTheNite dijo:

Mal tutorial.

El porcentaje ocupará el 50% de la pantalla o del contenedor donde se encuentre la imagen. Para hacer la imagen responsiva de forma correcta se utiliza CSS, la propiedad max-width.

Hacer clic para expandir...

Exacto, además, recuerden que el height puede quedarse del mismo tamaño mientras el ancho se reduce, lo que cambiaría las proporciones. Esto se arregla agregando height: auto;

Son unos tips bastantes habituales que que la mayoría de la gente no los usa si no los deja a un lado y la verdad a la hora de alojar debemos pensar en todas las plataformas. Gracias.

Al usar porcentajes se adaptará a los dispositivos móviles. De la comprensión sin duda que es lo más importante, pero el uso de porcentajes te asegura que la imagen sea responsive en width. Respecto al uso del porcentaje es obvio que si pones 50% ocupará la mitad de la pantalla, pero eso no quita que sea responsive, puesto que tu vas haciendo pequeña la pantalla y se adapta gracias al uso del % no del otro valor. En este caso no es un mal tutorial, puesto que insisto el uso del % la convierte en responsive, sin menospreciar la comprensión que es muy relevante puesto que un tamaño y peso excesivo hacen que el tiempo de carga de la web sea excesivo. Pero en cualquier caso, con probarlo es suficiente. ( el sombreado no está mal, ¿verdad?)


aquí el ejemplo de cómo se adapta la imagen con el %.

Google pide ajustes y los anuncios de ellos no son responsive -.-

WeRunTheNite dijo:

Mal tutorial.

El porcentaje ocupará el 50% de la pantalla o del contenedor donde se encuentre la imagen. Para hacer la imagen responsiva de forma correcta se utiliza CSS, la propiedad max-width.

Hacer clic para expandir...

Exacto, deberían usarlo mejor así:
img{max-width:xxxpx;width:100%;height:auto}
Donde xxx es número al azar en pixeles en que se mostrará la imágen como máximo normalmente. Si no quieren líos pueden configurar en su wordpress para que la imagen se vea en ese tamaño, así al aplicar el css no habrá reducción de imágen. :distant:

😱nthego:

amd2107 dijo:

Google pide ajustes y los anuncios de ellos no son responsive -.-

Hacer clic para expandir...

Si lo son que yo sepa, un amigo buscaba lo mismo y encontró la opción en adsense.

lordskorpius dijo:

Exacto, deberían usarlo mejor así:
img{max-width:xxxpx;width:100%;height:auto}
Donde xxx es número al azar en pixeles en que se mostrará la imágen como máximo normalmente. Si no quieren líos pueden configurar en su wordpress para que la imagen se vea en ese tamaño, así al aplicar el css no habrá reducción de imágen. :distant:

😱nthego:

Hacer clic para expandir...

Es correcto y tengo que reconocerlo. El programador que me asesoró sólo acertó con el borde de sombra, el resto es como dicen aquí los compañeros.

Chamako dijo:

Si lo son que yo sepa, un amigo buscaba lo mismo y encontró la opción en adsense.

Hacer clic para expandir...

Se que hay un sistema de recocimiento de pantalla pero no es responsive exactamente!!

Si cambio en mi pagina todo los width y heigt que los tengo px los pongo con % estaría haciendo que mi pagina sea responsive?

Enviado desde mi XT1058 mediante Tapatalk

De acuerdo con los demás, es correcto usar max-width:100% para conseguir responsive correcto.😱nthego:

genial aporte muchas gracias lo guardo en favoritos

garedat dijo:

De acuerdo con los demás, es correcto usar max-width:100% para conseguir responsive correcto.😱nthego:

Hacer clic para expandir...

Cuando añado la sintaxis max-width="100%" height="auto" actualizado o guardo el post en wordpress queda así como en la en fragmento de código que sigue:
😕