HTML series (4): editing images, html series editing Images

HTML series (4): editing images, html series editing Images

I. Basic concepts of images

1. vector graph: The file occupies a small amount of space. The enlarged image will not be distorted and is irrelevant to the resolution. Suitable for graphic design, text design, Logo Design, layout design, etc.

2. Bitmap: consists of pixels. The file is large, and the enlarged and reduced images are distorted.

3. lossy compressed image: allows the compression process to lose some non-sensitive information. JPEG and JPG are the most common image formats that use lossy compression for processing.

4. lossless compression: records the data information of each pixel in the image and uses special algorithms to compress the file size. PNG is the most common image format that adopts lossless compression.

5. Common Format: JPEG/JPG is a common image format on webpages. It stores a single bitmap in 24 bits and supports millions of colors, it is applicable to images with color transitions or images of more than 256 colors. It does not support transparency and animation, and supports interline scanning. GIF can be in a maximum of 256 colors and supports opacity and multiple animation frames. It is suitable for cartoons, logos, and graphics or animations that contain transparent areas. PNG supports up to 32-bit color, true color, and color palette. It supports full Alpha transparency, animation, and line scanning.

 

Ii. insert an image

The img element embeds an image into the webpage. Technically, labels do not insert images into webpages, but link images from webpages. A tag creates a placeholder space for the referenced image. A tag has two required attributes: src and alt. When the specified URL image fails to be loaded, the alt attribute displays the defined text.

If an image requires a title, you can use figure and figcaption to represent an image with a title in semantics. <Figure> labels define independent stream content (images, charts, photos, code, and so on ). Used to combine elements. It is a new H5 tag. Figcaption adds a title to the element group and should be placed at the first or last child element of the figure element.

The content of the figure element should be related to the main content, but if it is deleted, it should not be affected by document abortion.

Note: IE8 and earlier versions do not support figure.

 

Iii. cache Images

To speed up loading of pages with large numbers of images and improve user experience, it is best to download the images to your local computer and cache the browser. The common method is the JS Image object:

1 <script> 2 function loadImage (url, callback) {3 var img = new Image (); // create an Image object to implement pre-download of the Image 4 img. src = url; 5 if (img. complete) {// if the image already exists in the browser cache, call the callback function 6 callback directly. call (img); 7 return; // return directly, no need to process onload event 8} 9 img. onload = function () {// call the callback function 10 callback asynchronously when the image download is complete. call (img); // replace this object of the callback function with the Image object 11} 12} 13 </script>

After an image is loaded once, if a request is sent to the image again, the browser has cached the image and will not initiate another request to directly load the image from the cache.

 

Iv. region ing

Image ing with clickable areas:

1 2 3 <map name="planetmap" id="planetmap">4   <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />5   <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />6   <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />7 </map>

Note: The area element is always nested inside the map element. The area element defines areas in image ing. The usemap attribute in can reference the id or name attribute in <map> (depending on the browser). Therefore, we should add the id and name attributes to <map> at the same time.

<Area> tags define the areas in the image ing (Note: Image ing refers to an image with clickable areas ).

The appropriate values for each shape are listed below:

Circle: shape = "circle", coords = "x, y, r"

Here, x and y define the center position ("" is the coordinate of the upper left corner of the image), and r is the circle radius in pixels.

Polygon: shape = "polygon", coords = "x1, y1, x2, y2, x3, y3 ,..."

Each pair of "x, y" coordinates defines a vertex of the polygon ("" is the coordinate of the upper left corner of the image ). Defining a triangle requires at least three sets of coordinates, and a polygon requires more vertices. The polygon is automatically closed. Therefore, you do not need to repeat the first coordinate at the end of the list to close the entire area.

Rectangle: shape = "rectangle", coords = "x1, y1, x2, y2"

The first coordinate is the vertex coordinate of one angle of the rectangle, the other is the diagonal vertex coordinate, and "" is the coordinate of the upper left corner of the image. Note that defining a rectangle is actually a simplified method for defining polygon with four vertices.