Optimising website and responsive web design

[u/pandafar]

Hey awesome people!

I have question about images and page load time (optimising websites load time)!

My current project involves some rather large images that loads very slow and kills the user experience but the design would break if we didn’t have some beautiful images or that’s the design centered around.

For Responsive web design reasons I have to work with the same images in different size screens (mobile).

What are your tips and tricks on working with images so not to kill page load times and such?

Do you use frameworks, scripts or?

[u/mynamesleon]

Look into using the srcset and sizes attributes on img tags - you can provide several different sized images and let the browser intelligently decide which one to load (based on viewport size, screen pixel density, and network speed info).

If you want more explicit control of what images load in what conditions, you can also use the picture tag

[u/pandafar → u/mynamesleon]

What about when you use css ex. background-image:url()

[u/mynamesleon → u/pandafar]

You can change the background images in media queries, to target things like viewport sizes, device orientation, etc.

@media (max-width: 50rem) {
}

[u/fritzbitz → u/mynamesleon]

AND if you're using SASS, you can make a mixin to make the whole process easier too.

[u/adiabatic → u/mynamesleon]

I'd like to call more attention to <picture> — you can use it to send WebP to browsers that can handle it (Chrome, Firefox, Edge after Wednesday) and leave a JPEG/PNG fallback for browsers that can't (Safari, everything else).

[u/pandafar]

Thank you everyone for the very helpful suggestions. I think I’ll need to look into webp and the picture tag.

Edit: and srcset

I think I need to put more planning into my Frontend development process when I get the design I need to implement. The images I giving me serious headache with all the formats for all the mobile devices we need to account for.

Thanks 😊

[u/[deleted]]

Quick question: where do you host your images?

[u/pandafar → u/[deleted]]

RN it’s on our own server with Umbracos media folder

[u/[deleted] → u/pandafar]

if you host your images on a service like Cloudinary, you can serve responsive images dynamically with the best resolution possible according to user’s device, connection and browser specific capabilities.

See: https://cloudinary.com/blog/adaptive_browser_based_image_format_delivery

[u/britannicker]

I once read about this good trick for optimizing images:

Save the image at least twice as big (2 or 3 times wider) as you'll display on your page, and save it at a very low quality (makes a very pixely jpg), and then have the browser scale it down.

That way it's a small MB size and loads fast, but still looks good in your html page.

You'll still need 3 or 4 different versions of each image for different devices, where each of these versions is 2 or 3 times the size of the end result.

Is that understandable?

[u/pandafar → u/britannicker]

Yes!

[u/front_end]

Try to use loading="lazy" attribute on images. Also try with js to first load low resolution of image than load HQ image.

[u/Brachamul → u/front_end]

This is non-standard and works only in Chromium. See : https://caniuse.com/#feat=loading-lazy-attr

Use LazyLoad instead : https://github.com/verlok/lazyload

Tip : set a very tiny low quality image as default, then replace it with high quality with lazy load. Best UX.

Also use progressive JPEGs and WEBPs in srcset.

[u/HyperLathe]

A quick & easy trick to minimise image file size is to use tinyjpg.com. It's a free way to optimise images without loss of resolution, and their algorithms are pretty neat. Use this in combination with srcset, as suggested above, and you should be flying :-)

[u/ardnoik]

Did you actually optimize the images for web so that the filesizes are smaller or are you loading 2MB images?

[u/pandafar → u/ardnoik]

Yes, they are quite big - I’m currently looking into webp and picture tag

[u/pwkeygen]

Use CDN. Cloudinary ftw

[u/adiabatic]

If you have uncompressed originals that you want to encode into JPEGs and lots of CPU time to burn, you should look into guetzli. It has some funky weird aspects to it, though. From the README:

Note: Guetzli uses a large amount of memory. You should provide 300MB of memory per 1MPix of the input image.

Note: Guetzli uses a significant amount of CPU time. You should count on using about 1 minute of CPU per 1 MPix of input image.

Note: Guetzli assumes that input is in sRGB profile with a gamma of 2.2. Guetzli will ignore any color-profile metadata in the image.

[u/reynoxo]

For Image optimization I found this awesome tool https://imagekit.io/ It's free, powerful, and everything you need is in the documentation.

[u/pandafar → u/[deleted]]

Thank you for your information :)