El manejo de imágenes de alta resolución se ha convertido en un tema importante para muchos diseñadores e incluso desarrolladores, por lo que en este artículo nos dedicaremos a describir cuatro formas para reemplazar imágenes usando PHP y jQuery. Dos lenguajes que sin duda son base para la mayoría de los desarrolladores.

Entonces, mientras trabajamos es necesario especificar el ancho y alto de la imagen, proporcionar una que tenga el doble de tamaño de cada dimensión es lo ideal. Para las imágenes de fondo CSS se tiene que utilizar la propiedad de tamaño de fondo para ampliarla correctamente, así:

#image { background: url(image.png); }
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2) {
#image { background: url(image_2x.png); background-size: 50%; }
}

Técnica 1. Alta Resolución

<img src=”image.jpg” alt=”” width=”200″ height=”100″ />

Con:

<img src=”image_2x.jpg” alt=”” width=”200″ height=”100″ />

Pros

  • Simple
  • Fácil control sobre lo que es Alta Resolución y lo que no es.

Contras

  • Un gran desperdicio para los dispositivos de la retina
  • Tiempo de carga de la página lenta

 Técnica 2. Comprobar la proporción de píxeles

Hay una propiedad expuesta por el navegador que se llama devicePixelRatio, nos dice lo que está pasando. En los dispositivos de la retina, tiene el valor de 2, lo que significa que sólo podemos insertar nuestras imágenes de manera normal.

<img src=”image.jpg” alt=”” width=”200″ height=”100″ />

Usamos jQuery así:

// Set pixelRatio to 1 if the browser doesn't offer it up.
var pixelRatio = !!window.devicePixelRatio ? window.devicePixelRatio : 1;
$(function() {
if (pixelRatio > 1) {
$('img').each(function() {
// Very naive replacement that assumes no dots in file names.
$(this).attr('src', $(this).attr('src').replace(".","_2x."));
});
}
});

Pros

  • Bastante simple
  • Sólo funciona en los dispositivos que lo necesiten
  • El usuario recibe la versión de baja resolución con rapidez

Contras

  • Las imágenes se cargan el doble

Sustituir las imágenes de 4/4S iPhone y el iPod Touch, en realidad no son necesarias.

Técnica 3. Verificar la proporción de píxeles y comprobar si los archivos existen

Apple hace uso de una solicitud de la cabeza de cada imagen antes de reemplazarla. Una mejor forma podría ser la de escribir un script PHP que devuelve una lista de todas las imágenes _2x, entonces sólo los reemplaza si se encuentran en la lista.

En PHP:

<?
function is_in_string($haystack, $needle) {
if (strpos($haystack, $needle) !== false) {
return 1;
} else {
return 0;
}
}
function get_dir_contents($web_directory) {
$directory = $_SERVER['DOCUMENT_ROOT'].$web_directory;
if(file_exists($directory)) {
$myDirectory = opendir($directory);
while($entryName = readdir($myDirectory)) {
if (is_in_string($entryName, "_2x")){
$dirArray[] = $entryName;
}
}
return $dirArray;
}
}
header('Content-type: application/json');
echo json_encode(get_dir_contents("/my/image/directory"));
?>

Ahora, sólo comprobar si la fuente es la nueva imagen en ese JSon antes de reemplazar.

[“image1_2x.jpg”,”image2_2x.png”,”image3_2x.jpeg”]

El JS será el siguiente:

// Set pixelRatio to 1 if the browser doesn't offer it up.
var pixelRatio = !!window.devicePixelRatio ? window.devicePixelRatio : 1;
$(function() {
$.getJSON("/path/to/that/php/above.php", function(data){
if (pixelRatio > 1) {
$('img').each(function() {
// Very naive replacement that assumes no dots in file names.
var newsrc = $(this).attr('src').replace(".","_2x.");
if ($.inArray(newsrc, data)) {
$(this).attr('src', newsrc);
}
});
}
});
});

Pros

  • Sólo sustituye a las imágenes que existen
  • Sólo una petición HTTP adicional, que puede ser almacenado en caché

Contras

  • Un adicional de petición HTTP

En general podemos decir que de acuerdo a estas tres técnicas, la más indicada sería la 3 combinando un poco de todo. ¿Tú cual usarías, crees, sabes o conoces una mejor? Coméntanosla!

Cecy Martínez

Cecy Martínez

Jefa de contenido y editora en HTML5Fácil, NinjaCodeTV, Desveloperstv y Co funder de WaveCode.LA

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Cerrar