1

I am starting an online portal and I calculated that I need about 102 Images (based on the amount of articles), the problem is I want to keep the whole page below 800KB (Including all assets). I want to do this as I was reading through articles that minimizing requests helps increase speed and I also have a really bad "wait" time according pingdom for my resources (some up to 150ms), so I want to decrease the "wait" time.

Before coming here, I asked other programmers they said this wasn't possible, but I know it is, as both MSN and Yahoo achieve this.

So far these are the resources I have (No Javascript, Yet):

  1. Webpage: 54.KB (53.7KB - Actual Size)
  2. CSS: 190KB

and since my website is a blog/article website which has to show articles (located in other pages of my website), do you think if I sprite all of the article images and give it a quick lose less compression it would help? and if so how would I automate this process? because I have an admin portal that allows me to post new articles which updates this page (and the images too!).

Please Note the Admin Portal has a fixed image dimension for images which might help with this process.

I am also open to other solutions which can help my problem.

Thanks in advance.

Improve this question
4
  • Sprites are great for when a set of small images are all shown on multiple pages. Unless the same set of articles appears together often, creating a sprite for their images isn't a good idea.
    – Stephen Ostermiller ♦
    Commented Apr 9, 2015 at 10:50
  • Hello Stephen Ostermiller, Thanks for your reply however these articles won't be shown on anyother pages. Do you think there is a possible solution to my problem that you may know? Thanks in advance.
    – user3511245
    Commented Apr 9, 2015 at 10:51
  • Here is another recommendation for an image tool: smalleranimals.com/thumb.htm These guys specialize in exactly what you want. It is not an editor. It is an automated tool that leans out images to amazingly small sizes without quality loss. For example, I used it to take images already optimized by PhotoShop and used the exact same size and quality values and was able to reduce the file size by half (1/2). These guy are experts and amazing. I have used this tool for over a decade. The tool is free in trial mode and only $15 for a license. Can't beat that with a stick!!
    – closetnoc
    Commented Apr 9, 2015 at 16:35
  • Alright closetnoc - Thanks for your comment, I will look into the software.
    – user3511245
    Commented Apr 10, 2015 at 11:15

1 Answer 1

Reset to default
2

No.... image sprites are not good for photos and complex pictures.

This is because the file size would simply become far to big and would delay the page from loading and increasing the time it takes for users to see any content.

Sprites are good for basic template styling images that get reused across the site, this for many reasons is because it becomes cached, singular file download and smaller thanks to the likes of PNG Lossly Compression. Using Jpeg for basic images become larger than PNG and using complex images for PNG becomes larger than JPG. Another reason why designers use PNG for template files is that you don't want to lose any quality on the template either, and with the smaller size PNG is a WIN WIN compression choice for basic lossless images, and JPEG is a WIN WIN for photography and other complex imaging.

You options to increase download speed for content images are:

  • Use a compression of around 8-10 quality for JPG
  • Then use a lossy compression to get it even smaller without losing quality
  • Serve those files either on a different domain or better yeta CDN. This will enable parallel downloading.

Here's several ways you can make your images with lossless compression:

Improve this answer
13
  • Thank you for your answer helping me understand better about sprites, I have GZIP Compression enabled server side - is that enough or do I need something more? About your point of compression, can this be automated upon Image upload (in PHP)? and your last option, I currently just do this: example.com/image.png or .jpg, and make use of Cloudflare Business CDN should that do? or do I still need to server with different domain?
    – user3511245
    Commented Apr 9, 2015 at 10:57
  • Nope, you need to use lossless compression...
    – Simon Hayter
    Commented Apr 9, 2015 at 11:00
  • 1
    @w3d sorry I mean lossless. Your absolutely correct that gzip does lossless however the compression ratio tends to be better offered by commandline tools such as jpegtran, pngcrush and so forth as they are purely optimised for one purpose, not everything. I have tested with gzip enabled before and things like Google pagespeed still recommend using lossless compression as possible savings, even through gzip is enabled and working on those file extensions. Using lossless compression applications I gain more savings, possibly only a few kb at a time but still it all adds up.
    – Simon Hayter
    Commented Apr 9, 2015 at 12:05
  • 1
    It's also worth mentioning that gzip doesn't remove unnecessary data, while these command-line tools do, they will anything possible to get it down to the smallest size, for example sometimes it'll switch from RGB to index colors, it will even remove all the meta data if you choose to as for the most of the time is wanted anyway. Maybe using lossless on its own was a bad example, so lossless optimisation I mean.
    – Simon Hayter
    Commented Apr 9, 2015 at 12:13
  • 1
    Other suggestions for optimization: I use pngcrush: pngcrush -brute file.png and jpegoptim: jpegoptim --max=80 --strip-all file.jpg for images that I publish on my websites.
    – Stephen Ostermiller ♦
    Commented Apr 9, 2015 at 12:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.