How do i load images from url in jekyll site?

Help
1

I want to reduce page size to save bandwidth. One way to do this is to host images on external server,
How should i do it?

2

A way to reduce bandwidth is to load images which are reduced in size or to lazy load the image when the user scrolls to it.

An image is not part of a page. It is loaded using from a URL either internal (same domain)

/assets/img/logo.png

Jekyll:
<img src="{{ '/assets/img/logo.png' | relative_url }}" />

… or external (another domain like a blog or AWS S3)

<img src="https://example.com/logo.png" />

The latter does not need anything Jekyll related to handle

There is no speed benefit for one over the other
unless the latter is say a CDN or CloudFront for cached image serving. Which is overhead that might not make sense unless you are a business or are image heavy

3

If you are interested in thumbnails on a page then check this jekyll filter I forked

4

Thank you for the reply @MichaelCurrin. I think i’ll host images on aws s3 bucket.

5

Thank you for suggestion. I’ll check that out.

6

You can upload photos directly to your repo and commit them in many ways.

Locally with git, on github, using jekyll admin locally, using Forestry.io CMS.

The images then move with the repo and you don’t have to worry about S3 being available and having to manage mages there. If the images are stored in git then your site can run locally without internet and still load images locally

Forestry might be a good one for you because you can use a nice interface to upload and image and it supports using backends like S3 if you want to override the default of uploading to repo assets folder.

7

S3 itself is optimized for serving but it does not cache data. So you’d have to add cloudfront or something to get that benefit which is a lot of infrastructure to serve images which are available from the repo built assets on GH Pages or Netlify

8

Also S3 and CloudFront cost money.

I’d say start with the simplest approach and server your images at realistic sizes. You can make them 1000px or 75% quality for example to get under say 1MB.

And do page speed test with Google Lighthouse which is a free online tool.
And IF your page is not fast enough and images are the slowest part of your page then I’d consider only then adding extra optimizations like S3 and CF

Also look at the HTML5 lazy parameter for delaying image loading

9

A little bit tangent to the issue -it might help someone else in the future -though :slight_smile:

( i’m quite impressed with ClouCannon 's powerful Jekyll CMS , btw …)

There is also another 3rd party service, which might apply not only to specific hosting / cloud providers :slight_smile , as @jhvanderschee mentions here

2 Likes