search

integr8ly / tutorial-web-app

Solution Explorer provides the front door into the Integreatly initiative. It hosts the various Solution Patterns, as well as providing a dashboard of installed applications/products/services.
Apache License 2.0
36 stars 54 forks source link

Graphics load times seem long #221

Closed mfrances17 closed 5 years ago

mfrances17 commented 5 years ago

Originated from the UXD Team Feedback table: https://docs.google.com/document/d/1_AhqX8rPaZ2mfO-cI4lkhGbJLKLTWpo4HcCJ_KRhDjM/edit#heading=h.bjkplule4p3l

Loading time on success state is a bit slow - is there any way to speed this up?

Look at optimizing the background images so they load quicker (maybe just try progressive load, at the very least)

AdamJ commented 5 years ago

Currently, all background images are also given a default color (resembling the main color of the image), in order to provide something other than a white background while the image loads.

To test the speed at which the images appear, you can set the Chrome Developer Tools to run over a 3g network.

AdamJ commented 5 years ago

@bdellasc - is this something where you want to just supply smaller logos or compress them more?

bdellasc commented 5 years ago

I guess some guidance on dimensions would be helpful. I believe I made them larger physical dimensions and higher resolution to render on hi-res screens. Maybe we can do some side-by-side tests to see what would be least visually detrimental to the image quality and give us better loading speeds? I can work with you next week on that.

AdamJ commented 5 years ago

After talking with Brian, it was determined that images matching the dimensions found here: https://github.com/patternfly/patternfly-next/tree/master/static/assets/images under pfbg_###.jpg are needed.

These images would then translate into CSS that would render the different sized images based on media queries, targeting both viewport size, pixel ratio (1x vs 2x), and resolution DPI.

bdellasc commented 5 years ago

@mindreeper2420 - I did a first pass on the images, but was unhappy with how the pattern band scaled for some sizes. I'm going to spend some time cleaning them up before I post them for consumption.

bdellasc commented 5 years ago

@mindreeper2420 try these out

congratsbg_576 congratsbg_576 2x congratsbg_768 congratsbg_768 2x congratsbg_992 congratsbg_992 2x congratsbg_1200 congratsbg_2000 loadingbg_576 loadingbg_576 2x loadingbg_768 loadingbg_768 2x loadingbg_992 loadingbg_992 2x loadingbg_1200 loadingbg_2000

AdamJ commented 5 years ago

Completed with the merge of the referenced PR.