Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

画像の最適化 #12

Open
shun91 opened this issue Dec 9, 2021 · 3 comments
Open

画像の最適化 #12

shun91 opened this issue Dec 9, 2021 · 3 comments
Labels
impact - high 大きくパフォーマンスを改善できる可能性がある

Comments

@shun91
Copy link
Owner

shun91 commented Dec 9, 2021

#2 から分離

https://github.com/CyberAgentHack/web-speed-hackathon-2020/wiki/Web-Speed-Hackathon-Online-%E5%87%BA%E9%A1%8C%E3%81%AE%E3%81%AD%E3%82%89%E3%81%84%E3%81%A8%E8%A7%A3%E8%AA%AC#%E7%94%BB%E5%83%8F%E3%81%AE%E6%9C%80%E9%81%A9%E5%8C%96
shun91 added a commit that referenced this issue Dec 18, 2021
@shun91
⚡️ loading="lazy" を指定する ( #12 )
0e52737 
あまり効果はなさそうだけど一応指定しておく
@shun91 shun91 added the impact - high 大きくパフォーマンスを改善できる可能性がある label Dec 18, 2021
@shun91
Copy link
Owner Author

shun91 commented Dec 19, 2021

Use Imagemin to compress images
https://web.dev/use-imagemin-to-compress-images/

shun91 added a commit that referenced this issue Dec 19, 2021
@shun91
⚡️ 画像をwebpに変換 ( #12 )
99da4ef
@shun91
Copy link
Owner Author

shun91 commented Dec 19, 2021

loading属性はあくまでimgタグに付与する

loading 属性（遅延読み込みを指定） | HTML5 タグリファレンス | W3 Watch Reference
https://reference.hyper-text.org/html5/attribute/loading/

@shun91
Copy link
Owner Author

shun91 commented Dec 19, 2021

TODO

  • 画像サイズ・解像度はもっと小さくできるかも
  • CoveredImageの「アスペクト比を維持したまま、要素のコンテンツボックス全体を埋めるように画像を拡大縮小」する処理は改善できるかも

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
impact - high 大きくパフォーマンスを改善できる可能性がある
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@shun91