Fast loading time for photo portfolio?

[Warboy16]

Hello BHW members,

So I'm currently working on a website for a family friend who is a photographer. I know that pages should be under 1mb for optimal loading times.

My issue is that even with 80% photo compression, the portfolio page is still well over 5-10MB. I have about 30 pictures on the page.

I'm wondering if there is anything else I can do to decrease photo size or at the very least, increase page loading time.

Any input would be greatly appreciated!

Warboy

 

[validseo]

• Lazy load the images... don't load the big images until they are actually being viewed.
• If you make the gallery using AMP then it will be cached on Google's CDN and will be fast for mobile.
• Make mobile images sized for mobile screens.
• Do you really need full resolution for a website... can you drop them to 1200 pixels at 72 DPI because website visitors are only supposed to look at them... not print or edit them.

 

[Monsterer]

Yes Image optimization is much important for page loading speed.
You have to try good optimizer tool to give good images in your site.
Because for your site, images are more important to attract the visitors.

 

[azurous]

Use thumbnails.

 

[Warboy16]

• Lazy load the images... don't load the big images until they are actually being viewed.
• If you make the gallery using AMP then it will be cached on Google's CDN and will be fast for mobile.
• Make mobile images sized for mobile screens.
• Do you really need full resolution for a website... can you drop them to 1200 pixels at 72 DPI because website visitors are only supposed to look at them... not print or edit them.

These are excellent suggestions, thank you! The lazy image load method seems especially useful. Would decreasing the DPI negatively affect the quality of the photo?

If it's of any importance, I'm using a WordPress with the Themify Ultra theme.

 

[Warboy16]

Use thumbnails.

I am using thumbnails, though I'm not sure if the page is loading the full size image as well. Considering the long loading time, that would seem likely.

 

[azurous]

in chrome , go to inspect - > network, you'll see what files are being loaded and how long they take to load. Are you sure you're not just linking to the full size images?

 

[validseo]

These are excellent suggestions, thank you! The lazy image load method seems especially useful. Would decreasing the DPI negatively affect the quality of the photo?

If it's of any importance, I'm using a WordPress with the Themify Ultra theme.

Web images are drawn at 72 DPI for classic monitors and 144DPI for retina displays. Just don't use the raw full resolution photos. Those are huge... find the smallest resolution and dimensions that looks nice on the website.

 

[Warboy16]

Web images are drawn at 72 DPI for classic monitors and 144DPI for retina displays. Just don't use the raw full resolution photos. Those are huge... find the smallest resolution and dimensions that looks nice on the website.

Understood, thank you for your help!

 

[Trinity Smith]

You might wanna look at these, I think it'll be helpful.
https://www.shopify.com/blog/7412852-10-must-know-image-optimization-tips
https://www.abetterlemonadestand.com/optimizing-images-for-web/
http://madefreshly.com/blog/howto/how-to-properly-optimize-images-for-web-in-photoshop/

 

[Deleted member 110025]

morning, I would say it is all about the server and the cms you use - for photography websites there are very specific platforms. I have a hobby photography project artforweb.couk (CC0 photos) and I use free cms called piwigo (lots of photographers do use it as well).

let me know if you need some help to play with it (I'm not an expert though) - hit me up a dm.

as for the server - I have a €145/month dedicated server in Netherlands (the original price was much higher).

be well,
H

 

[Inlisted]

You can also use scripts for quality change of images.

 

[Jeter62]

Keep the images in cloud (like Amazon S3). It will significantly improve the image load speed and the page load speed, too.

 

[Warboy16]

These are all excellent suggestions, thank you everyone for your input!

 

[Deleted member 110025]

Keep the images in cloud (like Amazon S3). It will significantly improve the image load speed and the page load speed, too.

s3 for images?? and what will be the bill when he hits huge traffic spike? .. oh man..