Tools for optimizing images for better loading speed?

[TonyStark]

Does anyone have any tools or tips for optimizing website images for better loading speed?

I'm not using Wordpress, I'm using HTML5/CSS.

 

Dislike ads? Remove them and support the forum: Subscribe to Fastlane Insiders.

[mve0991]

You can automatically compress your images via one of the online compress tools which you can find via Google.

You can also use HTML5 image srcset to serve smaller images for mobile and tablet: Responsive images

 

[Are EM]

It's a good idea to shrink your pixels if it doesn't requires more pixels than your border. I mean if your border is 100x100 pixels, there is no need to fit 1200x800 pixels picture on it, because 100x100 is the right one. You can edit it easily in MAC or using Paint on Windows.

You can use optimizilla.com for optimizing images. You can decrease quality of a picture and lots of megabytes with it. Your picture stays as good as the original one, but a lightweight...

That's what I do for performance

 

[SEBASTlAN]

Do you compress your images with something like a Compressor.io?

 

Dislike ads? Remove them and support the forum: Subscribe to Fastlane Insiders.

[ChrisV]

Does anyone have any tools or tips for optimizing website images for better loading speed?

I'm not using Wordpress, I'm using HTML5/CSS.

Image compression basics:

.png is lossless but a larger file size
.jpg is lossy but a smaller file size

now from within .jpgs you can set the compression. More compression = smaller file but worse quality. Less compression = bigger file but better quality.

If you can use the same image more than once, do that. Then the browser only has to load it once.

If they are return visits, it shouldn't matter because most browsers save images to the cache, so they only have to be loaded once.

 

[Arnaud.]

Hello,
Of course the best optimisation come from the image : size close to used size, multi sizes (phone, tablet, computer if is needed) and compression.
But the second major improvement is lazy loading ! That means the image is not loaded until it is close or on the web view !
Just an other tip, you can lazy load google maps.

Arnaud

 

[NoStupidQuestion]

Use a CDN like Cloudflare? Not for smushing the images but for general speed.

 

Dislike ads? Remove them and support the forum: Subscribe to Fastlane Insiders.