search

tcu360 / election-central

This app creates a central location for all SGA election news.
election.tcu360.com
0 stars 0 forks source link

Reduce image sizes #35

Closed achavez closed 10 years ago

achavez commented 10 years ago

I've deployed to elections.tcu360.com and the biggest issue I see is that some of the image files are huge. For example, this one: https://s3.amazonaws.com/tcuthrsxtyassets/sgaelections2014/headshots/alex-smith.jpg

It's 2768px x 2768px. But, at least on the desktop, the app only needs it to be 184px x 184px. On mobile I'm sure it needs closer to 350px x 350px. That image is 4.3mb and takes about 2-3 seconds to load. So that x all of the images on the page + .imagesLoaded and you get the issue.

If I were you, I'd figure out what the max size is that you need them at. Then scale them down and, if you really want to speed it up, when you save them in whatever app you're using knock the quality down.

You can do this with a batch function in Photoshop, if you'd like. I can show you how.

richardescobedo commented 10 years ago

I was thinking about this today. The only reason why I didn't scale them down to something more practical was that if somebody resizes the browser window, the image would not fill the entire width of the panel, which was visually unpleasing (at least to me). (Such as in the case below.) Thoughts? screen shot 2014-04-03 at 12 14 28 am

In any case, I completely understand your point – right now the page load time is miserably slow and I know this is one way to speed it up. I've got a batch resizing function, so I'll pass these through and scale them down.

achavez commented 10 years ago

One way to get around the issue of them not filling the panel would be to use narrower columns, specifically on the small breakpoint. So rather than col-lg-4 col-md-4 col-sm-6, maybe try col-lg-3 col-md-4 col-sm-4 col-xs-6? That may help.

Also, if you're concerned about how they look on retina displays, you can do 150% of the resolution instead of 200%, which will usually still give you pretty great results even at a low JPEG quality setting.

richardescobedo commented 10 years ago

@achavez I went ahead and resized them – together, they are now ~8mb, down from close to 23mb. Is that acceptable? Or should I make them even smaller?

achavez commented 10 years ago

8mb still seems big but it’s a heck of an improvement. What are you setting the JPEG quality at? And what are the dimensions you're using?

richardescobedo commented 10 years ago

The quality is set at 5, but I didn't adjust the dimensions for any of the photos.

richardescobedo commented 10 years ago

The smallest I've been able to get them down to as a whole is exactly 4.8mb, with the quality set to 3 and the dimensions at 350px x 350px. Anything lower than three degrades the quality of the photo way too much.

achavez commented 10 years ago

Best I can tell, this is fixed so I'm closing.