コードとマークアップのQ&Aのサンプル画像 [closed] 質問する

コードとマークアップのQ&Aのサンプル画像 [closed] 質問する

準備する際にはMCVE/スイス画像が関係する場合は、画像に直接アクセスできると便利です。

ほとんどの質問に対応する画像の種類は、複数の色や形の小さな画像、透明度のある/ないアニメーション GIF、画像の「ペア」であり、画像遷移、タイル セット、スプライト シートで使用できる JPEG などです。

このような例にホットリンクできる、オンサイトのライセンスおよびロイヤリティフリーの小さな画像 (30 KB 未満) はありますか?

ベストアンサー1

ここでは、主に SO の既存の回答から抜粋した、よく使用されるサンプル画像をいくつか紹介します。

アイコン

シンプルな幾何学的形状Javaを使用して生成されたこの答えURL を定義して簡単にアクセスできるようにする Java ベースのインターフェイスが含まれています。

詳細:部分的に透明な 32x32 ピクセルの PNG (4 色 x 5 つの形状) (エッジに沿って)。

カテゴリー:

  
  

スプライトシート

チェスの駒元々はこの答えこれには他の 2 つのスプライト セット (異なる色の同じ画像) が含まれます。

詳細:部分的に透明な 384x128 px (各スプライト 64x64 px) PNG。

カテゴリー:

アニメーション

GIF はアニメーションをサポートする唯一の画像形式です。以下にいくつか例を示します。

カテゴリー:

ソリッドBG

アニメーション破線枠に見られるようにこの答え

詳細:100x30 ピクセル、背景塗りつぶし(透明なし)

ズームする星に見られるようにこの答えもともとはスクリーンセーバーの「スクリーンショット」として開発されました。

詳細:160x120 ピクセル、背景塗りつぶし(透明なし)

アニメーションウォーターに見られるようにこの答えゲーム内のタイルをアニメーション化する

詳細:60x60 ピクセル、背景塗りつぶし(透明なし)

透明な背景

軌道アニメーション、もともと開発された1.1C内側の惑星の軌道(水星から木星まで、小惑星帯の厚い部分にある追加の軌道を含む)。暗い背景のほうが見やすいです。

詳細:透明な 450x450 および 150x150 ピクセルのアニメーション GIF。

ピクチャー

日の出と月の入りオーストラリアのシドニー中心部上空
望遠鏡で見る夕日と金星オーストラリアのキャンベラ近郊のストロムロ山にて。

カテゴリー: + 画像のトランジション

詳細:480x320 px JPEG x 4。(ここでは 1/2 サイズで表示されています。)


夜明けのパノラマシドニーの南東郊外全域にわたります。

カテゴリー: (スクロール)

詳細:1474x436ピクセルJPEG。

夜明けのパノラマ

タイル

これ地球のメルカトル図法左/右に並べて表示できます。この答え回答には、赤道を示す半透明の線 (中央ではなく、かなり下にあります) を示す画像の 2 番目のバージョンも含まれています。

詳細:640x316 px (中央赤道の下部に 44 px を追加) 透明な背景の PNG。

カテゴリー: (スクロール)

ヒント

画像の URL を取得するには、ブラウザに表示されている画像を「コンテキスト クリック」し、次のいずれかを実行します。

  • プロパティを表示します。表示されるダイアログから URL をコピーできます。
  • 画像を表示します。ブラウザのアドレスバーから URL をコピーします。

あるいは:

  • ブラウザの「ソースを表示」機能を使用して、HTML からコピーします。
  • 十分な評価(100以上、コミュニティWikiの回答を編集する)がある方は、回答を編集するテキストから URL を取得します。

コード

以下は、MCVE に貼り付けるのに適した、チェスの駒のスプライト シートを分割する Java クラスです。

import java.awt.image.*;
import javax.imageio.*;
import java.net.*;
import java.io.*;
import java.util.*;

public final class ChessSprites {
    private ChessSprites() {}
    public static final int SIZE = 64;
    public static final BufferedImage SHEET;
    static {
        try {
            // see https://stackoverflow.com/a/19209651/2891664
            SHEET = ImageIO.read(new URL("https://i.sstatic.net/memI0.png"));
        } catch (IOException x) {
            throw new UncheckedIOException(x);
        }
    }
    public static final BufferedImage GOLD_QUEEN    = SHEET.getSubimage(0 * SIZE, 0,    SIZE, SIZE);
    public static final BufferedImage SILVER_QUEEN  = SHEET.getSubimage(0 * SIZE, SIZE, SIZE, SIZE);
    public static final BufferedImage GOLD_KING     = SHEET.getSubimage(1 * SIZE, 0,    SIZE, SIZE);
    public static final BufferedImage SILVER_KING   = SHEET.getSubimage(1 * SIZE, SIZE, SIZE, SIZE);
    public static final BufferedImage GOLD_ROOK     = SHEET.getSubimage(2 * SIZE, 0,    SIZE, SIZE);
    public static final BufferedImage SILVER_ROOK   = SHEET.getSubimage(2 * SIZE, SIZE, SIZE, SIZE);
    public static final BufferedImage GOLD_KNIGHT   = SHEET.getSubimage(3 * SIZE, 0,    SIZE, SIZE);
    public static final BufferedImage SILVER_KNIGHT = SHEET.getSubimage(3 * SIZE, SIZE, SIZE, SIZE);
    public static final BufferedImage GOLD_BISHOP   = SHEET.getSubimage(4 * SIZE, 0,    SIZE, SIZE);
    public static final BufferedImage SILVER_BISHOP = SHEET.getSubimage(4 * SIZE, SIZE, SIZE, SIZE);
    public static final BufferedImage GOLD_PAWN     = SHEET.getSubimage(5 * SIZE, 0,    SIZE, SIZE);
    public static final BufferedImage SILVER_PAWN   = SHEET.getSubimage(5 * SIZE, SIZE, SIZE, SIZE);
    public static final List<BufferedImage> SPRITES =
        Collections.unmodifiableList(Arrays.asList(GOLD_QUEEN,  SILVER_QUEEN,
                                                   GOLD_KING,   SILVER_KING,
                                                   GOLD_ROOK,   SILVER_ROOK,
                                                   GOLD_KNIGHT, SILVER_KNIGHT,
                                                   GOLD_BISHOP, SILVER_BISHOP,
                                                   GOLD_PAWN,   SILVER_PAWN));
}

おすすめ記事