すべてのカテゴリ

画像ファイルやデータには、「JPG」や「PNG」といった拡張子が必ず付いています。これらの違いを正確に答えられますか？拡張子は、それぞれの特性を理解して使用しないと、データの容量が重くなってしまったり、画質が想定より悪くなってしまったり、ファイルが開けなくなってしまったりと、様々なトラブルが発生してしまう可能性があります。ここでは、拡張子の種類や特徴、注意点について解説します。ぜひ参考にして正しい拡張子を選んでください。拡張子とは、ファイルの種類を識別するための文字列のことです。画像やテキストファイルを保存したときに、ファイル名の右側に表示される「.jpg」や「.txt」といった3～4文字程度の文字列のことを指します。この拡張子によって、開くアプリケーションが変わります。「.xlsx」であればエクセル、「.doc」であればワード、「.html」であればWebページといったように、何のアプリケーションで作られたかを判断し、自動的に起動する仕組みとなっているのです。そのため、拡張子を無暗に変更するとファイルが開けなくなり、最悪の場合ファイルが壊れて復元できなくなってしまうこともあります。画像ファイルの拡張子それでは、拡張子には具体的にどのような種類があるのか、どのような時に選べばいいのかを見ていきましょう。JPEGJPEG（ジェイペグ）はJoint Photographic Experts Groupの略で、拡張子は「.jpg（.jpeg）」となります。フルカラー1670万色まで扱うことができるので、色数の多い写真や、グラデーションのように色が細かく変化する画像の保存に適していま

今回もイラストACの素材と、CSSで素敵にお飾りします！よかったら参考にしてみてくださいね🎶完成見本https://　tsuyu0102.github.io/css-sample/blinking-hearts/index.html⭐️左上、右下のテープは、固定していて、右上のハートはアニメーションで点滅させています。▼1200px幅▼480px幅▼320px幅PNG▼画像は、イラストACのこちらの素材をダウンロードしました。https://　www.ac-illust.com/main/detail.php?id=23388725&word=%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E5%8F%AF%E6%84%9B%E3%81%84%E3%81%82%E3%81%97%E3%82%89%E3%81%84%E3%82%BB%E3%83%83%E3%83%88#goog_rewarded⭐️イラストACの利用にはアカウント（無料）が必要です。⭐️今回は、素材それぞれに色をつけて、tape.png, heart01.png, heart02.pngという名前で保存しました。それらをimgフォルダ内に入れました。大きさは変えてないです。背景は透明です。html<div class="container">   <h2>INFORMATION</h2>   <img src="img/tape.png" alt="upper-tape" class="upper-tape" />   <im

こんにちは。イラストレーターぽんです。今回はイラストの保存形式について簡単にお話します。こちらのアイコン販売では、画像のお渡し形式が2種類あります。お客様のご希望のものをお渡ししています。2つ必要な方には2つお渡しします！JPG形式とPNG形式JPG形式：イラスト＋背景ありのデータ形式↓こんな感じのデータです。・背景を自分の好きな色に設定できる・デメリットは、写真の上に配置するには不向きな場合があるということ。PNG形式：イラストのみ、背景なしのデータ形式背景がないので背面は透明（透過とも言います）↓こんな感じのデータです。・LINEスタンプのようなイメージで使うことができる！・背景がない・写真などの上に配置しても使いやすいデータ形式・SNS投稿やYouTubeの中でアイコンを使って編集したい場合に便利それぞれ、違った特徴があります。「背景をつけたいかどうか」という点が一番違うところです。ざっくり説明でしたがイメージが少しでも伝わればうれしいです。それではまた〜！＾＾イラストレーター　ぽんでした

ちょっとなにかツールを作りたくて、作ってみました。chatgptのDALL-Eで画像生成すると、エクスポートできるのがWEBPというフォーマットです。ブログなどに掲載する時に、WEBPを扱えないサイトが多く、PNGにするのが、少し手間でした。で、「Custom Context Menu」という右クリックを作るソフトを使い画像変換を入れて、右クリックで簡単にPNGにするツールを作りました。1秒で変換します。明日は、コード系のスニペットDBツールを作ろうかと思います。60分以内で作れる小物ツール作成タイムで。自作してあるいろんな関数などを打ち込めて、検索したり、AIにデータとして使えるようにおくと便利かも。Electron x Sqlite で作ってみようかと。実はChrome拡張機能で同じようなものを作っているのですが、スニペット数が増えすぎて、視認性が悪くなってしまった。勉強のためにも、Electronなんていう珍しいものを使ってみようかなと。クライアントになにか納品する時にも、もしかすると使えるかもしれない。

そもそもPNGとJPEGの違いは皆さんご存じでしょうか？早速違いを早見表にしてみました。バン！「PNGは透過できるけどJPEG（JPGと同じ）は透過できない！」これはご存じの方も多いのではないでしょうか。僕も1番の違いはここなんじゃないかなと思います。それでは、「データ圧縮」の違いについてはご存じでしょうか。PNGとJPEGはどちらもデータ保存する段階でデータ圧縮をしています。ですが、、、保存したデータをまた画像として表示するとき、PNGはほぼ圧縮前の画質に戻せるのに対して、JPEGは圧縮前に戻すことができません、、、！こう見ると、なんだかPNGはJPEGの上位互換なのでは、、、僕も恥ずかしながら前まではそう思っておりました。それぞれちゃんとメリット・デメリットがあるんです、、、！特徴を理解して用途に合わせて使い分けることで、その画像をより効果的に使用することができます！PNGとJPEGの違いについてもう少し詳しく見ていきましょう。PNGのメリットPNGのメリットは大きく分けて４つあります。・画像が劣化しにくい ・透過（透明化）ができる ・色数が多いフルカラーの画像も対応している ・単色のイラストやロゴに適しているPNGはJPEGと違って、同じ色を保存するのが得意なので、イラストなどの単色で塗りつぶす画像に適しています。また背景の透過もできるため、画像を切り抜いて背景を透明にし、スタンプのように扱うこともできます。 また、PNGは可逆圧縮といって、何度保存しても画像が劣化しにくいです。PNGのデメリットフルカラーの画像を保存する際にファイルサイズが重くなることです。 ファイル

今回はイラストACから素材をダウンロードして色々装飾していきたいと思います。サイトのお飾りの参考にしてみてください⭐️完成見本https://　tsuyu0102.github.io/css-sample/floating-png/index.html▼1200px幅▼480px幅⭐️上のお飾りは背景の右上、左上に固定されていて、下の音符と星はぷかぷか浮いているようにアニメーションで動かしています。イラストACから素材をダウンロードイラストACの利用にはログイン（無料登録）が必要です。▼完成見本のお飾りは、こちらの素材を使用しました。https://　www.ac-illust.com/main/detail.php?id=23388725&word=%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E5%8F%AF%E6%84%9B%E3%81%84%E3%81%82%E3%81%97%E3%82%89%E3%81%84%E3%82%BB%E3%83%83%E3%83%88#goog_rewardedPNGかAIだと背景が透明なのでおすすめです。▼使うパーツごとに色をつけて、png形式で保存。imgフォルダに入れました。html<div class="container">   <h2>NEW ITEM</h2>   <p>Lorem Ipsumは、印刷および植字業界の単なるダミー テキストです。Lorem Ipsum は、無名の印刷業者が活字のゲラをスクランブルして活字見本帳を作成した 1500

Google FontsのアイコンはPNGとSVGのダウンロードもできるので、今回はこちらを試してみたいと思います！Google Fontsのアイコンにアクセスhttps://　fonts.google.com/icons▼今回はAccount Circleというアイコンを使ってみます。Fillにチェックを入れて、Weight700にしてみます。▼使いたいアイコンをクリックすると、コードが出てきます。今回は右下にある、SVGとPNGというのを使ってみたいと思います。SVGとPNGをダウンロードそれぞれクリックしてダウンロードします。▼名前を変更してimgフォルダに入れてみました。SVGの方がサイズが若干軽いようです。html下記のように書いてみました。 <p>▼png</p>  <img src="img/account.png" alt="" />  <hr />  <p>▼svg</p>  <img src="img/account.svg" alt="" />⭐️hrとは区切り線のことです。⭐️CSSで背景に色をつけて、imgのサイズを少し大きめに指定してみました。▼ブラウザで確認。違いがわかりますでしょうか？PNGはドット絵になっていて拡大されるとギザギザに見えます。SVGはベクターデータなので拡大されても綺麗に見えます。【参考サイト】SVGとPNGの違いと使い分けhttps://　kinsta.com/jp/blog/svg-vs-png/CSSで色を変更！下記サイトを参考にCSS で

PNGファイルフォーマットが20年以上ぶりにバージョンアップし、第3版が発表されました。 この新仕様では、ハイダイナミックレンジ（HDR）、アニメーションPNG（APNG）、Exifがサポートされることとなります。 特にHDRのサポートにより、画像の色表現がより豊かになり、明るい部分と暗い部分のディテールがさらに際立つようになります。 基本的に、通常のPNGチャンクに加え、4バイトのオーバーヘッドを使用しつつ、HDRの色空間表現を取り入れるという技術的な挑戦がなされています。 また、アニメーションPNGは、Mozillaが提案し、Firefoxがサポートをしてきた経緯があります。 このAPNGが正式にPNGの仕様に組み込まれることで、さらなるプラットフォームへのサポートが期待されています。 各種メタデータを記録するExifに関しても、デジカメでの撮影情報をしっかりと記録できるようになり、ユーザーにとって利便性が向上します。 新仕様を策定したクリス・ブルーム氏は、技術的な解説を通して、HDRサポートの必要性を強調しています。 様々な企業から要望の声も上がり、AdobeやApple、Googleなど大手が参加していることからも、業界全体での関心の高さが伺えます。 これにより、次回の仕様アップデートに向けて作業が進められ、さらなる性能向上が見込まれています。 特にHDRの導入は、画像処理プログラムを作成する際に非常に面白いポイントです。 美しい画像処理が可能になることで、ユーザー体験がどれほど向上するのか、技術の進化を実感できる点にワクワクしています。 新しいAPIの使い方や、各プラ

こんにちは、京獅郎です！ さぁ今回は画像を扱うときに 避けては通れない「拡張子」を簡単にシェアしていきたいと思います。 拡張子と聞くと字体からして難しそうと思いますよね。 でも、そんな事は全くないので気軽に見て下さいね！ ちなみに拡張子とは、 kyosiro.png←この.pngの部分の事です。 それでは今日も楽しくシェアしていきましょう！ Let's share！拡張子とは？拡張子とは、コンピューターなどのデータファイルの属性や内容を表すための文字列うん、ムズい(笑) 全然ピンとこない。 意味としては、ざっくり「ファイルの種類」と覚えておけば大丈夫です。例えば、 ・kyosiro.jpg←写真 ・kyosiro.txt←テキストファイル(メモ帳など) ・kyosiro.pdf←PDFファイル ・kyosiro.mp3←音楽ファイル などなど 他にもあるのですが 今回は画像のファイル形式である PNG・JPG(JPEG)・GIFの3つをシェアしていきます。詳しく知らなくても ざっと知ってれば色々と役立つ事と思います！PNGとJPG(JPEG)が画像ファイル二強！画像を示す拡張子も色々あるのですが 今回のメインは見出しにもあるこの2つの拡張子です。 そうですね、例えば ココナラさんで出品されている絵師さんで 「納品ファイルはPNGファイルになります」とか 「PNGかJPGのどちらかになります」 など、見たことはありませんか？このように画像をやりとりする際も 拡張子は必須になります。 今回はPNGとJPG、それとGIFの特徴を見ていくのですが 特徴を見ていく前に

・ミッドジャーニー以外でもハマっているイラスト作成(類似画像や似顔絵、オリジナル画像)前回の続き。　　　　　　　　　　↓　前回同様　元画像はコチラ　↓　　　　　　↓そして新たに作成したのがコチラです↓ミッドジャーニーはとにかくキーワードが難しい。慣れるまで試行錯誤を繰り返すしかないかな(((((>o<;))焦ってことで格安販売の宣伝(全ての私のサービスには無料で試せるので一度試してみてね)でした