Make senator images load quick, which closes #385. The solution was to reduce the size of the images and disable Next.js image optimization for them. Disabling image optimization has counterintuitively made the initial load times much quicker. Now, when the image first loads, it's cached and used again whenever that same image is needed, regardless of size. This means that when a senator is selected, the large image will always appear instantly because it's already been downloaded.
Next.js image optimization is bad for this use case (or I might be misusing it). However, the Next.js Image component is still marginally better than the standard image tag because of the placeholder prop, which is useful for users with particularly slow connections (e.g. slow 3G).
Make senator images load quick, which closes #385. The solution was to reduce the size of the images and disable Next.js image optimization for them. Disabling image optimization has counterintuitively made the initial load times much quicker. Now, when the image first loads, it's cached and used again whenever that same image is needed, regardless of size. This means that when a senator is selected, the large image will always appear instantly because it's already been downloaded.
Next.js image optimization is bad for this use case (or I might be misusing it). However, the Next.js
Imagecomponent is still marginally better than the standardimagetag because of theplaceholderprop, which is useful for users with particularly slow connections (e.g. slow 3G).