How to design a website with many pictures but with without losing loading speed
Autor: Bebe GodeanuI need to design a website with many pictures but without decreasing too much the loading speed of the website.
I saw a website with many pictures , link : https://jadesummer.com/
where I found that for big resolution ( for PC) the pictures have about 100kB x 60 pictures with .webp format and I downloaded the same picture on my tablet and I found .jpg format with over 100KB and with .jpg but smaller size on my mobile phone.
I have 2 questions :
1 . Which is the size of a webpage to be easy displayed ( fast loading speed) ? I heard that 500kB - total size of a webpage would be suitable for mobile phone, tablet
2. How could be possible to design a website with . webp format for pictures for PC and with .jpg for tablet and phone ? How could I do this optimization ?
3. How could I design a webpage with a low resolution picture and then put a link for other page with best resolution (1-2 MB ) for that picture ?
thanks
You could use the LuxAlbum for images.
It shows albums and overview of folders with thumbnails.
When starting a manual or automatic slideshow, it shows images in full resolution.
It has a nice transition and images can be zoomed. It is possible to have text for a folder and also text for images.
Example here: https://bramminginfo.dk/lokationsbilleder/index.php this example has folders in more levels. Easy navigation via the breadcrumb menu.
Another example here: https://bramminginfo.dk/udstillingsalbum
Choose the "Den Smukke Stationsby".
The images here is about 3 - 5 MB. The images has a hover text when in the album, and many images also has a text. The title of the image and the date for the image taken is shown when hovering.
Text can be inserted via the file-manager and a textfile with the same name as the image can be made. In this text file html-code can be used.
To have new images in the album just upload the image. Thumbnails are automatically created.
The system is highly configurable.
If this could be of interest I could give more information on the system.
The LuxAlbum can be shown in an iframe: https://www.bramminginfo.dk/billeder.html
And - on a page you can set up an album as an un-interruptable slideshow.
https://www.bramminginfo.dk/klg-natursti.html
The slideshow could have an impact on the loading time, as the images is transferred to the client. This is no problem for a slideshow as the images then don't need to be much bigger as 1000px wide.