Skip to content

Instantly share code, notes, and snippets.

@thomastheyoung

thomastheyoung/thumbnails.md

Created September 9, 2014 01:00
Show Gist options
  • Save thomastheyoung/154051695460d51afb40 to your computer and use it in GitHub Desktop.
Save thomastheyoung/154051695460d51afb40 to your computer and use it in GitHub Desktop.
Download ZIP
Thumbnail calculations
Raw
thumbnails.md

Mobile Web Devices Usage

TL;DR: The final most common thumbnail sizes

133x74 (2.7%)

Samsung GT-S5360 Galaxy Y, Samsung GT-S5830i Galaxy Ace

200x112 (8.6%)

Samsung GT-18190 Galaxy S3 Mini, Nokia Lumia 520, Samsung GT-S7562 Galaxy S Duos, Samsung GT-S7582 Galaxy S Duos 2, Samsung GT-I8262 Galaxy Duos, Samsung GT-S7262 Galaxy Star S7262, Samsung GT-19100 Galaxy S2, Samsung GT-I9082 Galaxy Grand Duos

225x126 (0.3%)

Samsung GT-I9190 Galaxy S4 Mini

267x150 (70%)

Apple iPhone, Apple iPod

300x168 (17.6%)

Samsung GT-19300 Galaxy S3, Samsung GT-19500 Galaxy S4, Samsung GT-N7100 Galaxy Note 2, Samsung SM-N9005 Galaxy Note 3, Samsung SM-G900F Galaxy S5, Sony SO-04E Xperia A, LG Nexus 5, HTC M7 One, DOOGEE DG500 Discovery

333x187 (0.43%)

Samsung GT-N7000 Galaxy Note

Devices panel

Source: Google Analytics
Panel: Top 50 devices on touch.dailymotion.com (75% of the visits), since May 1st (581.5M sessions)

Device model Resolution Market share Bounce rate dpi
Apple iPhone 320x568 20.89% 57.23% 326
Apple iPhone 320x480 11.53% 56.26% 326
Samsung GT-I9300 Galaxy S III 720x1280 2.18% 52.20% 306
Apple iPod 320x568 1.68% 50.50% 326
Apple iPod 320x480 1.65% 51.07% 326
Samsung GT-I9500 Galaxy S IV 360x640 1.17% 48.24% 441
Samsung GT-I9505 Galaxy S IV 360x640 1.08% 54.90% 441
Samsung GT-N7100 Galaxy Note II 720x1280 0.80% 52.58% 265
Samsung GT-I8190 Galaxy S III Mini 480x800 0.68% 53.13% 233
Samsung GT-I9300 Galaxy S III 360x640 0.63% 42.46% 306
Samsung SM-N9005 Galaxy Note 3 360x640 0.60% 52.68% 388
Samsung GT-I9100 Galaxy S II 480x800 0.60% 53.50% 218
Nokia Lumia 520 330x549 0.60% 52.48% 235
Samsung GT-S7562 Galaxy S Duos 480x800 0.57% 47.74% 233
DOOGEE DG500 Discovery 720x1280 0.54% 49.19% 220
Samsung GT-S5360 Galaxy Y 320x401 0.46% 47.42% 133
Samsung SM-N900T Galaxy Note 3 360x640 0.46% 50.28% 388
Samsung GT-I9082 Galaxy Grand Duos 480x800 0.44% 48.02% 187
Samsung GT-N7100 Galaxy Note II 360x640 0.40% 43.75% 265
Nokia Lumia 520 480x800 0.37% 50.62% 235
Samsung GT-I8190 Galaxy S III Mini 320x534 0.35% 46.02% 233
Samsung GT-S5360 Galaxy Y 320x341 0.33% 45.63% 133
Samsung GT-S7582 Galaxy S Duos 2 480x800 0.33% 45.37% 233
Samsung SM-G900F Galaxy S5 360x640 0.32% 53.28% 432
Samsung GT-S5830i Galaxy Ace 320x455 0.32% 48.90% 165
Samsung GT-S5830i Galaxy Ace 320x401 0.31% 48.54% 165
Samsung GT-I8262 Galaxy Duos 480x800 0.26% 45.51% 217
Sony SO-04E Xperia A 720x1280 0.24% 50.57% 319
Samsung GT-N7000 Galaxy Note 800x1280 0.22% 52.47% 285
Samsung GT-S7262 Galaxy Star S7262 320x534 0.21% 37.15% 233
LG Nexus 5 360x592 0.19% 52.80% 445
Samsung GT-I9500 Galaxy S IV 1080x1920 0.19% 52.09% 441
Samsung GT-I9190 Galaxy S4 Mini 540x960 0.19% 52.75% 256
HTC M7 One 1080x1920 0.18% 59.26% 468

Reducing the panel

In order to have only unique and homogeneous data, I reduced all devices with this rules:

Merge market share, bounce rate:

  • if two devices have the exact same name (remove doublons)
    • ex: Apple iPhone appears twice
  • if two devices have a similar name
    • ex: Samsung Galaxy S IV and Samsung Galaxy S 4

Recalculate resolution based on pixel density (ppi):

  • if width > 400
    • ex: HTC M7 One, res = 1080x1920, ppi = 468
    • pixel ratio = round(468 / 150) = 3
    • final res = (1080/3)x(1920/3) = 360x640

Final most used devices widths (css layout)

320px (60%)

Device model Market share Pixel ratio
Apple iPhone 32.42% 2
Apple iPod 3.33% 2
Samsung GT-18190 Galaxy S3 Mini 1.03% 1.5
Nokia Lumia 520 0.97% 1.5
Samsung GT-S5360 Galaxy Y 0.79% 1
Samsung GT-S5830i Galaxy Ace 0.63% 1
Samsung GT-19100 Galaxy S2 0.60% 1.5
Samsung GT-S7562 Galaxy S Duos 0.57% 1.5
Samsung GT-S7582 Galaxy S Duos 2 0.33% 1.5
Samsung GT-I8262 Galaxy Duos 0.26% 1.5
Samsung GT-S7262 Galaxy Star S7262 0.21% 1.5

360px (29%)

Device model Market share Pixel ratio
Samsung GT-19300 Galaxy S3 2.81% 2
Samsung GT-19500 Galaxy S4 2.44% 3
Samsung GT-N7100 Galaxy Note 2 1.20% 2
Samsung SM-N9005 Galaxy Note 3 1.06% 2.5
Samsung SM-G900F Galaxy S5 0.32% 3
Sony SO-04E Xperia A 0.24% 2
LG Nexus 5 0.19% 3
Samsung GT-I9190 Galaxy S4 Mini 0.19% 1.5
HTC M7 One 0.18% 3

400px (0.4%)

Device model Market share Pixel ratio
Samsung GT-N7000 Galaxy Note 0.22% 2

480px (1.9%)

Device model Market share Pixel ratio
DOOGEE DG500 Discovery 0.54% 1.5
Samsung GT-I9082 Galaxy Grand Duos 0.44% 1

Formulas and rules

Calculating the Pixel Ratio (if not available)

The golden figure seems to be 150. Dividing the DPI by 150, and finding the closest .5 figure among [1, 1.5, 2, 2.5, 3] works great.

Ex:

with an iPhone (ppi = 326)
pixel ratio = 326 / 150
            = 2.17333333

-> the closest .5 value is 2

Calculating the maximum thumbnail width for the device resolution

With

  • device.with the CSS layout width (not the physical pixel layout width).
    Ex: Samsung GT-I9505 Galaxy S IV, Pixel Layout = 1080x1920, DPI = 3, CSS Layout = (1080/3)x(1920/3) = 360x640
  • device.thumbnail_ratio the preferred ratio between screen width and displayed thumbnail.
    Ex: on an iPhone, CSS width is 320px, and we think that an harmonious width for the thumbnail is 133px, so the ratio is round(320 / 133) = 2.4

Rule is :

if device.pixel_ratio > 2 then device.pixel_ratio = 2

thumbnail_width = (device.width / device.thumbnail_ratio) * device.pixel_ratio
thumbnail_height = round(thumbnail_width / (16/9))

Ex:

For Samsung GT-I9505 Galaxy S IV:
- res: 360x640
- device.pixel_ratio: 3
- pixel_ratio = min(device.pixel_ratio, 2) = 2

thumbnail.width = (360 / 2.4) * 3
                = 150 * 2
                = 300

thumbnail.height = int(300 / (16/9))
                 = 168
                 
thumbnail.size = 300x168
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment