[TYPO3-english] Re: Responsive image generation

Viktor Livakivskyi invisible.kinder at gmail.com
Thu Sep 11 13:13:39 CEST 2014


Hi, Eraclio.

----------------------------------------------------
> Did you try to change CSS styles? It's faster and simpler way to make images look good for mobile devices: 
> http://basicuse.net/articles/pl/textile/html_css/how_to_resize_images_proportionally_using_css_for_responsive_web_design
> You don't need to make several versions of the one image for different devices. CSS style will resize it automatically, even if it has predefined width and height in HTML.
----------------------------------------------------

This may be an option for some small images, which must stay same across all devices, but it has such a drawbacks:

1) Just imagine, that you need to have image to be shown as 800*400 px  at retina screens - it'll grow up to 1600 * 800 px; and what about 3.0 dpi [1] - this will be 2400 * 1200 px; Now imagine smartphone with 480px screen width and 1.0 dpi with low-speed GPRS connection. Such a huge image will be loaded very slow and eat lot of traffic. So, that is a bad point to give a big image for a small screens.

2) What if image needs to be different on a smaller screens (differnet focal point) [2]? Then you can't reuse same desktop image, but allow editor to add different images for different screen sizes (at least 3: desktop, tablet and mobile)

[1]: http://bjango.com/articles/min-device-pixel-ratio/
[2]: http://designshack.net/articles/css/focal-point-intelligent-cropping-of-responsive-images/


More information about the TYPO3-english mailing list