Image Components

img-avatar

<img-avatar [src]=""></img-avatar>

• src
  • from: https://infomobi.page.link/[imgName]
  • to: https://imageflow.meumobi.com/firebase/[imgName]?width=160&height=160&mode=crop&scale=both&format=jpg

Used on

• anniversaries component;
  
• message component;
  
• contact-headline component;
  

References:

• twitter (avatar): thumbnail 200x200, raw 400x400;
• facebook - mobile (avatar): thumb 50x50, raw/retail 320x320;
• facebook - desktop (avatar): thumb 160x160, raw 960x960;

Recommendation:

• resolution: 160x160;
• aspect: square;

Use cases

contact-profile.picture

• source:
  • host: firebase;
  • format: jpg, png;
  • aspect: any;

img-profile

<img-profile [src]=""></img-profile>

• src

  • from: https://infomobi.page.link/[imgName]
  • to: https://imageflow.meumobi.com/firebase/[imgName]?width=400&height=400&mode=crop&scale=both&format=jpg

• srcset

  • from: https://infomobi.page.link/[imgName]
  • to:
    https://imageflow.meumobi.com/firebase/[imgName]?width=400&height=400&mode=crop&scale=both&format=jpg 800w https://imageflow.meumobi.com/firebase/[imgName]?width=600&height=600&mode=crop&scale=both&format=jpg 1024w https://imageflow.meumobi.com/firebase/[imgName]?width=800&height=800&mode=crop&scale=both&format=jpg 2048w

Used on

• user-details component;
  
• desk-details component;

References:

• twitter (avatar): thumbnail 200x200, raw 400x400;
• facebook - mobile (avatar): thumb 50x50, raw/retail 320x320;
• facebook - desktop (avatar): thumb 160x160, raw 960x960;

Recommendation:

• resolution: 160x160;
• aspect: square;

Use cases

contact-profile.picture

• source:
  • host: firebase;
  • format: jpg, png;
  • aspect: any;

img-content

<img-content [src]=""></img-content>

• src

  • from: https://infomobi.page.link/[imgName]
  • to: https://imageflow.meumobi.com/firebase/[imgName]?width=600&height=400&mode=crop&scale=both&format=jpg

• srcset

  • from: https://infomobi.page.link/[imgName]
  • to:
    https://imageflow.meumobi.com/firebase/[imgName]?width=600&height=400&mode=crop&scale=both&format=jpg 800w https://imageflow.meumobi.com/firebase/[imgName]?width=900&height=600&mode=crop&scale=both&format=jpg 1024w https://imageflow.meumobi.com/firebase/[imgName]?width=1200&height=800&mode=crop&scale=both&format=jpg 2048w

Used on

• anniversaries component;
  
• message component;
  
• articles component;
• polls component;
  
• article-details page;
  

References:

• twitter - mobile (image): timeline 600x400, zoom raw
• twitter - desktop (image): timeline 900x600, zoom raw
• facebook - mobile (image): timeline 375w, zoom raw
• facebook - desktop (image): timeline 500w, zoom raw

Recommendation:

• resolution: small 600x400, medium 900x600, large 1200x800;
• aspect: 1.5;

Use cases

comment.picture

• source:
  • host: firebase;
  • format: jpg, png;
  • aspect: any;

items.images

• source:
  • host: meumobi;
  • format: jpg, png;
  • aspect: any;

items.thumbnails

• source:
  • host: meumobi;
  • format: jpg, png;
  • aspect: any;

img-thumbnail

<img-thumbnail [src]=""></img-thumbnail>

• src
  • from: https://infomobi.page.link/[imgName]
  • to: https://imageflow.meumobi.com/firebase/[imgName]?width=200&height=200&mode=crop&scale=both&format=jpg

Used on

• medium-details component;
  
• user-form page;
• desk-form page;
  

References:

• twitter (avatar): thumbnail 200x200, raw 400x400;
• facebook - mobile (avatar): thumb 50x50, raw/retail 320x320;
• facebook - desktop (avatar): thumb 160x160, raw 960x960;

Recommendation:

• resolution: 200x200;
• aspect: square;

Use cases

items.medias.thumbnails

• source:
  • host: meumobi;
  • format: jpg, png;
  • aspect: any;

user-profile.picture

• source:
  • host: firebase;
  • format: jpg, png;
  • aspect: any;

desk-profile.picture

• source:
  • host: firebase;
  • format: jpg, png;
  • aspect: any;