Responsive images, fluid images | Scene7

We are designing our website using responsive design techniques. What are our options regarding Scene7 images?

Solution

Follow these recommendations for responsive images in Scene7:

Make sure that images are at least 2000 pixels at the longest dimension. Typical image sizes range from 1500 to 2500 pixels in the longest dimension. Use lossless image formats, including TIFF and PNG files. If you use a JPEG image, use the highest quality settings.

If you upload high-quality images, they are served in good quality to all devices. Scene7 technology can then help with responsive design because you can supply the wid, hei, and jpeq quality in the image call.

Using your desired web-programming techniques, you can code your web page to request an image using the appropriate settings for the current screen size.

Here is an example URL: http://s7g4.scene7.com/is/image/TechSupportEU/Backpack_B?wid=1000&qlt=70

Notice the difference in the size in KB of the image if you change the size or the quality.

It’s not necessary to add much page weight by requesting high-resolution images. Total page weight is a concern if you have already implemented a truly responsive design.

You can read more information about using different image sizes and quality settings here:

http://blog.netvlies.nl/design-interactie/retina-revolution/ http://filamentgroup.com/lab/rwd_img_compression/

Additionally, here is an RWD using Scene7 whitepaper from Crown Partners:

http://www.crownpartners.com/news/adobe-scene7-responsive-web-design

Direct PDF URL: http://www.crownpartners.com/sites/all/files/Adobe%20Scene7%20For%20Responsive%20Design.pdf