Example Images For Code and Mark-Up Q&As

Example images for code and mark-up Q&As

Here are some example images for common use, mostly from existing answers on SO.

Icons

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

Sprite Sheets

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

Animated

GIF is the only image format that supports animation. Here are a few examples.

Categories: gif animated-gif

Solid BG

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)

Transparent BG

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.

Pictures

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.

Tiles

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)

Tip

For getting the URLs of the images, you might 'context click' on the image as seen in the browser and either:

Show the properties. The URL can be copied from the dialog that appears.
View image. Copy the URL from the browser address bar.

Alternately:

Use the browser 'show source' and copy it from the HTML.
For those with enough rep. (100+, to edit a community Wiki answer), go to edit the answer and pull the URL from the text.

Code

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));
}

Inserting image into IPython notebook markdown

Files inside the notebook dir are available under a "files/" url. So if it's in the base path, it would be <img src="files/image.png">, and subdirs etc. are also available: <img src="files/subdir/image.png">, etc.

Update: starting with IPython 2.0, the files/ prefix is no longer needed (cf. release notes). So now the solution <img src="image.png"> simply works as expected.

Switching OK-Cancel and Cancel-OK to enforce user interaction?

Please don't do this unless you are really, really, really sure it's absolutely required. This is a case of trying to fix carelessness and stupidity by technological means, and that sort of thing almost never works.

What you could do is use verbs or nouns instead of the typical Windows OK / Cancel button captions. That will give you an instant attention benefit without sacrificing predictability.

Return entire images via AMP-List?

What you're looking for is a way to return unescaped HTML from a mustache templates. Per Mustache documentation the way to do this is using "triple-mustache" syntax, i.e. {{{unescaped HTML}}}.

AMP, however, places some restrictions on this (from Restrictions section of amp-mustache documentation):

The output of "triple-mustache" is sanitized to only allow the following tags: a, b, br, caption, colgroup, code, del, div, em, i, ins, li, mark, ol, p, q, s, small, span, strong, sub, sup, table, tbody, time, td, th, thead, tfoot, tr, u, ul.

So the syntax you're using is valid, but amp-img is not among the tags allowed in "triple-mustache" templates.

The Image size saved on the disk is different than what is being displayed

The problem is here:

BufferedImage img = (BufferedImage)getJpegCompressedImage(originalImage);
File outputfile = new File("C:/Users/uday/Desktop/newImage.jpg");
ImageIO.write(img, "jpg", outputfile);

..when using the ImageIO class that way, it ignores whatever compression has been applied to the image and saves it using standard compression! The trick to saving the compressed image is to change the getJpegCompressedImage method to saveJpegCompressedImage, and instead of returning an Image it should declare void and save the byte[] directly to disk (using standard I/O).

E.G. as seen in this example:

Original image (unknown compression)

As seen in Example images for code and mark-up Q&As.

Saved as quality .2 (6,327 bytes)

Sample Image

Saved as quality .8 (18,702 bytes)

Sample Image

Code

import java.awt.Desktop;
import java.awt.image.BufferedImage;
import java.io.*;
import java.net.URL;
import java.util.Locale;
import javax.imageio.*;
import javax.imageio.plugins.jpeg.JPEGImageWriteParam;
import javax.imageio.stream.ImageOutputStream;

public class CompressImage {

    /** TODO: This method has terrible handling of I/O.  
     Rewrite for production use. BNI. */
    static public void saveJpegCompressedImage(
            BufferedImage image,
            float quality,
            File file) throws Exception {
        OutputStream outStream = new FileOutputStream(
                new File(file, "Image-" + quality + ".jpg"));

        ImageWriter imgWriter = ImageIO.
                getImageWritersByFormatName("jpg").next();
        ImageOutputStream ioStream = 
                ImageIO.createImageOutputStream(outStream);
        imgWriter.setOutput(ioStream);

        JPEGImageWriteParam jpegParams = new JPEGImageWriteParam(
                Locale.getDefault());
        jpegParams.setCompressionMode(ImageWriteParam.MODE_EXPLICIT);
        jpegParams.setCompressionQuality(quality);

        imgWriter.write(null, new IIOImage(image, null, null), jpegParams);

        ioStream.flush();
        ioStream.close();
        imgWriter.dispose();
    }

    public static void main(String[] args) throws Exception {
        URL url = new URL("http://i.stack.imgur.com/7bI1Y.jpg");
        File f = new File(System.getProperty("user.home"));
        BufferedImage bi = ImageIO.read(url);
        for (float q = 0.2f; q < .9f; q += .2f) {
            saveJpegCompressedImage(bi, q, f);
        }
        Desktop.getDesktop().open(f);
    }
}

How to embed image or picture in jupyter notebook, either from a local machine or from a web resource?

You mustn't use quotation marks around the name of the image files in markdown!

If you carefully read your error message, you will see the two %22 parts in the link. That is the html encoded quotation mark.

You have to change the line

![title]("img/picture.png")

![title](img/picture.png)

UPDATE

It is assumed, that you have the following file structure and that you run the jupyter notebook command in the directory where the file example.ipynb (<-- contains the markdown for the image) is stored:

/
+-- example.ipynb
+-- img
    +-- picture.png

Example Images For Code and Mark-Up Q&As