Do Images Load Faster in HTML or CSS

Do Images Load Faster in HTML or CSS?

This can easily be verified using Firebug (under Net), Chrome Developer Tools (under Network), Fiddler or any other HTTP sniffer you prefer.

If you put the image in CSS as background-image, the image will only get downloaded when that class is actually used ~~and visible~~. If you put it in an img it'll be downloaded immediately and will block rendering even if it's invisible.

In the end they are both as fast if you are counting the speed at which the image loads per se. The real question is if the perceived performance is better as the order at which the image gets downloaded might be different depending on where you place your element.

I would worry more about the other aspects though. Having the image as a background-image means:

The image is not a content
It is not printable
You can use a sprite to reduce the number of HTTP requests (thus improving performance)
It is slower to animate background-image than img

Making images load faster HTML

Since you're using jQuery, I would recommend using lazyload. It causes the images to get loaded only when in viewport.

How to make photos on my website load faster?

The most important factor in image loading performance is the size, in bytes, of the image files you're loading. It's easy in the world of ubiquitous high-resolution digital cameras to get multimegabyte high resolution images. They're suitable for printing.

There are plenty of tools in the world for downsampling images (reducing their width / height from, say 4096 / 3072 to 512 / 384. And if you're using JPEG images, your camera probably captures them with a very high JPEG quality, let's say 3. Most tools, while downsampling the image, can also reduce the JPEG quality from 3 to something like 35. When the input image needs five megabytes, it's not uncommon for the resulting image to need 60 kilobytes.

A downsampled and JPEG-reduced-quality image looks just fine on most web sites and will have an order of magnitude or more fewer bytes in it. There's your speed.

You didn't say anything about how you're serving your images, so it's hard to give you specific advice about how to do it.

Loading images Faster in Webpage

There are a couple of solutions to explore for managing large images:

Try to bring down file size (3-5MB is too high IMHO):

Remove all metadata
Reduce resolution/pixel-density
Reduce height/width of the image
Use JPEG compression
Use GZIP compression on your server

You can also explore:

Use a CDN to serve images (to allow parallel loading)
Use services like Cloudinary/IMGIX which allow you to
dynamically select the image size you want

Is it better/faster to resize an image with CSS, or with the img tag?

width and height are semantic in the case of imges and objects. They provide metadata for images so it is completely fine IMO to rely on those attributes in order to tell the user agent that it should presize the element to X dimensions prior to the image fully rendering.

How to make background images load faster

You don't want to use a placeholder image to prioritize your background images in situations like this, you want to use <link rel="preload">. That will tell the browser to start downloading the image as soon as possible.

Try adding the following code to the <head> of your page, and then use your background image as normal. It should load much faster:

<link rel="preload" as="image" href="images/header-img.jpg">

You can read more about this technique here:

Preload critical assets to improve loading speed
Preloading responsive images

Do Images Load Faster in HTML or CSS