Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Make an Image component with optimizations for image loading

See original GitHub issue

Current The leaderboard page loads github user avatars of size 460px, whereas the size of the div is 178px (desktop) and 54px (others). It is not needed to load such a big sized image for a small div.

May cause performance issues if there are more contributors, or the client does not have good device network.

Desktop: Screen Shot 2020-11-17 at 12 40 02 AM

Mobile: Screen Shot 2020-11-17 at 12 39 45 AM

Suggestion Make an Image component and possibly optimise image loading using srcset, loading the appropriate size based on device widths.

Acc no: c54c04774efaae20746fd3f29cdd619fea512e119bc1082b863572b2e8844104

Issue Analytics

State:
Created 3 years ago
Reactions:4
Comments:6 (6 by maintainers)

Top GitHub Comments

2reactions

lakbychancecommented, Nov 18, 2020

@thesanjeevsharma @Hristijan95 I like this suggestion. Maybe we can have an Image component that abstracts all this and is reusable ?

1reaction

Hristijan95commented, Nov 18, 2020

I agree, would be nice to have that.

Top Results From Across the Web

Basic Features: Image Optimization - Next.js

The default loader for Next.js applications uses the built-in Image Optimization API, which optimizes images from anywhere on the web, and then serves...

Nextjs image optimization with examples - Refine Dev

NextJS introduced a solution for delivering performant images on the web in v.10. It features a new Image component and built-in automatic image...

Next.js automatic image optimization with next/image

Learn about automatic image optimization and how it can benefit developers with the native, game-changing, and powerful next/image API.

Next.js image optimization techniques | Uploadcare Blog

Next.js Image component enables lazy loading by default, meaning that the app only loads and displays the images which are currently on the...

Building an effective Image Component - Chrome Developers

Images are a common source of performance bottlenecks for web applications and a key focus area for optimization. This article explains how ...