


  ===================================================================
  #                                                                 #
  #                                                                 #
  #                                                                 #
  #               N  O  T  E  S    &    T  O  D  O  S               #
  #                                                                 #
  #              =====================================              #
  #                                                                 #
  #                      Nevma (info@nevma.gr)                      #
  #                                                                 #
  #                                                                 #
  #                                                                 #
  ===================================================================



********************************************************************************

      ADAPTIVE IMAGES CRUNCH PLUGIN
      =============================

        - NOT A SERVICE
        - NO API KEY
        - FREE AIF
        - LOSSY JPG
        - LOSSLESS PNG
        - PNG2JPG

      Kraken,
      EWWW,
      Smushit,
      TinyJPG,
      TinyPNG,
      ShortPixel,
      Prizm,      => require API key
      EWWW,       => requires API key for JPEGs
      Imsanity,   => has no support for true batch compression
      CW          => has no support for lossy JPEG compression

      <img sizes="(min-width: 300px) 1024px, (min-width: 150x) 300px, 150px"
           srcset="thumbnail.jpg 150w,
           medium.jpg 300w,
           large.jpg 1024w"
           alt="Image description">

      <picture>
          <source srcset="full-size.jpg" media="(min-width: 1024px)">
          <source srcset="large.jpg" media="(min-width: 300px)">
          <source srcset="medium.jpg" media="(min-width: 150px)">
          <img srcset="thumbnail.jpg" alt="Image description">
      </picture>

      Settings

        - max width
        - max height
        - jpeg quality
        - lossy/lossless jpeg
        - png compression level
        - image types to include
        - date before which to delete images

      *** BE SUPER CAREFUL WITH PNGs, ALPHA TRANSPARENCY, ETC
      *** PROCESS IS IRREVERSIBLE - IMAGES CANNOT BE REINSTATED

      Functions

        - Run recursively on a directory
        - Run on WordPress attachments
        - Batch crunch on demand
        - Partial batch crunch on demand
        - WP-Cron batch crunch
        - On image upload crunch
        - Record which images have been crunched in the past
        - Warn that the process is irreversible

      Why

        - Reduce overall website storage
        - Quicker backups
        - Precious SSD storage
        - Reduce page download times

********************************************************************************



  NEXT
  ====

    - TINYPNG AS A SERVICE FOR PNGs
      https://tinypng.com/developers

    - WP Multisite

    - CDN/VARNISH SUPPORT

        *** What about images in CSS?

    - IMMEDIATELY CHECK IF PLUGIN ACTUALLY WORKS

        AND REPORT THE POSSIBLE PROBLEMS, IF ANY

        Pedro.Frota:

        Long story short: since Adaptive Images works in such a transparent manner, one big question for users is
        whether or not it is indeed working. IMHO a visual feedback is the best solution.

    - PERFORMANCE SERVICES CHECK

      - GOOGLE PAGESPEED
      - YAHOO YSLOW
      - TOOLS.PINGDOM

      - AND DOCUMENT IT ACCORDINGLY

    - PLUGINS FOLDER RENAME

        Forum thread: https://wordpress.org/support/topic/hardening-wordpress-breaks-this-plugin/

        define(‘WP_PLUGIN_DIR’, ‘/home/username/public_html/wp-content/newpluginname’);
        define(‘WP_PLUGIN_URL’, ‘http://www.website.com/wp-content/newpluginname’);

    - DOCUMENTATION

      - tools which do not emulate a mobile screen cannot test the plugin results (Google pagespeed, YSlow, GTmetrix,
        Pingdom)

      - one can use Firebug to debug by editing cookies from the cookies tab

      - make a video of the above

      - an extra way to test is by adding the ?resolution= parameter to an image url

      - Getting started section.
      - Better "How to test" that the plugin actually works.
      - What-could-go-wrong section for usual problems.
      - FAQ.
      - A website!

    - NEW SETTINGS

      - Image types to handle
      - PNG colour depth to keep
      - Transform PNGs to PNG8 or not
      - Exceptions for certain images
      - Allow debug or not

    - MODAL CONFIRMATIONS IN PLUGIN SETTINGS BUTTONS

    - SINCE RECURSIVELY TRAVERSING LARGE DIRECTORY STRUCTURES IS QUITE SNAPPY ONE COULD ADD

      - Daily cache calculation
      - Report it to email
      - Report as an admin message
      - Report in a dashboard widget

    - MY JPEG COVERSIONS ARE ALMOST AS GOOD AS THE TINYJPG ONES

        FOR INSTANCE 175KB ~ 162KB

    - Test how much is the storage overhead of the cache for a big site!

    - TESTS

      - Test with NextGEN.
      - WP content outside of installation
      - W3 Total Cache compatibility
      - WP Super Cache compatibility

    - VARIOUS

      - Testing: set up functions in a way that the image generation can be tested.
      - Functions prefix "ai_".
      - WordPress 3.0 and down allow the "+"" character in filenames.
      - In "?debug=true" mode, after the "image requested" part, show "image to be send" info
      - Use PHP::exec for cache purge and cache size calculation
      - Does this plugin work for you? Then say so! Mail, tweet, like, etc.
      - Resize (crunch) even the original images!
      - Upscale images (smoothly)?
      - This plugin has server XXX images successfully
      - This plugin happily serves XXX images from its cache
      - This plugin happily serves XXmb from its cache
      - Rewrite rule should contain the NC flag (case insensitive).
        RewriteRule \.(?:jpe?g|gif|png)$ /adaptive-images/adaptive-images-script.php [NC,L]




  Responsive image art direction
  ==============================

    Default anchors and zoom levels

      1. zoom level 1, 2, 3...
      2. anchor in image

        ----------------
        | tl   tc   tr |
        |              |
        | ml   mc   mr |
        |              |
        | bl   bc   br |
        ----------------

      3. different aspect ratio/dimensions

        - by breakpoint
        - by orientation

        https://usecases.responsiveimages.org/#art-direction/
        http://davidwalsh.name/responsive-images/
        https://developers.google.com/web/fundamentals/media/images/images-in-markup/
        https://css-tricks.com/which-responsive-images-solution-should-you-use/
        http://www.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/



  Compatibility
  =============

  - NginX

      location assets {
      }

      location ai-cache { ==> *** THE CACHE DIR ***
      }

      location / {
        rewrite \.(?:jpe?g|gif|png)$ /adaptive-images.php; ==> *** THE PHP SCRIPT ***
      }

      also as it happened here https://wordpress.org/support/topic/plugin-not-working-nginx/ this also worked: 
      
          location ~ /wp-content/(themes|uploads) {
              rewrite \.(?:jpe?g|gif|png)$ /wp-content/plugins/adaptive-images/adaptive-images-script.php;
          }

      WP Engine
      https://help.wpengine.com/hc/en-us/requests/1125237
      location ~ \.(jpe?g|gif|png) {
          proxy_pass http://localhost:6789; 
      }
      Also made a note of this in the forum: https://wordpress.org/support/topic/wp-engine-setup-instructions-for-adaptive-images/

  - Varnish

    Pressidium for configuration

    Or

    The ingenious idea to use url parameters on the image sources via Javascript, as proposed by a guy in the forum.



  Unit tests for image generation
  ===============================

  - PNG
  - PNG8
  - PNG256
  - PNG with alpha
  - PNG with trasparency
  - GIF
  - GIF with trasparency
  - JPEG

  (Compare with services like TinyPNG, etc.)



  Also check
  ==========

  - https://wordpress.org/plugins/ricg-responsive-images/
  - https://wordpress.org/plugins/responsify-wp/
  - WURFL.IO service (and my plugin)
  - https://usecases.responsiveimages.org/#art-direction/
  - http://davidwalsh.name/responsive-images/
  - https://developers.google.com/web/fundamentals/media/images/images-in-markup/
  - https://css-tricks.com/which-responsive-images-solution-should-you-use/
  - http://www.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/



  Future ideas
  ============

  - Put the stylings in separate CSS files.
  - Ask users to rate plugin after x-images have been cached.
  - Ajax calculate image cache size.
  - Ajax cleanup image cache size.
  - Report all folders and files in cache.
  - Per image cache purge.
  - Purge image cache beyond a size.
  - Per breakpoint cache purge.
  - Notify about cache size in WP cron, in WP admin, perhaps an email to the admin.
  - What if a user actually wants to see the full version of an image, even in a mobile network?
  - When an image is deleted in the media gallery then its resized versions should be deleted, too.
  - When breakpoints are changed delete the cache directories of the unused breakpoints to clean up.
  - Original adaptive images PHP script error log is output inside the plugin files.
  - Send original images to search engine bots to preserve their metadata.



  Plugin needs 3 settings in order to function properly
  =====================================================

  1. database options set
  2. htacess file bit inserted
  3. user settings php file created



  Test cases to check with each version
  =====================================

  - Clean install
  - Deactivate then activate
  - Version 0.2.08 upgrade
  - Older version upgrade
  - Print debug info
  - Images correctly sent at each breakpoint
  - Uninstall cleanup
  - Images to test
    - JPG
    - GIF
    - GIF with transparency
    - PNG
    - PNG with transparency
