Image Optimization

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

1. https://i.ibb.co/gP6DCkn/Screen-Shot-2021-10-29-at-03-42-30.png 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 https://i.ibb.co/LZhCtZ4/Screen-Shot-2021-10-29-at-05-01-16.png

1.2.1.1. Pro: No extra script, will be handled automatically by the browser

1.2.1.2. Cons: By screen size & DPR. Not available for render size.

1.2.2. Manually using js script

1.2.2.1. Pro: We can costum the logic

1.2.2.2. Cons: Extra scripts

1.3. Network detection speed method

1.3.1. Native browser function navigator.connection.effectiveType

1.3.1.1. Compatibility Notes. Fallback set to 4g.

1.3.2. Network latency (PING)

1.4. Benchmark #1

1.4.1. Decision?

1.4.1.1. To determine device quality we use render area size. Small image in high device no need to load high image.

1.4.1.2. In order to achieve point 1. We need to use manual method using JS to load next image

1.4.1.3. To detect network we choose to use native browser.

1.5. First Release

1.5.1. Feedbacks

1.5.1.1. Image quality is still below expectations

1.5.2. Known Issues:

1.5.2.1. Lazy loading not work properly

1.5.2.2. Next image loading still included in the lighthouse calculation. So loading next still impacting the score.

1.5.2.2.1. setTimeout

1.5.2.2.2. on document loaded

1.5.2.2.3. first user interaction

1.5.2.3. Duplicate import when using our custom babel plugin.

1.5.3. Options to improve image quality issue

1.5.3.1. Adjust the presets & breakpoints. And include DPR as device quality criteria can be a good candidate also.

1.5.3.2. Improve current progresive load method. Need to resolve lighthouse image load issue.

1.5.3.2.1. Goal: Load high-quality images progressively. But doesn't increase first load time.

1.5.4. Benchmark #2

1.5.4.1. Result: Google Sheets - create and edit spreadsheets online, for free.