feat(html): Add loading="lazy" to img tag

articles/2013-08-07-alfred2-font-awesome-workflow.md

@@ -9,7 +9,7 @@
 
 <figure>
 <a href="https://github.com/ruedap/alfred2-font-awesome-workflow">
-<img src="http://gifzo.net/ZqCN4wKUcq.gif" alt="Font Awesome Workflow for Alfred 2">
+<img loading="lazy" src="/images/2013/08/07/alfred2-font-awesome-workflow-screencast.gif" alt="Font Awesome Workflow for Alfred 2">
 <figcaption>Font Awesome Workflow for Alfred 2</figcaption>
 </a>
 </figure>

articles/2013-10-25-alfred-workflow-for-font-awesome-4.md

@@ -2,7 +2,7 @@
 
 <figure>
 <a href="https://github.com/ruedap/alfred2-font-awesome-workflow">
-<img src="/images/2013/10/25/alfred-workflow-for-font-awesome-4-01.png" alt="Font Awesome Workflow for Alfred 2">
+<img loading="lazy" src="/images/2013/10/25/alfred-workflow-for-font-awesome-4-01.png" alt="Font Awesome Workflow for Alfred 2">
 <figcaption>Font Awesome Workflow for Alfred 2</figcaption>
 </a>
 </figure>

articles/2013-11-11-github-flow-blog.md

@@ -28,7 +28,7 @@
 
 <figure>
 <a href="/images/2013/11/11/github-flow-blog-02.png">
-<img src="/images/2013/11/11/github-flow-blog-02.png" alt="GitHub Flow Blog Workflow">
+<img loading="lazy" src="/images/2013/11/11/github-flow-blog-02.png" alt="GitHub Flow Blog Workflow">
 <figcaption>Pull RequestとCIを使ったGitHub Flowなブログ環境</figcaption>
 </a>
 </figure>
@@ -114,7 +114,7 @@
 
 <figure>
 <a href="/images/2013/11/11/github-flow-blog-03.png">
-<img src="/images/2013/11/11/github-flow-blog-03.png" alt="Edit">
+<img loading="lazy" src="/images/2013/11/11/github-flow-blog-03.png" alt="Edit">
 <figcaption>GitHub Web UIの編集画面</figcaption>
 </a>
 </figure>

articles/2013-11-18-font-awesome-workflow-for-web-designers.md

@@ -4,7 +4,7 @@
 
 <figure>
 <a href="/images/2013/11/18/font-awesome-workflow-for-web-designers-01.gif">
-<img src="/images/2013/11/18/font-awesome-workflow-for-web-designers-01.gif" alt="Illustrator CC上でアイコンフォントをペーストしている動作例">
+<img loading="lazy" src="/images/2013/11/18/font-awesome-workflow-for-web-designers-01.gif" alt="Illustrator CC上でアイコンフォントをペーストしている動作例">
 <figcaption>Illustrator CC上でアイコンフォントをペーストしている動作例</figcaption>
 </a>
 </figure>

articles/2014-01-31-37signals-remote-1996.md

@@ -1,7 +1,7 @@
 # <span>37signalsのREMOTEを読み終えて、</span><span>1996年のリモートワークを振り返る</span>
 
 
-<a href="http://www.amazon.co.jp/o/ASIN/4152094338/ruedap-22/" class="e-bookCover"><img src="http://ecx.images-amazon.com/images/I/41yuQfqd1kL.jpg" alt="REMOTE - 強いチームはオフィスを捨てる"></a>
+<a href="http://www.amazon.co.jp/o/ASIN/4152094338/ruedap-22/" class="e-bookCover"><img loading="lazy" src="http://ecx.images-amazon.com/images/I/41yuQfqd1kL.jpg" alt="REMOTE - 強いチームはオフィスを捨てる"></a>
 
 3年前に[REWORKを読んだ時](/2011/03/18/rework-37signals-dhh-book-sentence)は、ものすごくグッと来るものがあり、それは今でも年に数回読み返すくらいのお気に入りになっている。そんな37signalsがリモートワークについての新しい本を出し、ありがたいことに[日本語版もすぐ出版された](http://www.amazon.co.jp/o/ASIN/4152094338/ruedap-22/)ので、即予約して手に入れたその日に一気に読み終えた。
 
@@ -43,7 +43,7 @@
 
 <figure>
 <a href="/images/2014/01/31/37signals-remote-1996.png">
-<img src="/images/2014/01/31/37signals-remote-1996.png" alt="メールマガジン編集のリモートワークに関する1998年の雑誌記事" style="width: 450px;">
+<img loading="lazy" src="/images/2014/01/31/37signals-remote-1996.png" alt="メールマガジン編集のリモートワークに関する1998年の雑誌記事" style="width: 450px;">
 </a>
 <figcaption>メールマガジン編集のリモートワークに関する1998年の雑誌記事<br>「SOHO」という単語も流行っていた</figcaption>
 </figure>

articles/2014-02-10-readable-code.md

@@ -1,6 +1,6 @@
 # <span>リーダブルコードを読み終えて、</span><span>ノンデザイナーズ・デザインブックを読み返す</span>
 
-<a href="http://www.amazon.co.jp/o/ASIN/4873115655/ruedap-22/" class="e-bookCover"><img src="http://ecx.images-amazon.com/images/I/51MgH8Jmr3L._CR2,2,352,498_.jpg" alt="リーダブルコード"></a>
+<a href="http://www.amazon.co.jp/o/ASIN/4873115655/ruedap-22/" class="e-bookCover"><img loading="lazy" src="http://ecx.images-amazon.com/images/I/51MgH8Jmr3L._CR2,2,352,498_.jpg" alt="リーダブルコード"></a>
 
 今年のテーマは、積ん読を減らすことにした。良さそうな本があったりセールがあったりするとついつい買ってしまって、それである程度満足して読まないまま、というパターンにハマっていることが、AmazonのKindle日本上陸以降の自分の買い方で一目瞭然になってきたからである。ゆゆしき事態。
 
@@ -47,7 +47,7 @@
 
 ## 伝える
 
-<a href="http://www.amazon.co.jp/o/ASIN/4839928401/ruedap-22/" class="e-bookCover"><img src="http://ecx.images-amazon.com/images/I/41nvddaG9BL.jpg" alt="ノンデザイナーズ・デザインブック"></a>
+<a href="http://www.amazon.co.jp/o/ASIN/4839928401/ruedap-22/" class="e-bookCover"><img loading="lazy" src="http://ecx.images-amazon.com/images/I/41nvddaG9BL.jpg" alt="ノンデザイナーズ・デザインブック"></a>
 
 リーダブルコードが発売されて話題になったのは2年くらい前だったと思うけど、今はもちろん、今後も色褪せない良書なのは間違いなさそう。その内容は、コードを書くときだけでなく、前述のとおりいろいろな場面で当てはめることができる。つまるところそれは「何かを伝えるという行為」であれば、何にでも応用の効くことなのかもしれない。
 

components/atoms/footer_logo/index.tsx

@@ -2,6 +2,6 @@ import { PORTFOLIO_SITE_NAME } from '@/utils/constants'
 import styles from './styles.module.scss'
 
 // TODO: inline svg
-const FooterLogo = () => <img src="/images/common/footer-logo.svg" className={styles.Root} alt={PORTFOLIO_SITE_NAME} />
+const FooterLogo = () => <img loading="lazy" src="/images/common/footer-logo.svg" className={styles.Root} alt={PORTFOLIO_SITE_NAME} />
 
 export default FooterLogo

components/atoms/header_logo/index.tsx

@@ -1,6 +1,6 @@
 import { BLOG_NAME } from '@/utils/constants'
 
 // TODO: inline svg
-const HeaderLogo = () => <img src="/images/common/blog-logo.svg" style={{ width: '100% '}} alt={BLOG_NAME} />
+const HeaderLogo = () => <img loading="lazy" src="/images/common/blog-logo.svg" style={{ width: '100% '}} alt={BLOG_NAME} />
 
 export default HeaderLogo