Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
もう一度imgタグをおさらいしよう
Search
Yoshihiro Hasegawa
January 23, 2023
Programming
0
140
もう一度imgタグをおさらいしよう
2023年1月23日(月)Markup Meetup #3 LT資料
Yoshihiro Hasegawa
January 23, 2023
Tweet
Share
More Decks by Yoshihiro Hasegawa
See All by Yoshihiro Hasegawa
htmxって知っていますか?次世代のHTML
hiro_ghap1
0
560
LINE公式アカウント&WordPressで更新頻度が上がった話
hiro_ghap1
1
160
リッチリザルトのための構造化データハンズオン
hiro_ghap1
0
56
クリック率アップを目指す!リッチリザルトのための構造化データ
hiro_ghap1
0
560
2020年からWebサイトが意匠権の対象になります
hiro_ghap1
0
430
すぐできる構造化データマークアップ
hiro_ghap1
1
230
Other Decks in Programming
See All in Programming
RailsGirls IZUMO スポンサーLT
16bitidol
0
180
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
480
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
87
29k
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
790
ニーリーにおけるプロダクトエンジニア
nealle
0
840
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
160
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
360
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
590
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
1
13k
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.3k
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
54
11k
How to Ace a Technical Interview
jacobian
278
23k
It's Worth the Effort
3n
185
28k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Faster Mobile Websites
deanohume
307
31k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Designing for humans not robots
tammielis
253
25k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
Transcript
͏ҰJNHλάΛ͓͞Β͍͠Α͏ ୩ت༸ .BSLVQ.FFUVQ
㲔 ୩ ت༸ גࣜձࣾεςϥΫϦΤΠτ දऔక ૯߹WebαʔϏε λμϑϥ ද σδλϧϋϦουେࡕ ඇৗۈߨࢣ
ژܳज़σβΠϯઐֶߍ ඇৗۈߨࢣ ௗऔݝձ࿈߹ձ ొઐՈ גࣜձࣾHow to Use CTO ϑϩϯτΤϯυΤϯδχΞ / ͷιϜϦΤ® hiro_ghap1 chocolat_street
㲔 ୩ ت༸ גࣜձࣾεςϥΫϦΤΠτ දऔక σδλϧϋϦουେࡕ ඇৗۈߨࢣ ௗऔݝձ࿈߹ձ ొઐՈ גࣜձࣾHow
to Use CTO ϑϩϯτΤϯυΤϯδχΞ / ͷιϜϦΤ® hiro_ghap1 chocolat_street hiro_ghap1
㲔 ୩ ت༸ גࣜձࣾεςϥΫϦΤΠτ දऔక σδλϧϋϦουେࡕ ඇৗۈߨࢣ ௗऔݝձ࿈߹ձ ొઐՈ גࣜձࣾHow
to Use CTO ϑϩϯτΤϯυΤϯδχΞ / ͷιϜϦΤ® hiro_ghap1 chocolat_street
͏ҰJNHλάΛ͓͞Β͍͠Α͏
)5.-4UBOEBSEͰͷJNHλά
ίϯςϯπΧςΰϦʔ ίϯςϯπΧςΰϦʔ)5.-)ZQFS5FYU.BSLVQ-BOHVBHFc.%/ IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC)5.-$POUFOU@DBUFHPSJFT
)5.-4UBOEBSEͰͷJNHλά ϑϩʔίϯςϯπ ϑϨʔδϯάίϯςϯπ ΤϯϕσΟουίϯςϯπ
)5.-4UBOEBSEͰͷJNHλά ϑϩʔίϯςϯπ ϑϨʔδϯάίϯςϯπ ΤϯϕσΟουίϯςϯπ ཁૉ͕VTFNBQଐੑΛͭ߹ ΠϯλϥΫςΟϒίϯςϯπ ύϧύϒϧίϯςϯπ
ίϯςϯπΧςΰϦʔ ίϯςϯπΧςΰϦʔ)5.-)ZQFS5FYU.BSLVQ-BOHVBHFc.%/ IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC)5.-$POUFOU@DBUFHPSJFT
)5.-4UBOEBSEͰͷJNHλά ϑϩʔίϯςϯπ ϑϨʔδϯάίϯςϯπ ΤϯϕσΟουίϯςϯπ ཁૉ͕VTFNBQଐੑΛͭ߹ ΠϯλϥΫςΟϒίϯςϯπ ύϧύϒϧίϯςϯπ ϑϩʔίϯςϯπ CPEZͰ༻͞ΕΔ ΄ͱΜͲͷཁૉ
)5.-4UBOEBSEͰͷJNHλά ϑϩʔίϯςϯπ ϑϨʔδϯάίϯςϯπ ΤϯϕσΟουίϯςϯπ ཁૉ͕VTFNBQଐੑΛͭ߹ ΠϯλϥΫςΟϒίϯςϯπ ύϧύϒϧίϯςϯπ ϑϨʔδϯάίϯςϯπ ஈམͰ༻͞ΕΔཁૉɻ ฏͰݴ͏ͱ͜ΖͷΠϯϥΠϯཁૉɻ
)5.-4UBOEBSEͰͷJNHλά ϑϩʔίϯςϯπ ϑϨʔδϯάίϯςϯπ ΤϯϕσΟουίϯςϯπ ཁૉ͕VTFNBQଐੑΛͭ߹ ΠϯλϥΫςΟϒίϯςϯπ ύϧύϒϧίϯςϯπ ΤϯϕσΟουίϯςϯπ จॻʹຒΊࠐΈΛߦ͏ཁૉɻ ʢJNH
WJEFP JGSBNF DBOWBTʜʣ
)5.-4UBOEBSEͰͷJNHλά ϑϩʔίϯςϯπ ϑϨʔδϯάίϯςϯπ ΤϯϕσΟουίϯςϯπ ཁૉ͕VTFNBQଐੑΛͭ߹ ΠϯλϥΫςΟϒίϯςϯπ ύϧύϒϧίϯςϯπ
)5.-4UBOEBSEͰͷJNHλά ϑϩʔίϯςϯπ ϑϨʔδϯάίϯςϯπ ΤϯϕσΟουίϯςϯπ ཁૉ͕VTFNBQଐੑΛͭ߹ ΠϯλϥΫςΟϒίϯςϯπ ύϧύϒϧίϯςϯπ ΠϯλϥΫςΟϒίϯςϯπ ૢ࡞Մೳͳཁૉ ʢB
CVUUPO EFUBJMT JOQVUʜʣ
)5.-4UBOEBSEͰͷJNHλά ϑϩʔίϯςϯπ ϑϨʔδϯάίϯςϯπ ΤϯϕσΟουίϯςϯπ ཁૉ͕VTFNBQଐੑΛͭ߹ ΠϯλϥΫςΟϒίϯςϯπ ύϧύϒϧίϯςϯπ ύϧύϒϧίϯςϯπ ϑϩʔ͘͠ ϑϨʔδϯάίϯςϯπͰ
ࢹ֮ՄೳͳཁૉΛแ͍ͯ͠Δ
)5.-4UBOEBSEͰͷJNHλά ϑϩʔίϯςϯπ ϑϨʔδϯάίϯςϯπ ΤϯϕσΟουίϯςϯπ ཁૉ͕VTFNBQଐੑΛͭ߹ ΠϯλϥΫςΟϒίϯςϯπ ύϧύϒϧίϯςϯπ ͜ͷཁૉΛ༻Ͱ͖ΔίϯςΩετ ΤϯϕσΟουίϯςϯπ͕ ظ͞ΕΔॴɻ
Ҏ্ͷ ϥϯΩϯάγάφϧʹΑΓɺ ݕࡧॱҐΛܾఆ͍ͯ͠Δ )5.-4UBOEBSEͰͷJNHλά $BOJODMVEF IUUQTDBOJODMVEFHMJUDINF
Ҏ্ͷ ϥϯΩϯάγάφϧʹΑΓɺ ݕࡧॱҐΛܾఆ͍ͯ͠Δ )5.-4UBOEBSEͰͷJNHλά CPEZԼʹ͋ͬͯ0,
)5.-4UBOEBSEͰͷλάνΣοΫ $BOJODMVEF IUUQTDBOJODMVEFHMJUDINF
JNHλάͷศརͳଐੑ
EFDPEJOHlBTZODz
EFDPEJOHlBTZODz ը૾ͷσίʔσΟϯάΛඇಉظͰߦ͏
EFDPEJOHlBTZODz $BO*VTF4VQQPSUUBCMFTGPS)5.- $44 FUD IUUQTDBOJVTFDPN
MPBEJOHlMB[Zz
MPBEJOHlMB[Zz WJFXQPSU͕ۙͮ͘ͱ ը૾ͷಡΈࠐΈΛߦ͏ ※width ͱ height ͕ඞཁ
MPBEJOHlMB[Zz $BO*VTF4VQQPSUUBCMFTGPS)5.- $44 FUD IUUQTDBOJVTFDPN
ͲͪΒΛ͏ʁ EFDPEJOHlBTZODz MPBEJOHlMB[Zz
ͲͪΒΛ͍͍͔͑ʁ ΏΊΈc%9 4P& 696* ΞδϟΠϧ %FW0QT άϩʔεϋοΫ IUUQTXXXZVNFNJDPKQ
ͲͪΒΛ͍͍͔͑ʁ ϑΝʔετϏϡʔपล decoding=“async” ͦΕҎ߱ loading=“lazy” ΏΊΈc%9 4P& 696* ΞδϟΠϧ %FW0QT
άϩʔεϋοΫ IUUQTXXXZVNFNJDPKQ
ͲͪΒΛ͍͍͔͑ʁ ϑΝʔετϏϡʔपล decoding=“async” ͦΕҎ߱ loading=“lazy” ϨΠΞτγϑτରࡦʹ width ͱ height ݁ہඞཁ
QJDUVSFλά
QJDUVSFλά ݅ʹԠͯ͡ಡΈࠐΉ ը૾ϑΝΠϧΛΓସ͑Δɻ
QJDUVSFλά ݅ʹԠͯ͡ಡΈࠐΉ ը૾ϑΝΠϧΛΓସ͑Δɻ ༨ܭͳϑΝΠϧΛಡΈࠐ·ͳ͍
QJDUVSFλά ※width ͱ height ͕ඞཁ $BO*VTF4VQQPSUUBCMFTGPS)5.- $44 FUD IUUQTDBOJVTFDPN
QJDUVSFλά ݅ʹԠͯ͡ಡΈࠐΉ ը૾ϑΝΠϧΛΓସ͑Δɻ
TPVSDFλά
QJDUVSFλά ͳ͠Ͱʜʁ
QJDUVSFλάͳ͠Ͱʜʁ
QJDUVSFλάͳ͠Ͱʜʁ
QJDUVSFλάͳ͠Ͱʜʁ
·ͱΊ
ϒϥβαΠζͰը૾ͷॎԣൺ͕มΘΔʁ 8FC1ͳͲͷ৽͍͠ن֨ͷը૾ΛಡΈࠐΉʁ ·ͱΊ :FT /P QJDUVSFλά JNHλάͷΈ
TSDTFUΛ༻͢ΔϝϦοτ ·ͱΊ ը໘ͷϐΫηϧີදࣔ͢Δը૾αΠζʹΑͬͯ దͳϑΝΠϧͷಡΈࠐΈΛߦ͍ɺಡΈࠐΈ༰ྔΛ ͑ΒΕΔ͜ͱͰ͢ɻ
QJDUVSFλάΛ༻͢ΔϝϦοτ ·ͱΊ εϚϗͰॎɺ1$ͰԣͳͲɺ ॎԣൺͷҟͳΔը૾Λը໘αΠζʹΑͬͯ ඞཁͳը૾͚ͩΛಡΈࠐΊΔ͜ͱͰ͢ɻ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ