I am using google drive to upload manually the images there and with sharing link to display them on my website. But it makes troubles sometimes the images doesn't load fully. Is this proper way of displaying the images faster on your website?
The website is coded using HTML only and doesn't have any functionality on it. Only showing pictures and text. i am planning to show 100+ images on one page.
I am using this link https://drive.google.com/uc?export=view&id=[google_drive_photo_id]
This is not what Google Drive was designed for and it is not recommended. Instead, you should be hosting images through a CDN.
I recommend Cloudflare, as it’s what DaniWeb uses, and they have a free option. It can take some initial configuring to get your server onto Cloudflare, but once it is, you can configure it to cache your images on its servers around the world.
While I use Google drive for images, the images are all far too large (pixel count, x by y size) to be what I'd use on a web site. My camera and screenshots can be 4K or larger images so I would expect them to be awful if I put them up on a web page.
After addressing the image dimensions then I recall the use of Google Drive for image hosting to be unstable. Maybe it still is.
@dani
the cloudflare option is not free its $5/month. Which is not ideal for me
https://prnt.sc/TX5ssWQuZeyD
@rproffitt
Yes google drive sometimes makes errors.
Quick update: I just found out that imgur platform gives extraordinary speed and stability. I think ill go with these guys.
the cloudflare option is not free its $5/month. Which is not ideal for me
That Cloudflare option you are referring to is to resize images. The ability to automatically host all images on your server, and cache them, is free with Cloudflare. I would strongly, strongly recommend using that over something like Imgur.
How many images are you displaying on a page at a time?
Have you resized the images in image manipulation software to get them delivered faster?
And why are you not simply storing them on your webserver?
A lot of images on one page makes it load more slowly. Larger images take longer to load than small images. Lots of large images on the one page takes very much longer to load. A common way to work is to resize the images to a small size - say 400 or 500 px wide - to load faster on the web page and provide a link to a bigger version, often in a slideshow, for those who want to look at a larger version.
Currently the commonest sizes for computer screens are 1920 x 1080 (22.6%) and 1366 x 768 (17.4%) - https://gs.statcounter.com/screen-resolution-stats/desktop/worldwide - which suggests your large version images in a slideshow should not be larger than 1366x768 as larger than that means almost everyone will have to scroll back and forth to see the whole image, unless your JS slideshow has a fit to screen or set image size option. Always design for the typical site visitor's screen, not your own supersized ultra high resolution screen. So I tend to make the large version in a slide show about 1000 to 1200px wide which works well with most screen sizes.
And if you resize images, always save them in a different folder and include a clue to the image width eg holiday-shot2-crete-400px.jpg or holiday-shot2-crete-1200px.jpg . This leaves the originals safe for other uses. And note the meaningful name I used - very much better than img1243567.jpg as a camera might name it
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.