Image Optimization

Get Started. It's Free
or sign up with your email address
Image Optimization by Mind Map: Image Optimization

1. Initial Idea

1.1. How to determine device quality?

1.1.1. Device Pixel Ratio window.devicePixelRatio

1.1.2. Screen size

1.1.3. Render area size

1.2. Loading Image Method

1.2.1. Automatically using picture srcset Pro: No extra script, will be handled automatically by the browser Cons: By screen size & DPR. Not available for render size.

1.2.2. Manually using js script Pro: We can costum the logic Cons: Extra scripts

1.3. Network detection speed method

1.3.1. Native browser function navigator.connection.effectiveType Compatibility Notes. Fallback set to 4g.

1.3.2. Network latency (PING)

1.4. Benchmark #1

1.4.1. Decision? To determine device quality we use render area size. Small image in high device no need to load high image. In order to achieve point 1. We need to use manual method using JS to load next image To detect network we choose to use native browser.

1.5. First Release

1.5.1. Feedbacks Image quality is still below expectations

1.5.2. Known Issues: Lazy loading not work properly Next image loading still included in the lighthouse calculation. So loading next still impacting the score. setTimeout on document loaded first user interaction Duplicate import when using our custom babel plugin.

1.5.3. Options to improve image quality issue Adjust the presets & breakpoints. And include DPR as device quality criteria can be a good candidate also. Improve current progresive load method. Need to resolve lighthouse image load issue. Goal: Load high-quality images progressively. But doesn't increase first load time.

1.5.4. Benchmark #2 Result: Google Sheets - create and edit spreadsheets online, for free.