Hello all, I've just added a gallery page to my group's website but when building it I didn't consider speed. The page load time is horrendous with firefox (not too bad with IE). Link: http://horizon.qmgs.walsall.sch.uk/Gallery/gallery.html It could be down to one/or several things: 1) I know nothing about CSS so the lightbox css I have used for the gallery is not properly implemented (I plan to learn but juggling other aspects of the project and my full-time job as a teacher hasn't left me much time for web design) 2) I've used thumbnails on the page (all about 10-50KB) but the photos they link to are 70-7000KB with most ~2500KB 3) I've embedded nine videos with the VIDEO tag which are 4000KB-171000KB ]in size. Each video has an ogg file with an mp4 alternative (I could use WebM instead of ogg). Is the loading time down to the botched CSS or do I need to radically change what I do with the content? Any advice you can offer would be much appreciated!
With over 400 views and not one offer of advice I thought I had better clarify that I am looking for advice, not somone to do this for me.
I didn't have too many issues on Firefox, but work's fiber line is pretty good. On the code: Stop using tables for page layout. You're adding a bunch of unnecessary code and making life hard for yourself. Try this: http://www.w3schools.com/css/css_image_gallery.asp Everything between the style tags should really be put in its own CSS file, but it's a good start. There are also many pre-made gallery bundles available. http://code.tutsplus.com/articles/50-excellent-image-galleries-you-can-use-today--net-4063 On the images: Break the gallery up, have separate parts of the project on separate pages. Square crop thumbnails so they line up better. Reduce the JPEG quality of the thumbnails. Some images are missing: image - Making of - Samosa Sale 1.jpg image - Making of - Samosa Sale 2.jpg image - Making of - Samosa Sale 3.jpg image - Making of - Samosa Sale 4.jpg Reduce the size of the main images. Unless people are printing these off, 4128x3096 is too large for the Internet. Resize to 2k on the longest edge. Also (on resizing) some images could do with being cropped in such as: image - Gagarin - Recovery 3.jpg
@Silver51 I'll look into the CSS it's time I moved on code wise (W3schools here I come). Thanks for the advice, I'll break up the gallery once we get the new menu bar in and can add more pages to the site. Square cropping thumbnails is so obvious I could kick myself. Thanks for that one! The tension lies around image size as the gallery is there for two reasons: - for people who like the project to browse through - for the media to plunder for articles about the project I'm not sure what resolution is 'enough' when it comes to the print media or whether we should keep the top resolution images on our google drive and resize all web images as you suggest. Thanks for the Samosa Sale images, I've sorted that one and just have to upload fresh code. Lots for us to work on, thank you for your suggestions!
Again, to echo Silver51, this loaded OK on Firefox on Mac. - Chrome seems to have a few issues with some of the thumbnails and the ogg videos. I notice that you are sending no-cache headers, have you considered caching at all? I am assuming that this site is hand-built, and that you arent using a CMS. - A free service like CloudFlare could help? https://www.cloudflare.com/ If that isnt a route you want to go down, might be worth lazy loading the images/videos on the page? - I see you are already using JQuery on the page, this plugin could help? - http://www.appelsiini.net/projects/lazyload
People browsing the project will mostly be using standard computers, and most people use monitors with a resolution somewhere between 1200 and 2000 pixels horizontal. There really is no need to provide images any bigger than that. As for the media, a much better option is to provide a "contact us" link so that journalists can get in touch with you. Any decent media outlet will not simply write an article based on whatever you have on the web page, and it's likely they have their own unique imagery requirements. Print media will tell you what size and resolution they want. In addition, any media outlet will know that it can't just lift images from your web page without permission, so they'll have to establish contact anyway.
