squeezr
squeezr copied to clipboard
Another take on device-aware adaptive images and server side CSS3 media queries
squeezr ![Build Status](https://travis-ci.org/jkphl/squeezr.svg?branch=master)
is basically just another take on improving browsing experience across the ever-growing multitude of web enabled devices. It can help you preserve your visitor's bandwidth by shrinking your website's images and CSS files to fit the device-specific limitations.
squeezr can easily be applied to any website that meets the requirements – be it a collection of plain HTML files or rendered by a full-blown CMS – and does not require any remarkable change to your source code. As a means of responsive web design it is to be used in combination with fluid image techniques.
What squeezr does
Currently squeezr consists of two engines that can be used independently of each other:
-
The image engine automatically resizes images so that they don't exceed your visitor's screen size. The resulting image variants get cached to disk for optimized follow-up request performance.
squeezr's image engine is heavily inspired and influenced by Matt Wilcox' Adaptive Images. At the same time, squeezr tries to overcome some drawbacks of Matt's approach.
-
The CSS engine creates and caches device-specific CSS file variants by stripping out irrelevant CSS3 media query sections on the server side before delivering them to the client. Optionally also CSS minification can be applied (using Minify), potentially reducing CSS file size even further.
You can find a complete description of squeezr's functions and configuration options at http://squeezr.it.
Installation
- Get the latest version by cloning this repository or downloading and unpacking an archive from the squeezr website.
- Open a console, switch to squeezr's root directory and let Composer pull in all required dependencies:
composer install
- Customize the 3 configuration files (common / global settings file and one for each of the engines) in the
/squeezr/conf/*
directory to your needs. - Upload the
/squeezr
directory to your website root and make sure the webserver has write privileges for the subdirectory/squeezr/cache
. - Upload the included
.htaccess
file to your website root only in case you don't already have a file with this name. Otherwise, thouroughly incorporate the contained rewrite rules into your existing.htaccess
. - Include the client JavaScript into your HTML pages. Please see the squeezr website for details on this. That's all – you're done now and squeezr should be up and running.
Please visit the squeezr website for further instructions and configuration options.
Requirements
- On the client side:
- JavaScript support
- Cookie support
- On the server side:
- Apache 2.2+ with mod_rewrite
- PHP 5.3+
- GD (Image engine only; mostly standard with PHP)
Legal
Copyright © 2017 Joschi Kuphal [email protected] / @jkphl
As of version 1.0.3, squeezr is licensed under the terms of the MIT license. Before that, a Creative Commons Attribution 3.0 Unported License applied.