CODEWITHSUNDEEP
csshtmlperformanceseo
Creative Magic
Creative Magic

Reputation: 3151

Does dividing a large background image in HTML help performance/loading/SEO?

I have a large (1920x1080) image that I want to use as a background. The image isn't large by file-size (>180Kb).

Is it better to cut this picture, let say, into 3 parts and load them separately or a one larger image? Is there a concern of performance rendering one large picture or 3 smaller ones? Does a browser load it faster as 3 smaller pictures? Does it affect how Search Engine bots rate it?

Upvotes: 1

Views: 518

Answers (5)

Surender Thakran
Surender Thakran

Reputation: 4054

Performance wise one large image is better than multiple parts of the same image since a new connection will be needed to be established for each small image.

SEO wise it does matters how much time your images takes to load and it would help your SEO rankings if you provide relevant alternate text for your images. ex:

<img src="test.jpg" alt="Just a test image">

Apart from alternate text, a descriptive filename also helps you SEO wise. ex: naming a picture of a rose as rose.jpg definitely helps you to get better SEO exposure.

Also, it is definitely to your advantage to put an image of appropriate size on your server instead of a large image with smaller height and width attributes. Large images will un-necessarily slow down your page because the browser will first have to download the whole image and then resize it to its container. Use image editor tools to resize your image to appropriate size first before hosting them.

Upvotes: 2

Jack
Jack

Reputation: 1941

I'd argue that performance would actually decrease due to there being 3 file requests -- rather than 1. You could try compressing the image (even more -- if you already have).

Although, that being said, if you gathered all the images on your page then rendered them into one. You could then use CSS Sprites to assign the images as you wish. The caveat here being that it would only work for background-images, not ones assigned in the <img> tag

The impact on SEO would be negligible, keep your site between 0-5 seconds (preferably 0-3s) and you'll be fine. I read only 1% of SERPs are affected by page-speed.

Upvotes: 1

pabloFdz
pabloFdz

Reputation: 157

SEO isn't about loading times. It's about images so it would not affect to you.

Also, I think it's better to have simply 1 image.

Upvotes: 0

RononDex
RononDex

Reputation: 4183

If you want to speed up page loading with the background-image loading asynchronously, you could use the following trick to do it with javascript (I have used this trick several times):

Remove the image from you css and html, then create a javascript-function that pre-loads your image and optionally displays a loading overlay. Then you could do something like this (jQuery):

var backgroundImageUrl = "PathToYourBackgroundImage.png";

$(function() {
    PreLoadOverlayImage(backgroundImageUrl);        
});

// Preloads the image from the given url
// and displays a loading overlay while doing so
function PreLoadOverlayImage(url) {
    var html = "<img class='preloadingImg' src='" + url + "' style='display:none' />";

    $("body").append(html);

    // Self coded function, displays a modal loading screen over the full document
    // to disable interaction while it is loading, this is optional
    $("body").showLoading();
    $(".preloadingImg").load(function () {
        $(".preloadingImg").remove();

        // Remove the modal loading overlay
        $("body").hideLoading();

        // Display background image
        $("body").css("background-image", backgroundImageUrl);
    });
}

It uses the caching functionality from the browser. The browser takes the url of the image you are loading to determine if it was loaded already in the past. If the url is already known to the browser it will load the cached image instead of re-downloading it from the server. Therefor when you assign it as the background of your body after loading it with an <img> it will be loaded immediately.

Upvotes: 2

Mr. Alien
Mr. Alien

Reputation: 157374

SEO has nothing to do with the page load, as far as performance is concerned, you can resize your image, to 1400x900 will be a reliable dimension for a background, try to compress it, but just make sure you don't lose the quality.. and than use background-cover property so that it will cover entire page.

body {
   background-image: url(#);
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
   background-attachment: fixed; /* For static background on scroll if required*/
}

Also, you don't need to chop the image into pieces, as it's not a mailer at first place, secondly it will increase the http request 3 times..

Upvotes: 2

Related Questions