Joomla! Plugin PXLCompressor – Image compression made simple

PXLCompressor is a free Joomla! plugin, which allows you to compress and resize every image uploaded with the media manager automatically. This is especially useful if the uploaded images are not preprocessed and allows you to speed up your website drastically.

Features:

  • Automagically resize every image uploaded with the media manager component on the fly
  • Improve page speed by decreasing file sizes
  • Chose a scale method according to your needs (scale inside / outside / fit / fill)
  • Set compression levels for png/jpeg files
  • Supported file formats: JPG, PNG and GIF
  • Create thumbnails

Currently, the following image compression services are supported, but there might be more to come:

  • ReSmush.it: a free image optimization service with unlimited number of compression. It supports the most common file types like (PNG, JPG, GIF, BMP and TIF). However: The JImage class of Joomla! framework does not seem to support TIF, so compression of .tif files is currently not enabled.
    Only downside: the maximum size of a file is 5MB, but if you enable resizing, which is done before, it is very unlikely that you will ever reach this size
  • TinyPNG: the web service allows you to compress your PNG and JPG files. You can subscribe for a free plan enabling you to compress 500 images per month without any charges. Simply fill in your API key to get started.

If you enable both compression services and TinyPNG fails for any reason, ReSmush will be used as a fallback.

It is planned to support local compression using optipng/gifsicle/jpegoptim in later versions.

Special thanks to Viktor Vogel for creating the plugin EIR, from which I took larger parts of the code.

If you found a bug or have a feature request, please file a report on github or leave a comment.

Changelog:

v. 1.0.2 fixed bogus error message
v. 1.0.1 minor Bugfixes

Grab the latest version here: https://github.com/pixelstunde/joomla_plg_pxlcompressor/releases or at JED

Vollbild-Suchfenster ohne JavaScript (reines CSS)

Ich habe letztens auf einer Website eine clevere Variante einer Vollbild-Suchfunktion gesehen. Es gab einen Suchbutton, der auf einen Klick ein Overlay mit einer Suchbox aktivierte. Dazu wurde JavaScript (jQuery) genutzt.

Auch wenn ich die Idee und die optische Umsetzung ganz gut fand, war ich von der technischen Realisierung nicht besonders begeistert, obwohl grundsätzlich nicht mehr viel gegen JavaScript einzuwenden ist. Allerdings erfordert diese Art der Umsetzung das Einbinden und Laden bestimmter JavaScript Libraries und Plugins, die wiederum Einfluss auf Ladezeit und Performance haben.

Ich habe mich also mal an eine einfache Lösung gesetzt, die auf reinem CSS beruht. Dabei habe ich den :target „Hack“ genutzt. Ein Klick auf einen Anchor-Link „aktiviert“ dabei das Overlay. Der Browser springt auf einen bis dahin verborgenen Bereich der Website, der erst als aktives Ziel (:target-Selektor) sichtbar wird.

 

Ich habe dazu eine kleine Demo auf CodePen veröffentlicht:

https://codepen.io/pixelstunde/pen/QvMxVR

Den Code kann natürlich jeder frei und ohne Angabe einer Quelle nutzen (CC0-Lizenz).

Das JavaScript wurde nur eingebunden um verschiedene Animations-Arten zu demonstrieren.