Image resize and optimization

Introduction

Go Mobile for Plone provides facilities to automatically optimize images for mobile screens. This includes shrinking chosen images, modifying HTML content to handle floating images better and caching the resulting optimized images.

Resizing

Since mobile screen come in various sizes and shapes, this is necessary for optimal page viewing experience.

Automatic resizing is based on browser :doc:'user agent detection </user-manual/sniffing>'_.

Defloating

Also, content images are defloated. This means that mobile page viewers do not try to wrap text around left or right of the image, because mobile screens do not have space for this. Instead, images are centered and image width tries to match screen width (some padding included).

Default resize algorithm

This is applied to page body text containing images.

  • All images are defloat
  • Images are centered
  • The image is resized to browser screen width
  • 10 px padding is added around image borders, so that scrollbar etc. user interface elements won't overlap the image

Resizing your own stuff

By default, all page body text is run through the resizer

  • All <img> tags are rewritten so that images go through mobile resizer, this is done by gomobiletheme.basic document_view template overriding the default Plone template for pages
  • Also external image sources with full http:// address are supported in <img> tags. In this case, Python urllib is used to retrieve the external image to your own server.

You can also explicitly use resizer on specific site elements, like logo, in your theme code. For more information, see Transformations in Developer Manual.

Resizer cache

File system based cache is used for resized images. The following cache keys are used

  • image width
  • image height

meaning that the same result image should not be generated twice.

Image cache folder is defined by image_resize_cache_path setting. It is full path to the folder. Plone user must have write and read access to that path.

Clearing cache

Currently cache must be cleaned manually using a cron job if it grows too much. There is no cache garbage collection.

You can clear the cache if you know your image_resizer_secret in settings. Navigate to URL:

http://yourhost:8080/Plone/@@mobile_image_processor_clear_cache?secret=*your_image_resizer_secret*

This triggers gomobile.mobile.imageprocessor.ClearCacheView code.