Thumbnail calculations

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