The adaptive-images from umaar

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    
    <style>
      body {
        width : 90%; margin : 1em auto;
        background : #333; color : #aaa; font : 100%/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; }
      h1, h2, h3, h4, h5, h6 {
        color : #fff; }
      p code { color : #99e; }
      pre > code { display : block; padding : 1em; border : 1px solid #999; }
      :target { background-color : #000;}
      
      a,a:visited{ color : #99f; }
    </style>
  </head>

  <body>
    <h1>Adaptive-Images Instructions</h1>
    <h2>Basic instructions</h2>
    <p>Copy <code>adaptive-images.php</code> and <code>.htaccess</code> into the root directory of your site. If you already have a htaccess file DO NOT OVERWRITE IT, skip down to the advanced instructions.</p>
    <p>Create a directory called <code>ai-cache</code> in the root of your site and give it write permissions (CHMOD 777).</p>
    <p>Copy the following Javascript into the &lt;head&gt; of your site. It MUST go in the head because it needs to work before the page has finished loading, and before any images have been requested.</p>
<pre><code>&lt;script&gt;document.cookie='resolution='+Math.max(screen.width,screen.height)+'; expires=; path=/';&lt;/script&gt;</code></pre>
    <p>That's it, you're done.</p>
    <p>NOTE: you do not need the <code>ai-cookie.php</code> file unless you are using the <a href="#alternate">alternate method</a> of detecting the users screen size. So delete it if you like, no one likes mess.</p>
    
    <h2>You already have a .htaccess file</h2>
    <p>I strongly advise you to duplicate that file so you can revert to it if things go pear-shaped.</p>
    <p>Open your existing .htaccess file and edit the contents. You'll need to look and see if there is a section that begins with the following:</p>
    <p><code>&lt;IfModule mod_rewrite.c&gt;</code></p>
    <p>If there is, then you need to add the following lines into that block:</p>
    
<pre><code># Adaptive-Images -----------------------------------------------------------------------------------

# Add any directories you wish to omit from the Adaptive-Images process on a new line, as follows:
# RewriteCond %{REQUEST_URI} !some-directory
# RewriteCond %{REQUEST_URI} !another-directory

RewriteCond %{REQUEST_URI} !assets

# Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above directories
# to adaptive-images.php so we can select appropriately sized versions
RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php

# END Adaptive-Images -------------------------------------------------------------------------------</code></pre>

<p>If you don't have a code block then simply copy and paste the following into your file instead:</p>

<pre><code>&lt;IfModule mod_rewrite.c&gt;
  Options +FollowSymlinks
  RewriteEngine On

  # Adaptive-Images -----------------------------------------------------------------------------------

  # Add any directories you wish to omit from the Adaptive-Images process on a new line, as follows:
  # RewriteCond %{REQUEST_URI} !some-directory
  # RewriteCond %{REQUEST_URI} !another-directory

  RewriteCond %{REQUEST_URI} !assets

  # Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above directories
  # to adaptive-images.php so we can select appropriately sized versions
  RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php

  # END Adaptive-Images -------------------------------------------------------------------------------
&lt;/IfModule&gt;</code></pre>

    <h2>Additional settings and configuration</h2>
    <h3>.htaccess</h3>
    <p>Instructions are in the file as comments (any line that starts with a # is a comment, and doesn't actually do anything)</p>
    <p>Follow the instructions inside that code to specify any directories you don't want to use Adaptive-Images on.</p>
    
    <h3>PHP</h3>
    <p>You can now open the php file and have a play with the settings that are in the CONFIG area. By default it looks like this:</p>
      
<pre><code>/* CONFIG ----------------------------------------------------------------------------------------------------------- */

$resolutions   = array(1382,992,768,480,320); // the resolution break-points to use (screen widths, in pixels)
$cache_path    = "ai-cache"; // where to store the generated re-sized images. This folder must be writable.
$jpg_quality   = 80; // the quality of any generated JPGs on a scale of 0 to 100
$sharpen       = TRUE; // Shrinking images can blur details, perform a sharpen on re-scaled images?
$watch_cache   = TRUE; // check that the responsive image isn't stale (ensures updated source images are re-cached)
$browser_cache = 60*60*24*7; // How long the BROWSER cache should last (seconds, minutes, hours, days. 7days by default)
$mobile_first  = TRUE; // If there's no cookie sends the mobile version (if FALSE, sends largest $resolutions version)

/* END CONFIG ----------------------------------------------------------------------------------------------------------
------------------------ Don't edit anything after this line unless you know what you're doing -------------------------
--------------------------------------------------------------------------------------------------------------------- */</code></pre>
  <p><code>$resolutions</code> are the screen widths we'll work with. In the default it will store a re-sized image for large screens, normal screens, tablets, phones, and tiny phones.</p>
  <p>In general, if you're using a responsive design in CSS, these breakpoints will be exactly the same as the ones you use in your media queries.</p>
  <p><code>$cache_path</code> If you don't like the cached images being written to that folder, you can put it somewhere else. Just put the path to the folder here and make sure you create it on the server.</p>
  <p><code>$sharpen</code> Will perform a subtle sharpening on the rescaled images. Usually this is fine, but you may want to turn it off if your server is very very busy.</p>
  <p><code>$watch_cache</code> If your server gets very busy it may help performance to turn this to FALSE. It will mean however that you will have to manually clear out the cache directory if you change a resource file</p>
  <p><code>$mobile_first</code> If set to TRUE and no cookie is set, Adaptive Images will send the mobile-resolution version of the requested image. If set to FALSE it will send the largest version set in the $resolutions array.</p>
  
<h2 id="alternate">Alternate method for those who can't rely on JavaScript</h2>

<p>One of the weaknesses of the Adaptive Images process is its reliance on JavaScript to detect the visitors screen size, and set a cookie with that screen size inside it. The following is a solution for people who need the system to work without the use of JavaScript, but it does have a major caveat which is why this is not the default method, and why it is "unsupported" (I'm not going to troubleshoot problems you have with this method).</p>

<h3>The alternative method</h3>
<p>Do not use the JavaScript as explained above, but instead, ABOVE your normal CSS, add the following into the head:</p>
<pre><code>&lt;style&gt;
 @media only screen and (max-device-width: 479px) {
   html { background-image:url(ai-cookie.php?maxwidth=479); } }
 @media only screen and (min-device-width: 480px) and (max-device-width: 767px) {
   html { background-image:url(ai-cookie.php?maxwidth=767); } }
 @media only screen and (min-device-width: 768px) and (max-device-width: 991px) {
   html { background-image:url(ai-cookie.php?maxwidth=991); } }
 @media only screen and (min-device-width: 992px) and (max-device-width: 1381px) {
   html { background-image:url(ai-cookie.php?maxwidth=1381); } }
 @media only screen and (min-device-width: 1382px) {
   html { background-image:url(ai-cookie.php?maxwidth=unknown); } }
&lt;/style&gt;</code></pre>
<p>If you use this method you will need to ensure the widths here match those in your adaptive-images.php file, you will also need to have the <code>ai-cookie.php</code> file in the root of your website (no one else needs this file).</p>

<h3>The caveat</h3>
<p>Using this method instead of the JS method makes it likely that on the very first visit to your site, the images sent to the visitor will be the original full-scale versions. However, ALL subsequent pages on your site will work properly. What that means is that, really, this solution is only viable if you've got $mobile_first set to FALSE. Otherwise, the majority of people who visit your site will experience images too small for their computer on the very first visit.</p>
<p>The reason is to do with how browsers load web pages. The first thing a browser does is load the HTML, in the order it's written - so for a normal AI install it loads the HTML and see's the embeded JavaScript and immediately executes that JavaScript - which writes the cookie. It then carries on loading the rest of the page in the order it finds it. Long story short - it means that when it finds an image tag and asks the server for it, it already has a cookie stored.</p>
<p>That's not likely to be the case if you use the CSS method. Because the CSS method relies on an external file - it has to ask the server for the "background-image", which is really just a bit of PHP to set a cookie. The problem is that when a browser loads external files like that, it doesn't stop loading the HTML, it carries on doing that at the same time as waiting for the external file. Which means that it can get to an image tag before the server has finished loading that PHP file. Which means no cookie is set. Which means that if $mobile_first is TRUE the mobile sized image is sent. But, only on that very first page load.</p>
  </body>
</html>
umaar / adaptive-images Goto Github PK

adaptive-images's Introduction

adaptive-images's People

Contributors

Stargazers

Watchers

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent
