Resizing images

Use cases

Sizes were chosen based on Facebook and Twitter (web/mobile);

Details benchmark (screenshots, sizes of img, etc.)

Twitter

Profile Picture

Thumb 200x200
Retail 400x400

Post Image

Timeline 900x600
Zoom retail res

Contact profile image (contact-profile.picture)

Component img-avatar

• Source
  • Host: firebase;
  • Format: jpg, png;
  • Aspect: any
• Screens:
  • TV, Contact list, Live (avatar);
  • User Details (high-resolution);
• References:
  • Twitter (avatar): thumb 200x200, raw/retail 400x400
  • Facebook - mobile (avatar): thumb 50x50, raw/retail 320x320
  • Facebook - desktop (avatar): thumb 160x160, raw/retail 960x960
• Recommended:
  • Aspect: square;
  • Avatar: 160x160
    https://imageflow.meumobi.com/firebase/GNcF?width=160&height=160&mode=crop
  • High-resolution: min400x400 max960x960;
    https://imageflow.meumobi.com/firebase/GNcF?width=400&height=400&mode=crop

Comment picture (comment.picture):

Component img-content

• Source
  • Host: firebase;
  • Format: jpg, png;
  • Aspect: any
• Screens:
  • TV (high-resolution);
  • Live comments with and without zoom;
• References:
  • Twitter - mobile (image): timeline 600x400, zoom raw/retail
  • Twitter - desktop (image): timeline 900x600, zoom raw/retail
  • Facebook - mobile (image): timeline 375w, zoom raw/retail
  • Facebook - desktop (image): timeline 500w, zoom raw/retail
• Recommended:
  • Live comments without zoom:
    • Aspect: 1.5;
    • Resolution: 600x400;
      https://imageflow.meumobi.com/firebase/GNcF?width=600&height=400&mode=crop
  • Live comments with zoom:
    • Aspect: original;
    • Resolution: min900x900 max1200x1200;
      https://imageflow.meumobi.com/firebase/GNcF?width=900
  • TV:
    • Aspect: 1.5;
    • Resolution: min900x600 max1200x800;
      https://imageflow.meumobi.com/firebase/GNcF?width=900&height=600&mode=crop

Resolution:

• phone: 600x400
• TV: min900x600 max1200x800;

screen sizes considered: 800, 1024, 2048 For each screen size we'll define an img size: small, medium and large. For example comment.picture will use following sizes 600, 900, 1200 for resp. small, medium and large screens.

<img srcset="
    elva-fairy-600w.jpg 600w,
    elva-fairy-900w.jpg 900w,
    elva-fairy-1200w.jpg 1200w"
  sizes="
    (max-width: 800px) 600px,
    (max-width: 1024px) 900px,
    1200px"
  src="elva-fairy-900w.jpg" alt="Elva dressed as a fairy" />

Item images (items.images):

Component img-content

• Source
  • Host: meumobi;
  • Format: jpg, png;
  • Aspect: any
• Screens:
  • TV (high-resolution);
  • Post-details gallery;
• Recommended:
  • Original File to Upload:
    • min width: 1200px;
    • min height: 800px;
    • if width>1200:
      • min-height = width/1.5
  • Post-details without zoom:
    • Aspect: 1.5;
    • Resolution: 600x400;
      https://imageflow.meumobi.com/firebase/GNcF?width=600&height=400&mode=crop
  • Post-details with zoom:
    • Aspect: original;
    • Resolution: min900x900 max1200x1200;
      https://imageflow.meumobi.com/firebase/GNcF?width=900
  • TV:
    • Aspect: 1.5;
    • Resolution: min1200x900 max1440x960;
      https://imageflow.meumobi.com/firebase/GNcF?width=1440&height=960&mode=crop

Items thumbnails (item.thumbnails):

Component img-content

• Source
  • Host: meumobi;
  • Format: jpg, png;
  • Sizes:
    • IMG: meumobi - '80x60', '80x80', '139x139', '314x220';
    • YOUTUBE: yt servers - '"120x90", "320x180", "480x360", "640x480", "1920x1080";
    • PDF: meumobi "1191x1684","1190x1683","1920x1080","1080x1560","1224x1584","1587x2245","1608x2276" ...
• References:
  • Twitter - mobile (image): timeline 600x400, zoom raw/retail
• Screens:
  • Post-list;
• Recommended:
  • Post-list:
    • Resolution: 600x400;

Medias thumbnails(item.medias.thumbnails):

Component img-thumbnail

• References:
  • Twitter (avatar): thumb 200x200, raw/retail 400x400
• Source
  • Host: meumobi;
  • Format: jpg, png;
  • Sizes:
    • IMG: meumobi - '80x60', '80x80', '139x139', '314x220';
    • YOUTUBE: yt servers - '"120x90", "320x180", "480x360", "640x480", "1920x1080";
    • PDF: meumobi "1191x1684","1190x1683","1920x1080","1080x1560","1224x1584","1587x2245","1608x2276" ...
• Screens:
  • Post-details;
• Recommended:
  • Post-details:
    • Resolution: 400x400;

File upload

Image Pipes

Src

• Keeping aspect ratio: comments/message, post-details images

<img [src]="url | imgServerUrly"/>

https://imageflow.meumobi.com/firebase/zMci

• Keeping aspect ratio, changing width (512 on this example)

<img [src]="url | imgServerUrly: 512" >

https://imageflow.meumobi.com/firebase/zMci?width=512

• Updating width and change de aspect to square: profile images (512 headline, 1024 desk/user details)

<img [src]="url | imgServerUrly: 512: 'square'" >

https://imageflow.meumobi.com/firebase/zMci?width=512&height=512&mode=crop

Srcset

• Keeping aspect ratio: comments/message, post-details, tv gallery images

<img [srcset]="url | imgServerSrcsettify"/>

sizes = [2048, 1024, 800]
https://imageflow.meumobi.com/firebase/zMci?width=[size]

• Changing the aspect to square

<img [src]="url | imgServerSrcsettify: 'square'" >

sizes = [2048, 1024, 800]
https://imageflow.meumobi.com/firebase/zMci?width=[size]&[height]&mode=crop