¿Cuál es la mejor manera de usar la imagen destacada para un diseño web receptivo?

Tengo una idea brillante y dado que WordPress ya se encarga de parte del trabajo, solo necesito encontrar un buen método para que esto funcione.

Estoy trabajando en un proyecto que debe responder a todos los dispositivos, ya sea una PC de escritorio o un dispositivo móvil. Por lo tanto, quiero que las imágenes también respondan, lo que significa que los dispositivos móviles no deberían cargar imágenes de 50 KB +.

Para cada página o publicación, puedo agregar una imagen destacada usando miniaturas de publicación que, a tamaño completo, la imagen es de aproximadamente 950x250 a ~ 60 KB. Si cargo el sitio web en un iPhone / Android, no me gustaría que se cargara la imagen de ~ 60 KB, pero en su lugar me gustaría que la pequeña miniatura se cargara en su lugar.

El método predeterminado para imágenes receptivas es hacer que el ancho de la imagen sea el 100% del contenedor principal, por lo que cambiará de tamaño automáticamente si el contenedor principal también cambia de tamaño. No es el mejor método para imágenes más grandes.

Pensé en probar el script de imagen sensible de Filament Group , pero lo probé y no funcionó correctamente. Una forma de lograr esto es mediante la detección de agente de usuario, pero prefiero no hacer este método tampoco, ya que los agentes de usuario pueden ser falsificados.

Aquí hay otro método para cambiar el tamaño de las imágenes sobre la marcha , pero parece estar duplicando lo que WordPress ya ha hecho.

Si hay una manera de hacer esto con las imágenes de la Galería multimedia que WordPress tiene por defecto, con todas las miniaturas redimensionadas ya creadas, sería preferible.

Paso 1:

Defina dos tamaños de imagen personalizados, por ejemplo:

<?php
add_image_size( 'normal-thumbnail', 400, 300, false ); // Default image size
add_image_size( 'mobile-device-thumbnail', 200, 150, false ); // Mobile-device image size
?>

Paso 2:

Implemente los medios que elija para determinar el cliente. Hay varias formas, y el método que use está fuera del alcance de esta pregunta. Pero, suponiendo que tenga un método que funcione para usted, envíe el resultado a alguna variable, como$mobile_device = true;

Paso 3:

En sus archivos de plantilla, envíe la imagen condicionalmente, según el cliente.

<?php
if ( true = $mobile_device ) { // client is mobile; be responsive
    the_post_thumbnail( 'mobile-device-thumbnail' );
} else {
    the_post_thumbnail( 'normal-thumbnail' );
}
?>

Nota: podría repetir if/else(o hacer a switch) para múltiples factores de forma (es decir, tamaños de pantalla). Simplemente agregue múltiples tamaños de imagen personalizados y pruebe condicionalmente para cada tamaño de pantalla que desee admitir.

La mejor manera es usar una cuadrícula fluida para crear el tema de WordPress y eliminar los valores de ancho y alto de las imágenes destacadas a través de una función de escala proporcional. Un tutorial sobre cómo hacer que las imágenes de WordPress respondan :

Método 1: el CSS

Agregue el siguiente código a su archivo CSS. Eso hará que las imágenes sean escalables según el tamaño de la pantalla.

img { max-width: 100%; }
img { -ms-interpolation-mode: bicubic; }

Eliminar la altura y el ancho automáticos en las <img>etiquetas de WordPress

Ahora arrastre la ventana para ver la escala de la imagen en acción. Notarás que las imágenes en tu blog de WordPress escalan de manera extraña. El escalado horizontal está bien, pero el escalado vertical en las imágenes de WordPress está mal.

Para hacer que las imágenes sean redimensionables proporcionalmente en WordPress, tenemos que eliminar los valores automáticos de ancho y alto que WordPress agrega para las < img >etiquetas.

Como ejemplo, tenemos que cambiar esto:

< img class=”imgclass” src=”../images/featuredtmb.jpg” alt=”alt comes here” 
    width=”100″ height=”100″ />

A esto:

< img class=”imgclass” src=”../images/featuredtmb.jpg” alt=”alt comes here” />

Para las imágenes que están en una publicación o una página estática / página de plantilla, todo lo que tiene que hacer es agregar el CSS anterior al style.cssarchivo y luego eliminar las propiedades ‘width’y ‘height’de la < img >etiqueta en su editor de WordPress. ¡Eso es!

Pero para la imagen que WordPress muestra dinámicamente, como las miniaturas de publicaciones, el ancho y la altura deben eliminarse dinámicamente mediante una función.

Agregue la siguiente función a su functions.phparchivo.

function remove_wp_width_height( $string ) {
    return preg_replace( ‘/\/i’, ”,$string );
}

Luego, cuando solicite las imágenes en miniatura de la publicación en su página template.php, reemplace:

the_post_thumbnail();

Con este:

echo remove_wp_width_height( get_the_post_thumbnail( get_the_ID(), ’large’ ) );

Eso es. ¡Arrastre y cambie el tamaño del navegador para ver sus imágenes receptivas de WordPress en acción!

---

Método 2:

Lo anterior no funcionará para algunos temas.

Si usted es uno de los pocos que no funcionó, aún puede resolver su problema de imagen con la siguiente función.

Agregue la siguiente función a su functions.phparchivo.

Esto elimina los atributos de ancho y alto en línea de las imágenes recuperadas the_post_thumbnail(), y evita que esos atributos se agreguen a las nuevas imágenes agregadas al editor.

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );  
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 ); 
function remove_thumbnail_dimensions( $html ) {     
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );     
    return $html; 
}

Una forma de lograr esto es a través de la detección de agente de usuario, pero prefiero no hacer este método tampoco, ya que los agentes de usuario pueden ser falsificados.

Este no es un mal método y en realidad es el estándar de la industria, un buen WURFL tiene una clasificación de precisión muy alta, los que he usado y probado siempre arrojaron resultados sólidos y las pruebas independientes (por encima de lo que me molestaría hacer) parecen tenerlos en el 98% + rango. A quién le importa si algún bot cojo está engañando a un agente de usuario, de todos modos no están allí por una buena razón.

Para el paso 2, creo que cualquiera de los dos métodos es más rápido, una consulta de medios WURFL o CSS respaldada por PHP.

Primero tienes que definir "mejor". Mi definición sería: Representa la imagen con el efecto deseado por el diseñador en cualquier dispositivo o pantalla. Representa la imagen con la misma calidad que la original. Consume la cantidad mínima absoluta de sistema y recursos humanos (es decir, ancho de banda, CPU, tiempo del diseñador / programador)

Aquí están los enfoques que he visto hasta ahora:

1. Cargue la imagen a tamaño completo y haga que el navegador la reduzca para ajustarse al diseño. Defina el ancho máximo de la imagen como 100% y reduzca la escala según el ancho de su contenedor.

Pros: requiere casi ningún esfuerzo para implementar, compatible con navegadores cruzados y compatible con navegadores antiguos.

Contras: a menudo descarga más datos de los necesarios y luego gasta ciclos de CPU en el cliente reduciéndolos (lento). Puede terminar con imágenes de muy baja calidad dependiendo del algoritmo de escala del navegador. No hay posibilidad de dirección artística y no se puede adaptar la imagen para pantallas tipo retina.

2. Use consultas de medios para leer las propiedades del cliente y obtenga una de varias imágenes personalizadas para diferentes puntos de interrupción en su diseño. (El propone HTML Responsive Imágenes de extensión y las etiquetas de atributos srcset están trabajando en bicarbonato de este enfoque en el HTML de especificaciones).

Pros: Descarga más rápida en dispositivos móviles. Puede manejar pantallas tipo retina. Calidad de imagen mejorada ya que las imágenes se procesaron con suerte utilizando algún método de alta calidad La dirección artística se hace posible.

Contras: Alguien tiene que pasar tiempo procesando, recortando y gestionando múltiples versiones de la misma imagen. Más codificación: ahora debe deletrear cada versión de la imagen de alguna manera y crear consultas de medios para todos los diseños deseados. Repita lo anterior para cada imagen que sirva. Solo funcionará para navegadores que admitan CSS3 Media Queries o las nuevas etiquetas.

3. Haga el backend Optimice las imágenes para cualquier pantalla o diseño utilizando una sola imagen de origen sobre la marcha. En mi opinión, esto es equivalente a tratar las imágenes receptivas como una tarea de negociación de contenido muy similar a HTTP.

Pros: Designer no tiene que perder tiempo procesando imágenes y administrando múltiples versiones. La imagen de tamaño más óptimo se envía cada vez. Puede manejar pantallas de tipo retina y ajustarse dinámicamente para la dirección artística (aunque con un poco de esfuerzo adicional, debe saber dónde enfocar). No se requiere marcado especial o adicional (advertencia a continuación). Compatible con navegadores cruzados y funcionará para navegadores antiguos.

Contras: tiene que capturar y transmitir información sobre el navegador del cliente y las propiedades de la pantalla. La primera vez que se carga una imagen puede ser más lenta que en cualquier otro enfoque, ya que la imagen debe procesarse (generalmente se almacena en caché para solicitudes posteriores).