0

My site has a php while-loop-generated table with about 2000 rows. Each rows renders from a variety of HTML elements including a user profile pic. The profile pic image size has smaller dimensions than the profile pic user uploads (on another page), so I was using css background-size to reduce the image size.

However, I just learned IE8 does not support background-size, so on first thought I figured I would use an php-coded image resizing function I developed. Problem is that the function (per image) generates a base64-encoded data uri that on average adds 3850 characters per table row.

Doing the math, this would add 2000 rows x 3850 ~ 7.7 million characters to the table, which is about 6 times the character count of the current table. Since this content is non-cached (a php script loads this content on page load and every 2 minutes thereafter), I don't see this as a viable option.

One option I could try is found at here (Merging two images with PHP). In my case, I would merge 2000 images into a "sprite" which I then slice up using php, then take each slice and insert into the correct row using a while loop. This sounds like it could get messy (not sure yet though, haven't tried this).

Is there any way to resize an image without generating a ~4kB data URI? Any possibilities besides an image merge?

Community
  • 1
  • 1
The One and Only ChemistryBlob
  • 7,864
  • 10
  • 36
  • 69
  • What if you created smaller images when the user uploads their larger picture? You could store full-size and scaled images; when a client requests your site, the smaller images would be served. – baum Mar 14 '15 at 00:21
  • 1
    My site has 6 different image sizes throughout the site, so I would have to have 6 different image sizes per user. I could do this but then a LOT of code would have to be rewritten, all because of IE8. I would rather lose IE8 users :P – The One and Only ChemistryBlob Mar 14 '15 at 00:23
  • 1
    http://www.w3counter.com/globalstats.php Currently at 2.6% global usage. – baum Mar 14 '15 at 00:25
  • Exactly, and these users could simply switch browsers. This post is more of a "gravy" question than a "need this at all costs" question – The One and Only ChemistryBlob Mar 14 '15 at 00:27
  • Actually, one thing you **could** do would be to write a PHP script that takes two arguments: image name and file size. It could then dynamically generate and return your image. This way you don't need inline data URIs or pre-generated files. – baum Mar 14 '15 at 00:31
  • My understanding is that an image resizing function resizes then assigns a data URI, which you need to reference to render the image. By calling the function the data URI is inserted as the image source...how could this be otherwise? Every image (background or image tag) needs a source – The One and Only ChemistryBlob Mar 14 '15 at 00:36
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/72960/discussion-between-baum-and-the-one-and-only-chemistryblob). – baum Mar 14 '15 at 00:38
  • @baum, I appreciate your time. If you post an answer with a credible simplified example of what you mean I will upvote it. – The One and Only ChemistryBlob Mar 14 '15 at 00:42

0 Answers0