Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Christopher Mlalazi
Front End Web Development Techdegree Graduate 17,305 PointsImages taking too long to load
I am developing this website so that I write code almost everyday, and the images are taking too long to load in the gallery when I first open it - they seem to sort of drag, like they are heavy. Does anybody know the reason why? I was thinking that they might be too big, but I need an expert opinion. Here is the site on gh-pages https://chrismlalazi.github.io/Thakor-Patel/index.html, and here is the repo. The site is still under construction and I am still yet to implement the lightbox for the gallery.
5 Answers
Erik Nuber
20,629 PointsHow are you saving your files? Do you know what your actual file size is?
I use photoshop to reduce my files. I find a decent size for web and reduce to 72dpi using the image size window. Then when I save, I further reduce using the save for web selection. This lets me knock down the files to 60dpi and, I can decide the level of quality. For images such as yours I would be saving as .jpg.
I recently completed, though will be making some changes, to my portfolio site and, my largest file that contains a graphic of a two page spread from a magazine is 166kb. The majority of my images fall below 90kb with most being under 70kb. So it could just be needing to resave and manage your photos.
Erik Nuber
20,629 PointsI have been in print production for years so am used to regular measurements and such but, the way I would decide is based on what you will use it for.
Right now, when you click on the image in the gallery section they get taken to their own page and the photo becomes huge. If you plan to add an overlay and have the image just appear on your screen above the other photos in the background than, you will need to decide a max-width for those photos.
If your wrapper for the body will be set to say 940px, than you probably want your images to be at most 800px wide. It can be smaller or greater than that. I just copied and looked at one of the images in your gallery and the one I chose was 4500px wide which equates to about 60 inches. That is just to big for a website.
So you just have to pick something you are comfortable with. If you want to you could go bigger, dropping to 1100px is more than fine and you can still control the max-width with CSS.
If you have an issue with having your photos resized, let me know and I will give you my email address and do it for you.
Christopher Mlalazi
Front End Web Development Techdegree Graduate 17,305 PointsHi @Erik Nuber, I am back. I finally managed to finish the website after I had compressed my images (which were too big at over 4MB each). I used this software to compress them https://tinypng.com/. But after replacing the original with the compressed, my problem still exists, my gallery of images is still dragging when it opens especially in Safari. You offered that you could resize the images for me, if the offer still stands can I please take it up? My email is chrismlalazi@gmail.com. I am doing these websites for free for visual artists in my country and having them hosted on my github pages. I am also using this chance to gain experience in website development, so both I and the artists are benefitting in this, them the exposure and me the practice. Here is the website https://chrismlalazi.github.io/Thakor-Patel/gallery.html, can I please ask you to test the gallery for me, if the challenge still exists, then I would like to resize images further, if not, then I proceed with these I have. Cheers and thanks in advance!
Christopher Mlalazi
Front End Web Development Techdegree Graduate 17,305 PointsHi Erik again, I finally managed to resize the images and everything is working perfectly now. I used this software which I bumped into http://www.resizr.com/show_image.php?fn=6366.jpg
Christopher Mlalazi
Front End Web Development Techdegree Graduate 17,305 PointsThanks again Erik, I am still yet to put in a lightgallery for viewing of the bigger images, will use a plugin and i know it will tae me a couple of day to do it as it looks a bit complicated but I have done it before. Let me try to resize the images, and if I fail, I will take up your offer. I will know by tomorrow morning as I will try that tonight. Many thanks again!
Erik Nuber
20,629 PointsNo problem. Best of luck.
Erik Nuber
20,629 PointsI sent you an email. I don't usually sign on during the weekend so just got your message. Just in case it gets spammed. I am at erik.nuber@yahoo.com.
I just tested the page you sent in three different browsers and they seem to work without a hitch. There doesn't seem to be any lag. So it is up to you if you want the images worked on any further. There are just a few so honestly it isn' t a big deal to do. It's a pretty quick process. Just would need to know what size you would be looking for or, if you just want the file size themselves reduced.
Christopher Mlalazi
Front End Web Development Techdegree Graduate 17,305 PointsThanks for the email, since the site is smooth now, I will leave it like that. Should I have more challenges in the future I will get in touch. Thanks a lot.
Christopher Mlalazi
Front End Web Development Techdegree Graduate 17,305 PointsChristopher Mlalazi
Front End Web Development Techdegree Graduate 17,305 PointsThanks Eric for the response, they are 1.19MB. I am not familiar yet with photoshop, I guess I will have to teach myself how to reduce/compress photo file size there. These were provided by the photographer as is - maybe I can ask the photographer to reduce the file size. Do you know what a good size could be?