/    Sign up×
Community /Pin to ProfileBookmark

Background image loader

I’m loading a image to my background.

It’s a little slow to load. What do websites do to image this? If I make the image smaller in size it becomes pixelated.

Do you host it on a faster dedicated place?
Preload it?
Use a certain format?

to post a comment
CSSHTML

6 Comments(s)

Copy linkTweet thisAlerts:
@SempervivumJan 10.2021 — >Use a certain format?

Yes, choosing an appropriate format is important.

Photos: Use JPG with a moderate compression level.

Screenshots: Use PNG (if it doesn't contain a photo). In this case PNG compresses more efficiently than JPG and doesn't produce artifacts.

Graphics with simple structures: Create them in SVG format. It will scale up without loss in quality.

Don't use an original image produced by your camera or mobile, these are too large.

>Do you host it on a faster dedicated place?

I never did so.

> to my background.

Yes, BG images covering the complete browser window are popular but a large size is required causing a long loading time.

A workaround might be to load the the BG image only when loading of the rest of the page has been completed.
Copy linkTweet thisAlerts:
@VITSUSAJan 11.2021 — @kiwis80#1626623 The answer of all three question is "Yes". It depends on which online platforms and tools you are using.
Copy linkTweet thisAlerts:
@bwclovisJan 16.2021 — there several ways to deal with this. CDN is one of them, Lazy load... my favorite online tool ( tiny.png)... yelling at the designers to optimize, lol.

A lot of issues also with images are wats stored in there meta data, sometimes its just too much info. Stripping that out can help as well. It also depends on what you have to support. Webp and AVIF are 2 newer formats and you could do a "progressive enhancement" using the picture > source srcset... there options ,lol
Copy linkTweet thisAlerts:
@marksmith121Jan 17.2021 — Resizing is altering the size of your image without cutting anything out. To resize an image is to essentially change the file size. Because sometimes, size does matter. Resizing can help your photo fit into a certain space on a screen, such as in a blog post or social media post.
Copy linkTweet thisAlerts:
@JennieMillerJan 19.2021 — yes it depends.
Copy linkTweet thisAlerts:
@Kaushik21Feb 12.2021 — I think some of the things if you follow , your problem will be solved like compress before upload, secure your Php uploaded scripts, Experiment with Image Quality Standards, Upload Using the Right Image Formats, Add Fingerprints to Image URLs.https://www.clippingpathoutsource.com
×

Success!

Help @kiwis spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.5,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...