I’m currently developing a portfolio style website for myself, similar style to Dribbble or adobe Portfolio. All my projects have preview icons or cards if you will that are a fixed size of 400 x 300 until it hits mobile. These images are cropped to be the same 400 x 300 size look fine for the most part until you look at it on 2x or 3x screens.
Since these sizes don’t really change or flex on the page, I opted to use srcset with a 2x, and 3x method. On 2x these images jump to 800 x 600 but still in a 400 x 300 container. They look better on 2x devices now and 4k monitors but I’m now encountering a performance decrease with lighthouse as it’s complaining about properly sized images, even when on a 1x monitor.
The question I have is am I doing this correctly? Dribble uses a similar size container for their preview projects, but they also look great on 2x and 3x devices. Any feedback or advice would be greatly appreciated, thanks!
As a side note using a larger img (intrinsic 500 x 375) in a 400 x 300 container always give me blurry results when not a 2x or 3x device, why is that?
Justin
Top comments (0)