Build a habit of shipping by sharing your daily, incremental progress
See how other makers are growing their business
Members are invited by existing members
Receive outside perspective when you need it
Connect with others through weekly video hangouts
Get access to our members-only perks and discounts
👋 Join WIP to participate
I'm not the best at image sizing but heres my "rules" when used in css:
use different versions for different screens type. I always have a 1x version for basic screen and a 2x version for high-dpi screen
use different versions for different screens size. mobile, tablette, laptop, big monitor if needed. Of course this is not needed if the size of the image is the same for all device, but if you use a full width image for example, you'd want to adapt it.
So if i have a 1200x1200 px (rendered size) image, i'd load with media query: ± 600x600 for mobile, ± 1200x1200 for highDPI mobile and desktop, and ± 2400x2400 for highDPI desktop. (and maybe one or two for tablette in-between)
PS: you can target highDPI screen with @media (min-resolution: 192dpi), (-webkit-min-device-pixel-ratio: 2){}