O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

[INFOGRAPHIC] Progressive Image Rendering and the User Experience: Good or Evil?

3.018 visualizações

Publicada em


There have been countless studies demonstrating the relationship between faster web pages and improvement to a vast array of business metrics. For most websites, images represent a huge untapped area of opportunity for optimizing performance as images comprise more than half of a typical page’s weight. While default image rendering formats rarely result in the best possible user experience, optimizing images is necessary to serve a better, faster user experience.

To make pages faster, site owners need to take advantage of every available image optimization technique. Therefore, we went to the neuroscience lab to see if we could definitively answer the question: which image format results in happier users?

Visit here: http://www.radware.com/social/neurostrata-fall2014/ to learn more and to download the "Progressive Image Rendering: Good or Evil" Report.

Publicada em: Tecnologia
  • Entre para ver os comentários

[INFOGRAPHIC] Progressive Image Rendering and the User Experience: Good or Evil?

  1. 1. if you build websites, chances are you have a strong opinion about what type of image format delivers the best possible user experience. You might believe that by loading images progressively, you improve perceived performance by showing the user something while they look at the screen. Or you could believe that watching an image load progressively increases user frustration. We took these assumptions to the neuroscience lab to see if we could definitively answer the question: which image format results in happier users? Standard lossless image. Using automated facial coding technology that measures moment‘ Lossy image that is carefully degraded using by-moment emotional responses in a DCIM (Digital Camera Images) human . . . vision algorithm, resulting in a 5% loss in famal m'Cr°'eXpreSS'0nS’ We extracted quality with a much smaller total file size. data about 280 users’ perception of these three different image formats as Image is downloaded in lower resolution, users performed online transactions displayed, then «progressively: downloaded on a set of ecommerce sites; and redisplayed until the full resolution shown. In a survey of our testers, more than half (51.4%) wait for most or all of a page's images to load before they begin to interact with the page. Straight away, as soon as I wait for most of the I wait until all the images Not sure the text appears images to load have completely loaded Two out of three people say that they have been frustrated by slow image loading. Yes No Only if it's really slow Not sure Perfectlmage resulted in the highest average level of happiness overall. 0.12 0.10 0.08 0.06 0.04 0.02 0.00 0R| G|NAL PI PJ Perfectlmage achieved the highest peak of happiness during the second-by-second traces throughout each transaction. Progressive JPEGs have a strong peak during the initial phase of the online experience, when pages are more likely to use large “hero images”, this positive reaction drops off to a considerably lower level and then plunges towards the middle and end of the transaction. 0R|0|NAL PI PJ MALE FEMALE Women and men had significantly different responses to the three image rendering methods. While both genders had similar overall preferences for Perfectlmage, the overall traces and number/ intensity of happiness peaks amongst the men were more comparable for the three methods. WHICH IMAGE RENDERING TECHN|0UE WAS THE WINNER? Perfectlmage — the technique that degraded image quality by 5% but rendered faster than the Original format — emerged as the clear winner overall. TECHNIQUE ORIGINAL PERFECTIMAGE PROGRESSIVE JPEG D I D Default image rendering formats rarely result in the best possible user experience. To make pages faster, site owners should take advantage of every available image optimization technique. There are a number of best practices for helping images render faster. Consolidating images means fewer round trips to and from the host server l_ ‘I LBJ I U I D O I U I I O C O C I C I O 9 I C Smaller files equal faster load times IE: 0 I 9 O O I I 9 I O I I D I O C U D I 5 Make sure key images load first instead of last Images saved to the wrong format can be several times too large I21-+@ Delay loading "below the fold" images Anticipate the next page a visitor is likely to visit, then load resources 2’. = j into the browser cache it 1,: _ - ii % IEJIEIIEJ O O O O D C D O C D C I I C D C I O C O O I I I C O C O C O O I I I I I DOWNLOAD THE FREE REPORT Progressive Image Rendering: Good or Evil? http: //www. radware. coin/ neurostratafalI2014 00.. © 2014 Radware. Ltd. All rights reserved. I www. radware. com 0:0 l'adWal'e

×