Project avatars are blurry

[SachaG]

Doesn't look very good… Can we use a larger size (1.5x or 2x display size) or is that the only size available from GitHub? If we can't use larger images we should reduce the dimensions of the image when displayed.

[michaelrambeau]

For a few projects projects, including VS Code and React, I use SVG files hosted on bestof.js.org, so that's why VS Code icon looks nice. But for the majority of the projects, it's the GitHub repo owner avatar that is used, for example: https://avatars.githubusercontent.com/u/1778935?v=3&s=50

The last parameter s=50 means a size of 50 pixels, so it means we can request any size from GitHub.

• https://avatars.githubusercontent.com/u/1778935?v=3&s=50 => 50 pixels
• https://avatars.githubusercontent.com/u/1778935?v=3&s=100 => 100 pixels

Could we request the 100 pixels wide icon for retina screens and the 50 pixels wide icon for other screens, using the technique of "responsive images" ?

[SachaG]

We could do responsive images if we load them dynamically via JS. Which might be a good idea anyway to speed up the initial load. But if we have to pick just one size then I'd say 100, or 75 if that's too big (there's not a huge visible difference between 1.5x and 2x at these small sizes).

[michaelrambeau]

I don't think JavaScript is required, I thought about using the technique described in this article http://alistapart.com/article/responsive-images-in-practice:

<img src="standard.jpg" srcset="retina.jpg 2x, super-retina.jpg 3x" />

I'm checking if it works...

[michaelrambeau]

This commit seems to have fixed the problem, icons are no more blurry on my Android phone.

Could you confirm it works for you too?

const Avatar = ({ project, size = 100 }) => {
  const { svg } = project
  if (svg)
    return (
      <div style={{ width: size }} dangerouslySetInnerHTML={{ __html: svg }} />
    )
  const urls = {
    standard: getProjectAvatarUrl(project, size),
    retina: getProjectAvatarUrl(project, size * 2)
  }
  return (
    <img
      src={urls.standard}
      srcSet={`${urls.retina} 2x`}
      width={size}
      height={size}
      alt={project.name}
    />
  )
}