===================================================================
# #
# #
# #
# 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
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
