faster avatar (#28633)

Author: chrisnojima-zoom

shared/common-adapters/avatar/avatar.css

@@ -1,83 +1,131 @@
 /* Used by avatar on desktop to speed up perf */
+/* Outer container allows follow icons to extend beyond bounds */
+/* Inner wrapper has overflow:hidden + border-radius to clip images without re-rasterizing */
 
 .avatar {
   user-select: none;
   flex-shrink: 0;
   position: relative;
 }
 
-.avatar-team-size-128 {
+.avatar-inner {
+  overflow: hidden;
+  position: relative;
+  /* Help browser optimize repaints/compositing */
+  contain: layout style paint;
+}
+
+/* Outer container sizes - no border-radius so follow icons aren't clipped */
+.avatar.avatar-team-size-128,
+.avatar.avatar-user-size-128 {
+  width: 128px;
+  height: 128px;
+}
+.avatar.avatar-team-size-16,
+.avatar.avatar-user-size-16 {
+  width: 16px;
+  height: 16px;
+}
+.avatar.avatar-team-size-24,
+.avatar.avatar-user-size-24 {
+  width: 24px;
+  height: 24px;
+}
+.avatar.avatar-team-size-32,
+.avatar.avatar-user-size-32 {
+  width: 32px;
+  height: 32px;
+}
+.avatar.avatar-team-size-48,
+.avatar.avatar-user-size-48 {
+  width: 48px;
+  height: 48px;
+}
+.avatar.avatar-team-size-64,
+.avatar.avatar-user-size-64 {
+  width: 64px;
+  height: 64px;
+}
+.avatar.avatar-team-size-96,
+.avatar.avatar-user-size-96 {
+  width: 96px;
+  height: 96px;
+}
+
+/* Inner wrapper sizes with border-radius for clipping */
+.avatar-inner.avatar-team-size-128 {
   border-radius: 16px;
   width: 128px;
   height: 128px;
 }
-.avatar-team-size-16 {
+.avatar-inner.avatar-team-size-16 {
   border-radius: 4px;
   width: 16px;
   height: 16px;
 }
-.avatar-team-size-24 {
+.avatar-inner.avatar-team-size-24 {
   border-radius: 6px;
   width: 24px;
   height: 24px;
 }
-.avatar-team-size-32 {
+.avatar-inner.avatar-team-size-32 {
   border-radius: 6px;
   width: 32px;
   height: 32px;
 }
-.avatar-team-size-48 {
+.avatar-inner.avatar-team-size-48 {
   border-radius: 8px;
   width: 48px;
   height: 48px;
 }
-.avatar-team-size-64 {
+.avatar-inner.avatar-team-size-64 {
   border-radius: 10px;
   width: 64px;
   height: 64px;
 }
-.avatar-team-size-96 {
+.avatar-inner.avatar-team-size-96 {
   border-radius: 12px;
   width: 96px;
   height: 96px;
 }
 
-.avatar-user-size-128 {
+.avatar-inner.avatar-user-size-128 {
   border-radius: 50%;
   width: 128px;
   height: 128px;
 }
-.avatar-user-size-16 {
+.avatar-inner.avatar-user-size-16 {
   border-radius: 50%;
   width: 16px;
   height: 16px;
 }
-.avatar-user-size-24 {
+.avatar-inner.avatar-user-size-24 {
   border-radius: 50%;
   width: 24px;
   height: 24px;
 }
-.avatar-user-size-32 {
+.avatar-inner.avatar-user-size-32 {
   border-radius: 50%;
   width: 32px;
   height: 32px;
 }
-.avatar-user-size-48 {
+.avatar-inner.avatar-user-size-48 {
   border-radius: 50%;
   width: 48px;
   height: 48px;
 }
-.avatar-user-size-64 {
+.avatar-inner.avatar-user-size-64 {
   border-radius: 50%;
   width: 64px;
   height: 64px;
 }
-.avatar-user-size-96 {
+.avatar-inner.avatar-user-size-96 {
   border-radius: 50%;
   width: 96px;
   height: 96px;
 }
 
+/* Background layer - no border-radius needed, parent clips via overflow */
 .avatar-background {
   background-color: var(--color-greyLight);
   bottom: 0;
@@ -90,6 +138,7 @@
   }
 }
 
+/* Image layer - no border-radius needed, parent clips via overflow */
 .avatar-user-image {
   flex-shrink: 0;
   background-size: cover;
@@ -100,6 +149,23 @@
   top: 0;
 }
 
+/* For img tag avatars - better caching and performance */
+/* CRITICAL: NO border-radius on img - parent container clips via overflow */
+/* This allows Chrome to share the decoded bitmap across all instances */
+img.avatar-user-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 0 !important;
+  /* Prevent dragging which can trigger decode */
+  user-drag: none;
+  -webkit-user-drag: none;
+  /* Optimize for static images */
+  image-rendering: auto;
+  /* Content is static, help Chrome cache decoded bitmap */
+  content-visibility: auto;
+}
+
 .avatar-border-team {
   background: rgba(0, 0, 0, 0);
   bottom: 0;

shared/common-adapters/avatar/hooks.tsx

@@ -1,7 +1,7 @@
 // High level avatar class. Handdles converting from usernames to urls. Deals with testing mode.
 import * as C from '@/constants'
 import * as React from 'react'
-import {iconTypeToImgSet, urlsToImgSet, type IconType, type IconStyle} from '../icon'
+import {iconTypeToImgSet, urlsToImgSet, urlsToSrcSet, urlsToBaseSrc, type IconType, type IconStyle} from '../icon'
 import * as Styles from '@/styles'
 import * as AvatarZus from './store'
 import './avatar.css'
@@ -104,6 +104,32 @@ export default (ownProps: Props) => {
             ),
     [address, name, imageOverrideUrl, lighterPlaceholders, size, urlMap, isTeam]
   )
+  
+  // For <img> tags (desktop only): extract src and srcset
+  const src = React.useMemo(
+    () =>
+      Styles.isMobile
+        ? null
+        : imageOverrideUrl
+          ? imageOverrideUrl
+          : address && name
+            ? urlsToBaseSrc(urlMap, size)
+            : null,
+    [address, name, imageOverrideUrl, size, urlMap]
+  )
+  
+  const srcset = React.useMemo(
+    () =>
+      Styles.isMobile
+        ? undefined
+        : imageOverrideUrl
+          ? undefined
+          : address && name
+            ? urlsToSrcSet(urlMap, size)
+            : undefined,
+    [address, name, imageOverrideUrl, size, urlMap]
+  )
+  
   const iconInfo = React.useMemo(
     () => followIconHelper(size, followsYou, following),
     [size, followsYou, following]
@@ -126,6 +152,8 @@ export default (ownProps: Props) => {
     opacity: ownProps.opacity,
     size: size,
     skipBackground: ownProps.skipBackground,
+    src: src,
+    srcset: srcset,
     style: ownProps.style,
     url: url,
   }

shared/common-adapters/avatar/index.desktop.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react'
 import Icon, {type IconType} from '../icon'
 import * as Styles from '@/styles'
 import type {Props, AvatarSize} from '.'
@@ -24,28 +25,54 @@ const Avatar = (p: Props) => {
 
   const scaledAvatarRatio = props.size / AVATAR_SIZE
   const avatarScaledWidth = props.crop?.scaledWidth ? props.crop.scaledWidth * scaledAvatarRatio : null
+  
+  // Stable style object to prevent img re-render
+  const imgOpacity = props.opacity === undefined || props.opacity === 1
+    ? props.blocked
+      ? 0.1
+      : 1
+    : props.opacity
+  const imgStyle = React.useMemo(
+    () => (imgOpacity !== 1 ? {opacity: imgOpacity} : undefined),
+    [imgOpacity]
+  )
+  
   return (
     <div
       className={Styles.classNames('avatar', avatarSizeClasName)}
       onClick={props.onClick}
       style={Styles.collapseStyles([props.style, props.onClick && styles.clickable]) as React.CSSProperties}
     >
-      {!props.skipBackground && (
-        <div className={Styles.classNames('avatar-background', avatarSizeClasName)} />
-      )}
+      {/* Inner wrapper clips avatar image content, outer container allows follow icons to extend */}
+      <div className={Styles.classNames('avatar-inner', avatarSizeClasName)}>
+        {!props.skipBackground && (
+          <div className="avatar-background" />
+        )}
       {!!props.blocked && !!avatarSizeToPoopIconType(props.size) && (
         <div
-          className={Styles.classNames('avatar-user-image', avatarSizeClasName)}
+          className="avatar-user-image"
           style={styles.poopContainer}
         >
           {/* ts messes up here without the || 'icon-poop-32' even though it
               can't happen due to the !!avatarSizeToPoopIconType() check above */}
           <Icon type={avatarSizeToPoopIconType(props.size) || 'icon-poop-32'} />
         </div>
       )}
-      {!!props.url && props.crop === undefined && (
+      {!!props.src && props.crop === undefined && (
+        <img
+          key={props.src}
+          src={props.src}
+          srcSet={props.size <= 32 ? undefined : props.srcset || undefined}
+          decoding="async"
+          className="avatar-user-image"
+          style={imgStyle as React.CSSProperties}
+          alt=""
+          draggable={false}
+        />
+      )}
+      {!!props.url && !props.src && props.crop === undefined && (
         <div
-          className={Styles.classNames('avatar-user-image', avatarSizeClasName)}
+          className="avatar-user-image"
           style={{
             backgroundImage: props.url,
             opacity:
@@ -58,9 +85,8 @@ const Avatar = (p: Props) => {
         />
       )}
       {!!props.url && props.crop?.offsetLeft !== undefined && props.crop.offsetTop !== undefined && (
-        <img
-          loading="lazy"
-          className={Styles.classNames('avatar-user-image', avatarSizeClasName)}
+        <div
+          className="avatar-user-image"
           style={{
             backgroundImage: props.url,
             backgroundPositionX: props.crop.offsetLeft * scaledAvatarRatio,
@@ -95,6 +121,7 @@ const Avatar = (p: Props) => {
           )}
         />
       )}
+      </div>
       {props.followIconType && <Icon type={props.followIconType} style={props.followIconStyle} />}
       {props.editable && <Icon type="iconfont-edit" style={props.isTeam ? styles.editTeam : styles.edit} />}
       {props.children}

shared/common-adapters/icon.d.ts

@@ -48,4 +48,6 @@ export default Icon
 
 export declare function iconTypeToImgSet(imgMap: {[K in string]: IconType}, targetSize: number): string
 export declare function urlsToImgSet(imgMap: {[K in string]: string}, size: number): string | null
+export declare function urlsToSrcSet(_imgMap: {[key: number]: string}, _targetSize: number): string | null
+export declare function urlsToBaseSrc(_imgMap: {[key: number]: string}, _targetSize: number): string | null
 export type {IconType} from './icon.constants-gen'

shared/common-adapters/icon.desktop.tsx

@@ -228,6 +228,32 @@ export function urlsToImgSet(imgMap: {[key: number]: string}, targetSize: number
   return sets ? `-webkit-image-set(${sets})` : null
 }
 
+// Generate srcset attribute for <img> tags (no url() wrapper)
+export function urlsToSrcSet(imgMap: {[key: number]: string}, targetSize: number) {
+  const multsMap = Shared.getMultsMap(imgMap, targetSize)
+  const keys = Object.keys(multsMap) as unknown as Array<keyof typeof multsMap>
+  const srcset = keys
+    .map(mult => {
+      const m = multsMap[mult]
+      if (!m) return null
+      const url = imgMap[m]
+      if (!url) {
+        return null
+      }
+      return `${url} ${mult}x`
+    })
+    .filter(Boolean)
+    .join(', ')
+  return srcset || null
+}
+
+// Get base URL for img src attribute (1x version)
+export function urlsToBaseSrc(imgMap: {[key: number]: string}, targetSize: number) {
+  const multsMap = Shared.getMultsMap(imgMap, targetSize)
+  const baseSize = multsMap[1]
+  return baseSize ? imgMap[baseSize] : null
+}
+
 const styles = Styles.styleSheetCreate(() => ({
   // Needed because otherwise the containing box doesn't calculate the size of
   // the inner span (incl padding) properly

shared/common-adapters/icon.native.tsx

@@ -219,6 +219,15 @@ export function urlsToImgSet(imgMap: {[size: string]: string}, targetSize: numbe
   return imgSet.length ? imgSet : null
 }
 
+// Desktop-only functions - not used on native but needed for import compatibility
+export function urlsToSrcSet(_imgMap: {[key: number]: string}, _targetSize: number): null {
+  return null
+}
+
+export function urlsToBaseSrc(_imgMap: {[key: number]: string}, _targetSize: number): null {
+  return null
+}
+
 const styles = Styles.styleSheetCreate(() => ({
   fixOverdraw: {
     backgroundColor: Styles.globalColors.fastBlank,