How to make images load fast

Design & UX
1

I’m a netrepreneur, not a website coder just so you know.

So I had posted in a FB group about something & came to learn from a web developer that the way you load images fast is to make sure they fit the SIZE of the container.

I’d never heard of this before & 100% of the website coders I’ve been screening for a job I need done don’t even mention this when I ask. TERRIBLE :frowning:

So other than sizing the images properly, do they also have to optimize the images?

And do I still need to put my images on a CDN?

I don’t have a lot of images, just the ones that are on the index page & along side every article in the blog area.

Thanks

1 Like
2

Hi there ep2012,

a link to your “index page” would allow members to assess
your problem(s) and possibly providea solution - ( or two ). :winky:

coothead

1 Like
3

My question has nothing to do with my site in specific, so I don’t know why you need to see that.

1 Like
4

Are your problematic images not the ones that you referred to here…

coothead

5

No, the question was a general question & I stated why in my post.

1 Like
6

Hi there ep2012,

so you just want to know if you need to optimize the images?

Why images should be optimised for the web

coothead

7

A basic step you mention is resizing images to make them no larger than they need to be.
Another thing is to choose the most appropriate file format for the image type.
Photographic images may be treated differently to more graphical images such as logos or icons, some images require an alpha channel. So the choice of format will depend on the nature of the image.
Many formats will have compression, in some you may control how much compression there is.
With lossy compression there is a trade-off between file size and quality.
Lossless compression will not degrade quality, but the file size reduction can vary greatly depending on the nature of the image.

In general photo type images compress most efficiently with a lossy format like jpeg. Using lossless on photos can result in large files.
Graphical images with lots of areas of flat colour compress very efficiently with lossless formats like png. Using lossy on graphics can result in quite visible artefacts.
Though for me svg has taken the role of displaying graphics (logos, icons, etc), it has no cmpression but the file sizes are small enough not to need it and being scalable in nature its physical size is not an issue.

4 Likes
8

I think this may be somewhat true depending on what is meant by “load”.

A heavier weight image (or any file for that matter) may take longer to transfer than a lighter weight image. As far as size - as in dimensions, not weight - I don’t think that would make any difference in loading time.

What could be affected is the time it takes the page to load in and “settle down”. That is, if an image tag doesn’t have its dimensions specified so that a browser can reserve space for it, the page may “redraw” when the image finishes loading in.

As others have posted, the main thing to do to reduce load time is to optimize images so they are the smallest weight possible without sacrificing their quality. One way to reduce the weight is to not load an image with dimensions much greater than that which it will be displayed. Though AFAIK it is common practice to use images twice the displayed image dimensions to accommodate retina.

9

How fast a page takes to load, that’s what it’s meant by load & Google & other software testing devices determine that.

So people are inserting LARGE images due to retina?

What does retina mean?

What’s an “image tag?” The container?

He didn’t say anything about compression which is why I’m asking the question (see above), he said THE most important thing is the sizing of the image.

Thanks

10

“How to make images load fast”
There are several ways:

  1. Compress the images, such as with tinypng, so there’ll be fewer bytes to wait for.
  2. Use the image type for best compression. It may be gif, png, svg (vector graphics), or jpg (or others). Each one has its own strengths.
  3. Provide several sizes, mark them up in css, and let the browser pick the appropriate one for the user’s window size:
<picture>
    <source srcset="med.jpg 1x, med-hd.jpg 2x" media="(min-width: 40em)" /> 
    <source srcset="sm.jpg 1x, sm-hd.jpg 2x" /> 
    <img src="fallback.jpg" alt="" />
</picture>
  1. Use lazy loading so images are loaded only when the user scrolls it into view. They will load faster than if all the images on the page are loading.
  2. Use responsive media queries to load the smaller image first; and for desktop size, load the larger image.
  3. With many icons, use image sprites.
  4. With small icons or images, use Base64.
  5. If appropriate, use a Data URI.

These are all ideas that come to mind quickly. You have a lot of research to do.

2 Likes
11

I think there may be some miscommunication as to what is meant by “size”. The term “size” is often used to describe both weight and dimensions. eg.

some_image size: 10KB (weight)
some_image size: 100px x 100px (dimensions)

As for load times, eg.
low_weight_large_image: 10KB 1000px x 1000px
vs.
high_weight_small_image: 100MB 10px x 10px
low_weight_large_image would load faster than high_weight_small_image

My description of “retina” is surely crude, but it is something like “use 2 pixels of source for 1 pixel displayed”.

I think if you give this a read it should do a better job of explaining than I could do.

img tag: if instead of
<img src="some_image.jpg" height="200" width="200">
there were no attributes
<img scr="some_image.jpg">
that were not in containing elements with sufficient dimensions, the content of the page would first display using what dimensions it knew and then repaint to insert the 200x200 image.

2 Likes
12

There’s an App’ for that…

13

Thank you Steve. I don’t see a way to thank posts on here :slight_smile:

14

To me how you view size doesn’t matter, for the website coder, that’s his job to figure out, but you & no one else mentioned the container size which is shocking.

As for retina (I guess you mean responsive), while that’s a must, so is the page loading properly whether it’s for mobile or desktop.

Thanks

15

Not everyone uses WP, but even if there is an app for that, the fact that website coders don’t know this & rely on apps to do EVERYTHING for them, tells me they don’t know what they are doing.

I’ve come to learn that a really good website coder uses less apps so the site is cleaner, faster loading & there’s less bugs/conflicts.

16

Off topic:

Use the “like” (heart-shaped) button on the post.

2 Likes
17

There is absolutely nothing in the link provided that mentions WP? Please read the article again.

As far as the remaining comments about “relying on Apps to do everything” and “better not to use any Apps” because the sites will be cleaner, faster and less bugs/conflicts is a very broad statement which does not apply to all Apps.

I agree that it is better to not use some Apps especially if they are not maintained. Careful selection of a suitable App will vastly improve the site.

The particular App I was referring to was Wiki: AmpProject.org which was initially created about three years ago by a team of exceptional programmers to overcome mobile poor rendering performance. Google was subsequently impressed and added a Free CDN support along with preferential mobile SEO by showing a lightning flash icon for valid AmpProject web pages. The App/Framework has been adopted by numerous top sites such as BBC, New York Times, etc

18

John I never read the article. I just assumed (sorry for assuming) that you meant WP, but now after reading the article (it was a bit too technical for me), that sounds like their CDN, not an app.

Where’s the app?

I have to say I CAN see the difference in the images. The left one does look much clearer.

19

The App could be called a Framework or Library…


Were you using a mobile or desktop when you noticed the differences?

1 Like
20

Ok, I thought that it was like a plug-in LOL simple to use.

But thank you for this.