How to Optimize Images for Material Tailwind Avatar Component in Next.js ?

[EhsanKey]

---

I would like to learn how to optimize images for the Material Tailwind Avatar component in a Next.js application.

The current code uses the Material Tailwind Avatar component to display an image as follows:

import { Avatar } from '@material-tailwind/react'
import React from 'react'

const Component = () => {
  return <Avatar src="/logo.jpg" alt="logo" />
}

export default Component

I'm looking for ways to optimize the image for better performance. Your suggestions and code improvements would be highly appreciated.

Thank you!

---

[valentinpolitov]

Since @material-tailwind/react doesn't provide an easy way pass your component, you can re-implement their Avatar component:

import React from "react";
import Image, { type ImageProps } from "next/image";

// utils
import classnames from "classnames";
import { twMerge } from "tailwind-merge";
import findMatch from "@material-tailwind/react/utils/findMatch";
import objectsToString from "@material-tailwind/react/utils/objectsToString";

// context
import { useTheme } from "@material-tailwind/react/context/theme";

// types
import type {
  variant,
  size,
  className,
  withBorder,
  color,
} from "@material-tailwind/react/types/components/avatar";

type AvatarOwnProps = {
  variant?: variant;
  size?: size;
  className?: className;
  withBorder?: withBorder;
  color?: color;
};

export type AvatarProps = AvatarOwnProps &
  Omit<ImageProps, keyof AvatarOwnProps>;

export const Avatar = React.forwardRef<
  HTMLImageElement,
  React.PropsWithoutRef<AvatarProps>
>(({ variant, size, className, color, withBorder, ...rest }, ref) => {
  // 1. init
  const { avatar } = useTheme();
  const { valid, defaultProps, styles } = avatar;
  const { base, variants, sizes, borderColor } = styles;

  // 2. set default props
  variant = variant ?? defaultProps.variant;
  size = size ?? defaultProps.size;
  className = className ?? defaultProps.className;
  withBorder = withBorder ?? defaultProps.withBorder;
  color = color ?? defaultProps.color;

  // 3. set styles
  const avatarVariant = objectsToString(
    variants[findMatch(valid.variants, variant, "rounded")],
  );
  const avatarSize = objectsToString(sizes[findMatch(valid.sizes, size, "md")]);
  const avatarBorderColor = objectsToString(
    borderColor[findMatch(valid.colors, color, "gray")],
  );
  const classes = twMerge(
    classnames(objectsToString(base.initial), avatarVariant, avatarSize, {
      [objectsToString(base.withBorder)]: withBorder,
      [avatarBorderColor]: withBorder,
    }),
    className,
  );

  // 4. return
  return <Image {...rest} ref={ref} className={classes} />;
});
Avatar.displayName = "MaterialTailwind.Avatar";

export default Avatar;

[EhsanKey]

Thank you. Do I need to place it in a specific directory?

[valentinpolitov]

Place it wherever fits your project structure, eg components/ui/avatar.tsx, just remember to import from this path, not from @material-tailwind/react

import { Avatar } from '@/components/ui/avatar'
import React from 'react'

const Component = () => {
  return <Avatar src="/logo.jpg" alt="logo" />
}

export default Component

[EhsanKey]

tanks!