As developer, all icon sizes should be standardized

[mzedeler]

The icons that we use have irregular dimensions which in turn makes our style sheets very complex. This task: figure out which standard dimensions we are going to use, and convert the icons we have to those dimensions.

The current state is:

Image	Dimensions	Palette
add_bookmark_icn_18_dark.png	25 x 18	8-bit/color RGBA, non-interlaced
add_bookmark_icn_18.png	25 x 18	8-bit/color RGBA, non-interlaced
add_bookmark_icn_36_dark.png	50 x 36	8-bit/color RGBA, non-interlaced
add_bookmark_icn_36.png	50 x 36	8-bit/color RGBA, non-interlaced
arrow_icn_16.png	16 x 16	8-bit/color RGBA, non-interlaced
arrow_icn_18.png	18 x 18	8-bit/color RGBA, non-interlaced
arrow_icn_34.png	34 x 34	8-bit/color RGBA, non-interlaced
arrow_icn_36.png	36 x 36	8-bit/color RGBA, non-interlaced
back_btn_18.png	25 x 18	8-bit/color RGBA, non-interlaced
back_btn_36.png	50 x 36	8-bit/color RGBA, non-interlaced
bookmark_list_icn_18_dark.png	16 x 18	8-bit/color RGBA, non-interlaced
bookmark_list_icn_18.png	16 x 18	8-bit/color RGBA, non-interlaced
bookmark_list_icn_36_dark.png	36 x 36	8-bit/color RGBA, non-interlaced
bookmark_list_icn_36.png	35 x 36	8-bit/color RGBA, non-interlaced
book_settings_icn_18.png	30 x 18	8-bit/color RGBA, non-interlaced
book_settings_icn_36.png	63 x 36	8-bit/color RGBA, non-interlaced
coming_icn_30.png	25 x 25	8-bit/color RGBA, non-interlaced
coming_icn_50.png	50 x 50	8-bit/color RGBA, non-interlaced
default-cover.png	52 x 80	8-bit/color RGB, non-interlaced
delete_icn_16.png	16 x 16	8-bit/color RGBA, non-interlaced
delete_icn_18_white.png	18 x 18	8-bit/color RGBA, non-interlaced
delete_icn_32.png	32 x 32	8-bit/color RGBA, non-interlaced
delete_icn_34.png	34 x 34	8-bit/color RGBA, non-interlaced
delete_icn_38_white.png	36 x 36	8-bit/color RGBA, non-interlaced
delete_icon_32.png	32 x 32	8-bit/color RGBA, non-interlaced
delete-list-icn_36.png	36 x 36	8-bit/color RGBA, non-interlaced
delete-list-icn.png	18 x 18	8-bit/color RGBA, non-interlaced
empty_bookshelf_hires.png	479 x 80	8-bit/color RGBA, non-interlaced
empty_bookshelf.png	240 x 40	8-bit/color RGBA, non-interlaced
forward_btn_18.png	25 x 18	8-bit/color RGBA, non-interlaced
forward_btn_36.png	50 x 36	8-bit/color RGBA, non-interlaced
index_icn_18_dark.png	25 x 18	8-bit/color RGBA, non-interlaced
index_icn_18.png	25 x 18	8-bit/color RGBA, non-interlaced
index_icn_36_dark.png	50 x 36	8-bit/color RGBA, non-interlaced
index_icn_36.png	50 x 36	8-bit/color RGBA, non-interlaced
more_icn_18_active.png	18 x 18	8-bit/color RGBA, non-interlaced
more_icn_18.png	18 x 18	8-bit/color RGBA, non-interlaced
more_icn_36_active.png	36 x 36	8-bit/color RGBA, non-interlaced
more_icn_36.png	36 x 36	8-bit/color RGBA, non-interlaced
new_icn_25.png	25 x 25	8-bit/color RGBA, non-interlaced
new_icn_50.png	50 x 50	8-bit/color RGBA, non-interlaced
nota-back.png	18 x 18	8-bit colormap, non-interlaced
nota-forward.png	18 x 18	8-bit colormap, non-interlaced
nota-play.png	18 x 18	8-bit colormap, non-interlaced
nowplaying_36.png	36 x 36	8-bit/color RGBA, non-interlaced
nowplaying.png	18 x 18	8-bit/color RGBA, non-interlaced
pause_btn_18.png	25 x 18	8-bit/color RGBA, non-interlaced
pause_btn_36.png	50 x 36	8-bit/color RGBA, non-interlaced
play_btn_18.png	25 x 18	8-bit/color RGBA, non-interlaced
play_btn_36.png	50 x 36	8-bit/color RGBA, non-interlaced
recommend_icn_25.png	25 x 25	8-bit/color RGBA, non-interlaced
recommend_icn_50.png	50 x 50	8-bit/color RGBA, non-interlaced
search_icn_25.png	25 x 25	8-bit/color RGBA, non-interlaced
search_icn_50.png	50 x 50	8-bit/color RGBA, non-interlaced
search_menu_icn_18.png	18 x 18	8-bit/color RGBA, non-interlaced
search_menu_icn_36.png	36 x 36	8-bit/color RGBA, non-interlaced
settings_menu_icn_18.png	18 x 18	8-bit/color RGBA, non-interlaced
settings_menu_icn_36.png	36 x 36	8-bit/color RGBA, non-interlaced
settings_profile_icn_25.png	25 x 25	8-bit/color RGBA, non-interlaced
settings_profile_icn_32.png	32 x 32	8-bit/color RGBA, non-interlaced
settings_profile_icn_36.png	36 x 36	8-bit/color RGBA, non-interlaced
settings_profile_icn_64.png	62 x 62	8-bit/color RGBA, non-interlaced
settings_profile_icn_72.png	72 x 72	8-bit/color RGBA, non-interlaced
share_icn_18.png	23 x 18	8-bit/color RGBA, non-interlaced
share_icn_18_white.png	22 x 18	8-bit/color RGBA, non-interlaced
share_icn_36.png	45 x 36	8-bit/color RGBA, non-interlaced
share_icn_36_white.png	44 x 36	8-bit/color RGBA, non-interlaced
tegneserie_icn_25.png	25 x 25	8-bit/color RGBA, non-interlaced
tegneserie_icn_50.png	50 x 50	8-bit/color RGBA, non-interlaced
top10_icn_30.png	30 x 30	8-bit/color RGBA, non-interlaced
top10_icn_60.png	60 x 60	8-bit/color RGBA, non-interlaced

The list above was generated using this:

file *.png | perl -pe 's/^/|/; s/:\s+/|/; s/PNG image data, //; s/(\d+ x \d+),\s+/$1|/; s/$/|/'

[saebekassebil]

We could also probably concatenate most of the UI icons together into CSS sprites, which would reduce latency (in requesting one or two files instead of 72 separate requests).

[mzedeler]

Yes. compass can do this for us.

[mzedeler]

Large.

[mzedeler]

Tasks:

• Identify set of standard icon sizes, and adjust icons sizes accordingly: 5 hours.
• (Optional) make Compass generate CSS (two - retina and standard) sprites: 5 hours.
• Adjust CSS: 5 hours.

[mzedeler]

points: 15.

[everhoej]

Done