Optimización de imágenes para Diseño Adaptable o Responsive con WordPress

Escrito por el 30 dic, 2013 en Blog, SEO Móvil | 2 comentarios

Optimización de imágenes para Diseño Adaptable o Responsive con WordPress

El diseño adaptativo ha ido perdiendo adeptos frente al nuevo Diseño Responsive, el cual ha dominado la web por su adaptación a cualquier tipo de dispositivos de visualización como móviles, tablets, etc.

Al diseñar cualquier sitio web hoy en día, se está diseñando para literalmente cientos de diferentes dispositivos, todos los que ejecutan diferentes sistemas operativos y navegadores. En en este artículo en particular vamos a ver como optimizar las imágenes de un sitio con WordPress para el correcto funcionamiento de este tipo de diseños.

Si no estamos familiarizados con el significado de un diseño adaptativo, este utiliza un conjunto prediseñado de tamaños en el diseño basados en los tamaños de la pantalla de cada dispositivo, el cual junto con CSS y Javascript se adapta a dispositivo detectado. En cambio un sitio Web Responsive cambia de manera fluida y responde para adaptarse a cualquier tamaño de la pantalla o dispositivo. Puedes ver una información más detallada en este artículo.

El tamaño de visualización de las imágenes está integrado en la mayoría de los marcos de trabajo y no requiere de muchos cambios. Con Bootstrap 3 es necesario agregar una clase  Img-responsive a nuestra imagen, mientras que Foundation 4 hace el dimensionamiento de la imagen de forma automática.

Escuchamos una y otra vez sobre la importancia de los tiempos de carga de cada página para el SEO y la usabilidad del sitio, y la mayoría de las veces es por falta de una optimización de imágenes que vamos incluyendo en nuestro sitio web.

Antes de empezar. Smush it

Antes de llegar a el objetivo principal de este artículo, vale la pena mencionar que para cualquier tipo de dispositivo, móvil o de escritorio, siempre es bueno optimizar el tamaño de las imágenes.

Imágenes grandes pueden ser culpables de los tiempos prolongados de carga, la cual pueden perjudicar nuestro SEO. Smush.it de Yahoo proporciona una fácil optimización de la imagen sin pérdida por extracción de la mayor cantidad de información no utilizada de un archivo de imagen. Hay un plugin llamado WP Smush it que puede aplicar automáticamente la optimización de las imágenes de nuestro sitio con WordPress.

Hemos de tener en cuenta que mientras que el plugin optimiza todas las nuevas imágenes subidas a nuestro sitio una vez que está activado, las imágenes existentes no se ven afectadas. Sin embargo, es posible utilizar la opción de optimización a granel de Smush.it bajo la pestaña “Medios” para optimizar las imágenes existentes. Esta característica está etiquetada como en fase de pruebas, pero nunca he tenido un problema con esta.

Smush it, optimiza el tamaño de tus imágenes automáticamente
Optimiza las imágenes de tu blog en WordPress con Smush it

Plugin para WordPress “New Nine Adaptive Images”

Por suerte hay un plugin que muestra de forma automática diferentes archivos de imágenes de tamaño según el dispositivo que les está sirviendo, el plugin New Nine Adaptive Images adapta las imágenes con un script de jQuery.

Plugin Nine Adaptive Images para mostrar el tamaño correcto de la imagen

New Nine Adaptive Images

Es importante asegurarse de que tu servidor cumple los requisitos para la utilización de este plugin, que cualquier proveedor de alojamiento medio decente debería tener.

Al configurar este plugin, tendremos que modificar las reglas del archivo.Htaccess de nuestro WordPress. La forma más fácil de hacer esto es por lo general a través del administrador de archivos en cPanel o mediante FTP. Los parámetros del plugin, que aparecen en la página de configuración de los medios de comunicación, proporcionan las nuevas reglas que necesarias para cortar y pegar en el archivo .htaccess. En la página de configuración también se puede establecer manualmente diferentes puntos para cambiar el tamaño de las imágenes, pero los valores por defecto debería funcionar en la mayoría de los casos.

Lo importante son los resultados

Es fácil trabajar siempre con Responsive frente a Adaptativo y otros argumentos semánticos. Pero lo más importante es tener en cuenta que la persona que visita nuestro sitio no le importa la estrategia de diseño que utilizamos, ya sea Responsive, Adaptable, ambos o ninguno.

Todo lo que importa al final es la calidad de la experiencia del usuario. La carga de la página en un plazo razonable de tiempo, transmitir el mensaje y la función de manera intuitiva en cualquier dispositivo que se utiliza. Al usuario final no le importa cómo has logrado esos objetivos, siempre y cuando se lleven a cabo.

Seguiremos escribiendo sobre temas de diseño Responsive y usabilidad con WordPress en próximos artículos. Mientras tanto, si conoces otras técnicas de optimización de imágenes para todo tipo de pantallas que te gustaría compartir, se agradece que las incluyas en los comentarios.

BIO: Pedro Mendez. Desarrollador de sitios web, SEO y Marketing Online
Blog: ReIn Spirit

 

Mi nombre es Pedro Mendez y soy administrador de varios blogs, donde suelo escribir sobre los temas que mas me interesan como los negocios online, herramientas para webmasters, software, blogging, seo, y temas relacionados.

2 Respuestas a“Optimización de imágenes para Diseño Adaptable o Responsive con WordPress”

  1. me cuesta un poco con esta cosa de la adaptación de las imágenes a los dispositivos, cuales serían las medidas optimas de imágenes horizontales y verticales… han utilizado en su web este plugin?. si no es así podrían decirme alguna que si lo utilice para ver los resultados. Saludos y gracias por los consejos

Y tú, ¿Qué opinas?

%d personas les gusta esto: