Load Image Resolution For Free

"Preloading" loads an image file into the users' computer memory so that it can be instantly accessed when needed. This is useful, for example, if you have a mouseover event and an image needs to change without any delay.

The most common way to optimize images is to resize them. If you take a photo on a 24-megapixel camera, the image will be 6000x4000 pixels and might be 16 megabytes in size. That's about four times the size of the average website! You can dramatically reduce the file size by resizing the image.

Three Popular Solutions Preload images. Load images before displaying them. Here is an example. Lazy-load images. Load images only as needed, such as when the visitor scrolls down far enough. ... Load progressive images. Load a small (often blurred) preview image first, then a larger, high-resolution image.

One of them is preload , which we will use to preload our images. The preload attribute tells the browser to preemptively fetch and cache the linked resource as it will be needed on the current page. You also need the as attribute when the value of the rel attribute is set to preload .

On your computer, right-click on the image and then select ?Properties.? A window will appear with the image's details. Go to the ?Details? tab to see the image's dimensions and resolution.

In the first line of the preloadImages function, we declare our imageArray that contains a list of all the images we want to preload: var imageArray = new Array( "path/image. png" , "path/image2. png" , "path/image3.

So, an image resolution of 6000 x 4000 tells us that the image measures 6000 pixels in width and 4000 pixels in height. Multiplying the two figures together gives us the second way this is commonly stated, namely as megapixels. 6000 x 4000 equals 24,000,000, which is more commonly written as 24 megapixels (MP).