web-dev-qa-db-ja.com

コードとマークアップのQ＆Aのサンプル画像

画像を含む [〜＃〜] mcve [〜＃〜] / [〜＃〜] sscce [〜＃〜] を準備する場合、画像へのアクセス。

ほとんどの質問に対応する画像の種類は次のとおりです-複数の色または形状の小さな画像、透明の有無にかかわらずアニメーションGIF、画像の「ペア」であり、画像トランジション、タイルセット、スプライトシートで使用できるJPEG。

これらのタイプの例のためにホットリンクできる小さな（30KB未満）、オンサイト、ライセンスおよびロイヤリティフリーの画像はありますか？

javajavascriptcssimage
128
Andrew Thompson

以下は、主にSOに関する既存の回答からの、一般的な使用のための画像の例です。

アイコン

Java この回答 で最初に見たように）を使用して生成された単純な幾何学形状 Java URLを定義し、アクセスしやすくするベースのインターフェース。

詳細：32x32ピクセルのPNG（4色x 5形状）で、部分的に透明（エッジに沿って）。

カテゴリ：pngicons

 
 

スプライトシート

Chess Piecesこの答え に見られるように、他の2つのスプライトセット（異なる色の同じ画像）が含まれています。

詳細：384x128 px（各スプライト64x64 px）部分的な透過性を備えたPNG。

カテゴリ：pngSprite-sheeticons

アニメーション

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

カテゴリ：gifanimated-gif

ソリッドBG

この回答 に見られるアニメーション化された破線の境界線。

詳細：100x30ピクセル、塗りつぶされたBG（透明なし）

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

詳細：塗りつぶされたBGで160x120ピクセル（透明度なし）

この回答 to アニメーションのタイルのアニメーション に見られるアニメーション水。

詳細：60x60 px、塗りつぶされたBG（透明度なし）

透明なBG

軌道アニメーション、元々 1.1C のために開発されました。 「内部」惑星の軌道（水星から木星まで、小惑星帯の太い部分に余分な軌道が表示されています）。暗いBGでより良い。

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

ピクチャー

オーストラリアのシドニーのCBD上の日の出と月の入り
オーストラリア、キャンベラ近郊のストロムロ山の望遠鏡に沈む夕日と金星。

カテゴリ：jpegslideshow + Image Transitions

詳細：480x320 px JPEG x 4.（ここに1/2サイズで表示されます。）


シドニーの南東郊外の夜明けのパノラマ。

カテゴリ：jpgパノラマアニメーション （スクロール）

詳細：1474x436 px JPEG。

Dawn Panorama

タイル

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

詳細：640x316 px（中央赤道の下部に44 pxを追加）PNG透明BG付き。

カテゴリ：pngタイルアニメーション （スクロール）

ヒント

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

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

代わりに：

  • ブラウザの「ソースの表示」を使用して、HTMLからコピーします。
  • 十分な担当者のために。 （100+、コミュニティWikiの回答を編集するには）、 回答を編集 に移動し、テキストからURLを取得します。

コード

以下はJavaクラスで、MCVEへの貼り付けに適したチェスの駒Spriteシートを分割します：

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.stack.imgur.com/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));
}
70
Andrew Thompson