To insert image in an HTML page, use the <img> tags. It is an empty tag, containing only attributes since the closing tag is not required. Just keep in mind that you should use the <img> tag inside <body>… </body> tag.
HTML <picture> Tag The <picture> tag in HTML is used to give flexibility to the web-developers to specify image resources. The <picture> tag contains <source> and <img> tags. The attribute value is set to load more appropriate image. The <img> element is used for the last child element of the picture declaration block.
Here are some example images for common use, mostly from existing answers on SO.
Simple Geometric shapes generated using Java as originally seen in this answer. It includes a Java based interface that defines the URLs and makes them easy to access.
Details: 32x32 pixel PNG (4 colors x 5 shapes) with partial transparency (along the edges).
Categories: png icons
Chess Pieces as originally seen on this answer that includes 2 other sprite sets (same image in different colors).
Details: 384x128 px (each sprite 64x64 px) PNG with partial transparency.
Categories: png sprite-sheet icons
GIF is the only image format that supports animation. Here are a few examples.
Categories: gif animated-gif
Animated dashed border as seen in this answer.
Details: 100x30 px with filled BG (no transparency)
Zooming stars as seen in this answer, originally developed as a 'screen-shot' of a screensaver.
Details: 160x120 px with filled BG (no transparency)
Animated Water as seen in this answer to Animating Tiles In My Game.
Details: 60x60 px with filled BG (no transparency)
Orbital animation, originally developed for 1.1C. The orbits of the 'inner' planets (from Mercury to Jupiter, with an extra orbit shown in the thick of the asteroid belt). Better on a dark BG.
Details: 450x450 & 150x150 px animated GIFs with transparency.
Sunrise & moonset over the CBD of Sydney, Australia
Sunset & Venus over a telescope on Mt Stromlo, near Canberra, Australia.
Categories: jpeg slideshow + Image Transitions
Details: 480x320 px JPEGs x 4. (Displayed here at 1/2 size.)
Panorama at Dawn across the South-Eastern Suburbs of Sydney.
Categories: jpg panoramas animation (scrolling)
Details: 1474x436 px JPEG.
This Mercator map of Earth can be tiled left/right. Originally seen on this answer. The answer also includes a second version of the image that shows a semi-transparent line for the equator (which is not in the center, but significantly below it).
Details: 640x316 px (add 44 px at bottom to center equator) PNG with transparent BG.
Categories: png tile animation (scrolling)
For getting the URLs of the images, you might 'context click' on the image as seen in the browser and either:
Alternately:
Below is a Java class which splits up the chess piece sprite sheet, suitable for pasting in to an MCVE:
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));
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With