: Is Image Spriting for Articles Images a good solution? 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
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):
Webpage: 54.KB (53.7KB - Actual Size)
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.
More posts by @Ann8826881
1 Comments
Sorted by latest first Latest Oldest Best
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:
Download Application > PNGoptimizer
Download Application > The JPEG Reducer
Web Application > Compressor.io
Web Application Api > tinyPNG API
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.