HTML : load thumbnail image and full image faster

Question

I have a blog website that loads the images slowly i want to know how to make them load faster and:

• I am using same image for thumbnail and story. thumbnail is small,does it still load full image?if so how to use thumbnail of an image?
• Where should i store the images? what is the best location to store images for your websites and blogs? can save them in one drive and use the source?
• how to optimise images?what is a placeholder?i have seen many websites such as facebook use a kind of place holder which displays before image and content?how to do so? -how to i preload images ? or is there any better way ?

Answer 1

Here are some pointers.

• Thumbnail images have to be separate from original (large) images. When the user uploads the images, you have to use some script to resize the images. If you are using a standard CMS like Drupal or Wordpress, there should be an option somewhere to do the resizing (without you having to write code).
• Assuming your blog is public, the images as well should be public (usually). You can create a directory named files and you can store the images inside that directory. If you are using a standard CMS, these options should be there in some form.
  • To avoid having all files in one directory in the long run, use folder naming schemes like files/[YEAR]/[MONTH] or anything else you think would serve your purpose.
  • Make sure the uploads directory and your upload mechanism is well-protected using and .htaccess (or equivalent). Otherwise, someone might upload malicious scripts and execute them on your server.
• A placeholder is anything which holds the place of something while the original thing is absent (or being loaded). So, a placeholder image will be a standard image with a general design - it's as good as saying loading . You can use JavaScript or CSS (background-image) to achieve such a placeholder.
  • Preloading should not be necessary as far as I see from your question. A better opinion / answer could be given if you share the link to your site.

Next time, please try to make detailed questions - one question per problem, if possible. Also, do not fear to Google for a solution. I learnt programming (PHP, JS, Drupal, CodeIgniter and more) just by Googling! Hope this helps!

Answer 2

Jigar has done a fairly good job of answering the question though I thought I'd add if you want to optimise images there are plenty of websites that do it for you for free.

My favourite is https://tinyjpg.com/ however there are plenty of others. A quick Google search will get you plenty of different sites all doing basically the same thing.

This post might also help Load a low-res background image first, then a high-res one