0
0

【初学者によるまとめ】この一冊で全部わかるWeb技術の基本 「Chapter4」>「02 Webページで使用される画像形式」

Posted at

目的:「イラスト図解式 この一冊で全部わかるWeb技術の基本」の要点を自分なりにまとめ、Qiitaへアウトプットして理解力の向上に努める。

注意点
🤔 ←この絵文字の文章は個人的な見解になります。的外れなこともあるかと思います。
例)🤔<(感想、考察、疑問点など)

(参考書籍)

  1. イラスト図解式 この一冊で全部わかるWeb技術の基本
  2. HTML5 & CSS3 デザインレシピ集

(参考サイト)

  1. ラクスエンジニアブログ
  2. 株式会社アーティス

画像img要素で表示する

  • 画像はimg要素で表示する
    • img要素には閉じタグは必要無い
    • src属性に「ファイルが配置してあるパス」を指定する
img要素による画像表示
<img src="app/images/image.jpg">
  • Webで扱う画像データは「ネットワーク転送量」の観点から、ネットワーク転送量を減らす目的で基本的にはデータサイズが小さい形式が使われる
画像形式 主な特徴
JPEG ・主に写真やイラストなど色数が多い画像に使用される
・画像を加工するよりも、そのまま画像を表示する場合に適する
PNG ・主にシンプルなロゴや図など色数が少ない画像に使用される
・JPEGとは異なり画像の透過が可能なので、背景となじませたり、画像を重ねて使用したりと画像の加工が可能
GIF ・GIFはパラパラ漫画のようなアニメーションが表示可能
・画像として扱う場合にはPNG形式などそちらを採用した方が良い
SVG ・Webページで使える唯一のベクター形式の画像ファイル
・拡大縮小しても画質が変わらない

>ベクタ形式について
複数の点(アンカー)の位置とそれを繋いだ線、色、カーブなどを数値データとして記憶し再現する形式をベクタ形式といいます。数値で管理しているので、描いたグラフィック自体はデータ量も小さく、変形がしやすいです。

https://www.asobou.co.jp/blog/web/vector-raster#i-2:~:text=%E3%81%8C%E8%90%BD%E3%81%A1%E3%81%BE%E3%81%99%E3%80%82-,%E3%83%99%E3%82%AF%E3%82%BF%E5%BD%A2%E5%BC%8F%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6,-%E8%A4%87%E6%95%B0%E3%81%AE%E7%82%B9

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0