图片需要一段时间才能在网站上加载？

Question

I made a similar post a couple of hours ago but it was really poorly written and lazy. So I'm re posting as I ruined that post but still need help. Sorry to anyone who read the first post it was awful.

Here's my website:

http://top-drawer.net/artists.html

When I view my website on a new browser the images take noticeably long to load. The images I'm talking about are the ones seen on the artists page(linked above) as well as the images on the idividual artist pages( http://top-drawer.net/artist-1.html ).

The length of time for the images to load into place looks very unprofessional when I'm trying to show someone the website.

What is causing this load time? and how would I fix this problem?

just for information I'm currently viewing my work in chrome. Any answer will be very much appreciated. But if possible it would be really help for me if you could explain the logic to your answers as I want to really understand/learn not just copy your code. But of course thanks to anyone who takes the time to post an answer.

Answer 1

While your images have been resize with CSS to appear small they are actually still quite large:

http://top-drawer.net/images/bennyPalmer/2.jpg (1280x849, nearly 300KB)

This means they will take longer to download. For the thumbnails, create new images that are the size you'd like and use those instead. At the moment you have around 3MB of images on your homepage.

Answer 2

You need to optimize your images. Techniques include:

• Compressing the images (using lossy compression like jpg over lossless compression like png)

• Loading lower quality images at first as placeholders and then load higher res ones in the background and replace them when they load

• Using compression for requests (this is in addition to compressing the images themselves)

• Using images without an alpha channel (they're going to be bigger if they have one)

• Loading images of exactly the size you need. Resizing on the client side is really expensive!

• Eliminate image metadata such as geo information (it takes up space and makes your images bigger)

For more details I'd highly recommend this blog post by google: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization?hl=en .

Answer 3

As the other answers are suggesting to reduce the size of the image, following are some online utilities which will help you :

1. http://www.reduceimages.com/
2. http://jpeg-optimizer.com/
3. http://www.picresize.com/
4. http://www.imageoptimizer.net/Pages/Home.aspx

Answer 4

You could try using a PHP page to resize the images on the spot. For example you could use the following file structure to help:

 Document Root
 - img
 - - 1.png
 - - 2.png
 - - 3.png
 - - resize.php
 - index.php

Anytime you reference an image in index.php , use /img/resize.php?file=1.png&size=(Size Syntax Of Your Choice) . Within the PHP file, get the contents of the file and use PHP's resizing methods (or, better still: this ), then once you have got the new file; use readfile to 'echo' the new resized file. There is a lot of different ways you can go about this, If you don't know PHP tell us; and I'll make it for you.