Tecnología y Coaching para Emprendedores

Cómo Crear Imágenes Responsive en WordPress

wordpress-responsive-tutorial

Seguro que te ha pasado alguna vez de estar en el móvil mirando un sitio web y decidir irte porque no había manera que se descargaran las imágenes. Cuando actualizas regularmente un blog, en lo último que te paras a pensar es en también optimizar todas y cada una de las imágenes, bastante tiempo tardas en actualizar el sitio y buscar las imágenes más adecuadas para tu contenido. Además de esto, sucede que una imagen optimizada para un smartphone no lo estará para un sobremesa de 27 pulgadas, con lo que se hacen necesarias varias imágenes.

En el curso de diseño web responsive vemos varias soluciones posibles, destacando las imágenes adaptativas o Adaptive Images. Cada una de las soluciones disponibles tienes sus pros y sus contras, por lo que hay que valorar cada una de las opciones. Con Adaptive Images tenemos la ventaja que las imágenes se ajustan de manera automática, sin necesidad de código extra, pero el inconveniente es, entre otras cosas, que no detecta el ancho de banda.


Cómo Hacer Imágenes Responsive en WordPress

Para usar Adaptive Images necesitamos un servidor que funcione con Apache así como tener acceso al archivo .htaccess. En este post vamos a aprender a configurar Adaptive Images para que funcione con WordPress. Para ello, has de descargar el archivo zip de la web de Adaptive Images y seguir los pasos indicados en este tutorial.

Paso 1: Modifica el archivo .htaccess

El archivo .htaccess se encuentra en el directorio raíz de tu servidor. Si tienes los enlaces permanentes de WordPress configurados, seguramente tendrás este código en algún sitio del archivo:


# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /your-site/index.php [L]
</IfModule>
# END WordPress

Importante: Ten mucho cuidado al editar .htaccess, ya que cualquier error puede hacer que el servidor entero deje de funcionar. Ábrelo siempre con un editor de textos tipo Sublime Text para evitar cambiar la extensión.

Si en el archivo hay además otras configuraciones, no deberías de tocarlas si no sabes lo que haces, ya que puedes cargarte alguna configuración y que todo deje de funcionar. Lo que vamos a hacer es modificar el código anterior como sigue:


# BEGIN WordPress
&lt;IfModule mod_rewrite.c&gt;
RewriteEngine On

#START Adaptive-Images
RewriteCond %{REQUEST_URI} !wp-content/<a href="http://www.esandra.com/in/plugins" title="Plugins de WordPress" class="pretty-link-keyword" target="_blank">plugins</a>
RewriteCond %{REQUEST_URI} !wp-includes
RewriteCond %{REQUEST_URI} !wp-admin
RewriteRule .(?:jpe?g|gif|png)$ adaptive-images.php
#END Adaptive-Images

RewriteBase /your-site/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /your-site/index.php [L]
&lt;/IfModule&gt;
# END WordPress

Lo que hemos hecho es añadir unas líneas de código justo después de RewriteEngine On. Todo lo que lleva delante una almohadilla # significa que es código comentado.

Lo primero que estamos diciendo es que no aplique el método de imágenes adaptativas a los directorios de wp-content/plugins, wp-includes y wp-admin.

La siguiente línea de código utiliza RewriteRule, que lo que está haciendo es enviar cualquier archivo con las extensiones mencionadas al archivo adaptive-images.php:

RewriteRule .(?:jpe?g|gif|png)$ adaptive-images.php

De este modo, adaptive-images.php procesa las imágenes en función del dispositivo y muestra un tamaño u otro.


Paso 2: Sube adaptive-images.php al servidor

Dentro del archivo comprimido que has descargado en la web de Adaptive Images hay uno llamado adaptive-images.php. Este lo has de subir al servidor y lo has de colocar al mismo nivel que .htaccess.

Este es el archivo que va a estar procesando todas las imágenes de WordPress, excepto las indicadas en la exclusión que hemos hecho en .htaccess en el paso anterior.


Paso 3. Añade código JavaScript al header.php

Lo siguiente que has de hacer es añadir una línea de código al archivo header.php de tu tema de WordPress. Importante: no vale añadirlo en cualquier lugar del head, lo has de incluir entre wp_head(); y la etiqueta head.

Si quieres dar soporte a las imágenes retina, entonces necesitas este código:

<script>
    document.cookie='resolution='+Math.max(screen.width,screen.height)+("devicePixelRatio" in window ? ","+devicePixelRatio : ",1")+'; path=/';
</script>

En caso de que no quieras dar soporte a las imágenes retina, utiliza mejor este otro código:

<script>
    document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';
</script>

Paso 4. Test

Por último, has de comprobar que todo funcione correctamente. Para hacerlo, has de subir una imagen de alta resolución a un post o página de WordPress y abrirlo con un smartphone. Guardas la imagen en el dispositivo y te la envías por correo electrónico. Compruebas si el tamaño es correcto y ya está.


Para acabar…

En este post hemos visto cómo implementar imágenes responsive en WordPress con Adaptive Images. Si tienes algún problema en la implementación o necesitas ayuda, puedes contratar mis servicios de consultoría y te ayudo a resolver las incidencias, pero normalmente todo funciona con normalidad. Si te ha gustado el artículo, te animo a dejar un comentario y a compartirlo en las redes sociales.

Un abrazo!


Comentarios

  • lois

    Interesante. No conocía este método, yo siempre lo hacía en el css. Trastearé un poco con esta solución y a ver que tal.

    Un saludo :)

    • eSandra

      Hola Lois,

      el problema del CSS es que no se puede hacer de manera automática, y con este método sí, pues detecta la resolución máxima del dispositivo :-)

      un abrazo!
      Sandra

  • Paco

    Hola Sandra,

    Muy bueno: pero.
    yo pensaba que con este codigo en el css y max-width era suficiente.

    img{
    max-width: 100%;
    height: auto;
    }

    un saludo:

    • eSandra

      Hola Paco,

      con este código haces imágenes que efectivamente se adaptan al tamaño de la pantalla, pero el tamaño no cambia. Pon el caso que tenemos una imagen de 2 Mb pensada para dispositivos retina. En un iMac de 27′ se verá impresionante y si sólo usas el código que mencionas, en el iPhone 5 retina también se verá estupenda. ¿Problema? Pues que en el iPhone también estaremos descargando los 2 Mb. Esto no es óptimo, porque si el usuario en sí está conectado a una conexión Wifi de banda ancha no hay problema, pero cuando esté en 3G sí. En el curso de diseño web responsive lo explico con más detalle :-)

      Un abrazo!
      Sandra

  • Paco

    Gracias Sandra´

    ahora lo entiendo,
    si pudiera haría alguno de tus cursos pero no es el momento, gracias de todos modos y sigue así, que lo haces muy bien.

    un saludo, Paco.

    • eSandra

      sin problemas, un abrazo!

  • Edson

    Hola sandra por favor sacame de la duda, en todo caso adaptive imagenes serviria para que cuando descargues una imagen desde un movil no pese tanto a descargarlo de un desktop??? en todo caso usariamos tambien el codigo de Paco junto con adaptive imagenes ? Gracias de antemano por resolver mi duda. Saludos

    • eSandra

      Efectivamente, así es.

      Un abrazo,
      Sandra

    • Edson

      Gracias por responder tan pronto y cubrir mi gran duda, no hubiese dormido está noche jaja ya q lo estoy implementando en mi web y tenía esas dudas, ya todo aclarado. Muchas gracias Sandra

  • Guille62

    Excelente post ! con esto le digo adiós al Max-width: 100% y la tonelada de Mbs demás que se cargan.

    Gracias ! ;)

    • eSandra

      Hola!

      te recomiendo seguir usando max-width:100%, son cosas complementarias :-)

      un abrazo!
      Sandra

  • Javier

    Excelente post Sandra. Me gusta ver otras formas de resolver ciertos problemas.

    Personalmente no me gusta confiar en script php ajenos. Me recuerda al tim-thumb famoso, el día que alguien le encuentre una vulnerabilidad, miles de sitios atacados.

    Para elegir imágenes me gusta más un plugin javascript que dependiendo del dispositivo te muestra una imagen u otra.

    Tienes que crear las imágenes, lo que a priori puede parecer un gasto de tiempo, pero puedes aprovechar para utilizar imágenes diferentes en dispositivos móviles. Recortando lo que sobra de la imagen y centrar el foco en un punto concreto.

    Saludos.

    • eSandra

      Estoy de acuerdo contigo, Javier, lo que muchas veces optamos por recursos de terceros por comodidad. El ejemplo clave es usar un CMS como WordPress o Joomla en lugar de desarrollar un propio. WordPress por ejemplo recibe muchos ataques masivos y su popularidad lo hace vulnerable. Lo ideal sería que todo fuera a medida y desarrollado por o para uno mismo, lo que si hay un fallo, la vulnerabilidad sigue estando allí y en ese caso no tienes el soporte de la comunidad online para ayudarte a resolverlo si no eres un programador experto. Pero cierto que lo mejor serían las opciones hechas en casa :-)

      un abrazo!

  • Paco

    Hola Sandra,

    El script tiene que ir en header como dices, o puedo ponerlo en el archivo de scripts de mi plantilla.

    un saludo, Paco.

    • eSandra

      Hola Paco, no te puedo decir, no sé cómo es tu plantilla, prueba a ver. Suerte!

  • Paco

    Hola Sandra, el htaccess es el de la raiz o el de la carpeta donde está la instalación de wordpress.

    gracias y perdona por las molestias.

    • eSandra

      sí, acostumbra a estar a la misma altura que el archivo wp-config.php :-)

  • Paco

    Hola Sandra, solucionado, lo he puesto en el htaccess de la carpeta del blog y funciona perfectamente.

    gracias por tu paciencia, somos unos pesaos.
    un saludo

    • eSandra

      me alegro lo hayas solucionado :-)

  • Johan

    Saludos Sandra gusto en contactarte, quería saber si este método es soportado por la mayoría de los navegadores, tenía entendido que adaptative images presenta aun problemas en la mayoría de los navegadores, sabes he estado testeando numerosos plugins en mi wordpress y ninguno me ha funcionado ni con mi plantilla ni con las plantilla que trae instaladas entre esos plugins están los siguientes: WP Responsive Images (sirve solo para móvil apenas un breackpoint), hammy (no funciona), BC Responsive Images (no funciona), PB Responsive Images (no funciona), Simple Responsive Images (no funciona).

    Tengo poco tiempo trabajando en wordpress y me parece muy extraño que ninguno de esos plugins funcione, estos generan las imágenes en diferentes resoluciones para ser cargadas según la resolución en pantalla el dispositivo, he intentado implementar picturefill que es la vía más razonable que he visto hasta el momento pero incluso el plugin “picturefill.wp” tampoco hace nada, ¿me podrías guiar un poco al respecto? Mi lógica me indica que me falta configurar algo para que este tipo de plugins funcionen con mi wordpress, también me he asegurado que sean compatibles con las versiones de wordpress donde los he testeado (para no dejar dudas al respecto) en conclusión aun no encuentro una lógica y me parece de vital importancia este tema para mis desarrollos de sitios web a futuro.

    Espero me puedas ayudar con eso y mil gracias de antemano.