Question

Suppose that you are creating a website for an organization that wants the site to include a photo gallery containing hundreds of high resolution photographs. What would happen to the page download time if you include all the photographs on one page, in their native size and resolution? What can you do to change the download time of such a page? Please explain your reasoning.

Answer 1

ANSWER:

If we create a website for a particular company and that company wants you to include a photo gallery that contains many high resolution images. This will definately slow down the page load time of the website.

Here are the main reasons images slow down your page load time:

• Image files are too large.
• Synchronous loading of elements.
• Too many images and HTTP request.

1) Image files are too large-

It can take a long time to download image files that are too large.
Large images, high resolution images, and uncompressed images can dramatically slow down page load times.

How to fix it:
→ Display size

• Choose the optimal width and height to display images on various end-user devices such as desktop, laptop, tablet, smartphone.
• Don't use one big image and scale the display size with the width and height attributes of the IMG element. Instead, create and save files of varying sizes.

→ Resolution

• A standard 15-inch laptop screen can display around 100 pixels per inch (pixels per inch) or dots per inch (dots per inch). It doesn't make sense to serve images at 300dpi.
• The standard resolution for displaying images on web pages is 72 PPI. 300 dpi is required for printing, not screens. Almost all screens have a range of 72 to 100 PPI.

2) Synchronous loading of HTML, CSS, JavaScript and images
When your web page synchronously loads all HTML, CSS, JavaScript, and images together, the initial render time can be very long. Images can take up a significant portion of the rendering time.

How to fix it:

• Defer loading images. Instead, load them asynchronously after rendering the required CSS and HTML. Images can be placed below the fold and conditionally loaded using JavaScript when the visitor scrolls down to the relevant part of the page.
• It also reduces the number of HTTP requests during initial page load.

3) Too many images and HTTP requests
One server connection is required for each image file that is linked on the web page.

Too many images on a web page not only increase the size of the load, but can also block the connection to the server by sending more than allowed HTTP requests.

How to fix it:
→ Reduce the number of images

Use images sparingly. Keep the number below five.

→ Update server

• Shared hosting provides limited resources to every website that shares a server. The most important limitation is the number of concurrent connections allowed for each site, usually less than ten.
• This not only reduces the number of file requests you can make, but it also limits the number of concurrent visitors your site can view.
• Upgrading to a VPS (Virtual Private Server) can help you overcome this limitation to some extent. Some vendors like DigitalOcean, UpCloud, Linode, Vultr provide a basic VPS for less than $ 5 per month.

What if the number of images on your site cannot be reduced?

->If the content on your page is not primarily related to a particular image, it is wise to place a thumbnail image next to the content and link it to the original image.

If you are satisfied by my answer please give a thumbs up. Thank you.