TYPO3-Extension for Responsive Images
- images are displayed in an appealing way in all end devices
- suitable image size in PC views, tablets and smartphones
- easy handling due to predefined size ratios
Images Fitting in All Screen Sizes and Devices
Since the development of solutions for responsive designs, from TYPO3 version 6.2 LTS onwards, we have already been using the TYPO3 extension "a7images" that we developed. This ensures suitable image sizes in all end devices and screen sizes, from large PC views to laptops, small tablets and smartphones.
In contrast to the TYPO3 standard, the extension does not work with fixed pixel specifications for the image size, but instead specifies the width of the image area as a percentage and in relation to the text area, which enables flexible display in different screen sizes. Text wrapping is also omitted to avoid unsightly views at smaller resolutions. In addition, a7images offers predefined size ratios that directly ensure a good layout and appealing presentation of your images in all views. Additional settings are not necessary by default, but can easily be made for fancy representations of images.
Supplementary Extensions for Image Optimization
In order to further optimize the images on your website, two additional extensions can be used: "a7imageoptim" and "image_autoresize".
The extension a7imageoptim, developed by a7digital, reduces the file size of images when they are stored in TYPO3, i.e. when TYPO3 uploads or creates scaled-down versions, without visibly reducing the image quality. If this extension is used, the extension a7images additionally offers the special function to give all images that generate an img tag by image references (which is standard in TYPO3 since version 6) corresponding srcset attributes. With this you can - simply said - offer smaller versions of an image to the browser, if for example the image should not be displayed in its original size but smaller in smaller screen sizes. For users this has the advantage that a smaller image can be loaded faster, where the full resolution would be unnecessary.
The TYPO3 extension image_autoresize reduces the images during upload to the size specified for the respective folder while maintaining the image proportions. In addition, it can convert formats such as .bmp or .tif into web-suitable formats such as .jpg or .png.
Interesting Features of the a7images at a Glance
- calculates the appropriate image sizes taking into account various criteria such as number of images, position besides the text and various layout-dependent settings
- predefined proportions, which ensure a good layout and display of the images on all devices without additional settings
- easy setting options for more fancy display
- in combination with the TYPO3 extension a7imageoptim it offers the use of srcsets, which provide images in a configurable number and size, from which the browser fetches the appropriate image for the current screen size (see above)
Use of the Extension
This extension developed by a7digital is not represented in the TYPO3 Extension Repository (TER) until further notice, because there is no manual for it and the extension has only been extensively tested in the context of certain TYPO3 installations. Nevertheless, we describe it here, because it is an illustrative example for individual programming.
Contact us
Mon - Fri: 8:00 am - 7:00 pm
+ 49 (0) 451 48 97 83 38
This is not a web site of TYPO3 Association, who is the owner of the trademark TYPO3. [more]
