Поддержка Retina изображений на сайте


Retina Images Несмотря на то, что доля устройств с Retina-экранами мала, а в «РуНете» она еще меньше (не более 5%), оптимизировать изображения и контент на сайте под данные устройства является «хорошим тоном» в веб-дизайне. Ведь за этим будущее, так как доля Retina-устройств стабильно увеличивается, а iOS устройства с данными экранами уже не такая и редкость, по сравнению с момента презентации 4-го «АйФона» в 2010 году. Помимо, есть достаточно большая доля «iPad’ов» и «Mac’ов», которые регулярно выходят в сеть. А видеть «замыленные» изображение на высококачественном дисплее – не самое лучшее зрелище и это надо исправлять.

Сделать контент на сайте более «четким» можно разными способами и теориями, их полно в интернете. Лично я для себя выбрал простейший способ без каких-либо хитростей, разработал его Jeremy Worboys из Австралии. Его метод требует добавить на сайт php-файл и простой код в теги <head>, <body> и файл «.htaccess».

Q: Кстати, а почему так происходит, что изображения на «АйДевайсах» слегка размыты?

A: Есть понятие «CSS-пиксель», а есть «Retina пиксель» и их соотношение 1:2. Поэтому 1 CSS-пиксель «размывается» на 2 Retina-пикселя.

Retina Images

Ссылка на загрузку самой последней версии файлов с «GitHub» и ссылка на сайт разработчика доступна в конце статьи.

Листинги (слегка измененных) необходимых файлов приведены ниже.

Что нужно сделать:


Код, который нужно добавить в раздел <head> до всех css-стилей

<script>
(function(w){var dpr=((w.devicePixelRatio===undefined)?1:w.devicePixelRatio);if(!!w.navigator.standalone){var r=new XMLHttpRequest();r.open('GET','/retinaimages.php?devicePixelRatio='+dpr,false);r.send()}else{document.cookie='devicePixelRatio='+dpr+'; path=/'}})(window)
</script>

Код, который нужно добавить сразу после тега <body>

<noscript>
<style id="devicePixelRatio" media="only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)">
#devicePixelRatio{background-image:url("/retinaimages.php?devicePixelRatio=2")}</style>
</noscript>

Код, который нужно добавить в «.htaccess»

# Retina Images
<IfModule mod_rewrite.c>

    Options +FollowSymlinks
    RewriteEngine On

    # Используйте данный код, если сайт находится в корне домена, прим. http://site.ru/index.html
    RewriteBase /
    RewriteRule \.(?:jpe?g|gif|png|bmp)$ /retinaimages.php [NC,L]

</IfModule>

<?php

    /* Version: 1.4.1 - now with case insensitivity */

    define('DEBUG',              false);    // Write debugging information to a log file
    define('SEND_ETAG',          true);     // You will want to disable this if you load balance multiple servers
    define('SEND_EXPIRES',       true);     //
    define('SEND_CACHE_CONTROL', true);     //
    define('DOWNSIZE_NOT_FOUND', true);     // If a regular image is requested and not found, send a retina file instead?
    define('CACHE_TIME',         24*60*60); // default: 1 day

    $document_root   = $_SERVER['DOCUMENT_ROOT'];
    $requested_uri   = parse_url(urldecode($_SERVER['REQUEST_URI']), PHP_URL_PATH);
    $requested_file  = basename($requested_uri);
    $source_file     = $document_root.$requested_uri;
    $source_ext      = strtolower(pathinfo($source_file, PATHINFO_EXTENSION));
    $retina_file     = pathinfo($source_file, PATHINFO_DIRNAME).'/'.pathinfo($source_file, PATHINFO_FILENAME).'@2x.'.pathinfo($source_file, PATHINFO_EXTENSION);
    $cache_directive = 'must-revalidate';

    if (DEBUG) {
        $_debug_fh = fopen('retinaimages.log', 'a');
        fwrite($_debug_fh, "* * * * * * * * * * * * * * * * * * * * * * * * * * * *\n\n");
        fwrite($_debug_fh, print_r($_COOKIE, true)."\n\n");
        fwrite($_debug_fh, "document_root:     {$document_root}\n");
        fwrite($_debug_fh, "requested_uri:     {$requested_uri}\n");
        fwrite($_debug_fh, "requested_file:    {$requested_file}\n");
        fwrite($_debug_fh, "source_file:       {$source_file}\n");
        fwrite($_debug_fh, "source_ext:        {$source_ext}\n");
        fwrite($_debug_fh, "retina_file:       {$retina_file}\n");
    }

    // Image was requested
    if (in_array($source_ext, array('png', 'gif', 'jpg', 'jpeg', 'bmp'))) {

        // Check if a cookie is set
        $cookie_value = false;
        if (isset($_COOKIE['devicePixelRatio'])) {
            $cookie_value = intval($_COOKIE['devicePixelRatio']);
        }
        else {
            // Force revalidation of cache on next request
            $cache_directive = 'no-cache';
        }
        if (DEBUG) {
            fwrite($_debug_fh, "devicePixelRatio:  {$cookie_value}\n");
            fwrite($_debug_fh, "cache_directive:   {$cache_directive}\n");
        }

        // Check if DPR is high enough to warrant retina image
        if ($cookie_value !== false && $cookie_value > 1) {
            // Check if retina image exists
            if (file_exists($retina_file)) {
                $source_file = $retina_file;
            }
        }

        // Check if we can shrink a larger version of the image
        if (!file_exists($source_file) && DOWNSIZE_NOT_FOUND && ($source_file !== $retina_file)) {
            // Check if retina image exists
            if (file_exists($retina_file)) {
                $source_file = $retina_file;
            }
        }

        // Check if the image to send exists
        if (!file_exists($source_file)) {
            if (DEBUG) { fwrite($_debug_fh, "Image not found. Sending 404\n"); }
            header('HTTP/1.1 404 Not Found', true);
            exit();
        }


        // Send cache headers
        if (SEND_CACHE_CONTROL) {
            header("Cache-Control: private, {$cache_directive}, max-age=".CACHE_TIME, true);
        }
        if (SEND_EXPIRES) {
            date_default_timezone_set('GMT');
            header('Expires: '.gmdate('D, d M Y H:i:s', time()+CACHE_TIME).' GMT', true);
        }
        if (SEND_ETAG) {
            $etag = '"'.filemtime($source_file).fileinode($source_file).'"';
            header("ETag: $etag", true);

            if (DEBUG) {
                fwrite($_debug_fh, "generated etag:    {$etag}\n");
                if (isset($_SERVER['HTTP_IF_NONE_MATCH'])) {
                    fwrite($_debug_fh, "received etag:     {$_SERVER['HTTP_IF_NONE_MATCH']}\n\n");
                }
            }

            if (isset($_SERVER['HTTP_IF_NONE_MATCH']) && ($_SERVER['HTTP_IF_NONE_MATCH']) === $etag) {
                // File in cache hasn't change
                header('Last-Modified: '.gmdate('D, d M Y H:i:s', filemtime($source_file)).' GMT', true, 304);
                exit();
            }
        }
        if (isset($_SERVER['HTTP_IF_MODIFIED_SINCE']) && (strtotime($_SERVER['HTTP_IF_MODIFIED_SINCE']) === filemtime($source_file))) {
            // File in cache hasn't change
            header('Last-Modified: '.gmdate('D, d M Y H:i:s', filemtime($source_file)).' GMT', true, 304);
            exit();
        }

        // Send image headers
        if (in_array($source_ext, array('png', 'gif', 'jpeg', 'bmp'))) {
            header("Content-Type: image/".$source_ext, true);
        }
        else {
            header("Content-Type: image/jpeg", true);
        }
        header('Content-Length: '.filesize($source_file), true);

        // Close debug session if open
        if (DEBUG) {
            fwrite($_debug_fh, "sending file:      {$source_file}\n\n");
            fclose($_debug_fh);
        }

        // Send file
        readfile($source_file);
        exit();
    }

    // DPR value was sent
    elseif(isset($_GET['devicePixelRatio'])) {
        $dpr = $_GET['devicePixelRatio'];

        // Validate value before setting cookie
        if (''.intval($dpr) !== $dpr) {
            $dpr = '1';
        }

        setcookie('devicePixelRatio', $dpr);
        exit();
    }

    // Respond with an empty content
    header('HTTP/1.1 204 No Content', true);

Если вы хотите адаптировать изображения на Wordpress, то тут всё гораздо проще - скачайте плагин «WP Retina 2x».

Итог- получаем сайт, который дружелюбен с Retina-дисплеями и радует качественной графикой.

iPhone Retina Images


Последняя версия с GitHub
Подробнее на retina-images.complexcompulsions.com


Опубликовано: 26 Apr 2013 | Обновлено: 22 May 2013 | Теги: retina, images, php, htaccess