jpo3136b Posted March 13, 2010 Share Posted March 13, 2010 <p>I was wondering if any of you webmasters out there thought there might be any advantage to cutting a very large picture (1024px on the long side) into several 100 pixel images and then having the HTML put the pieces together.</p> <p>One of the factors that I was wondering about was an idea that I came across in a reference which said that most browsers can only handle six calls at a time. So, in the case of the really big picture, this would end up being a stream of several such calls. </p> <p>Is a method like this faster, just as slow, or slower than trying to transmit the whole picture? If there's a delay in loading speed, is it significant enough to be too much trouble for the viewer?</p> <p>Just wondering. <br> J.</p> Link to comment Share on other sites More sharing options...
Matt Laur Posted March 13, 2010 Share Posted March 13, 2010 <p>There are a lot of variables at work there, John. Each new GET (for each of those images) has overhead associated with it, beyond the actual packets containing the image data. Each separate file is also another object for the browser's cache (and thus the local file system, and its indexes) to handle. The network overhead may be of no consequence for some visitors, but others (who might be surfing through a proxy server or some other ungainly layer) might really suffer.<br /><br />Then we have the issue of rendering the page that contains those tiled images. You can use an HTML table to constrain them, but you just don't know how some platforms will handle things. Of note would be the smaller displays on portable devices. They can tackle scaling a larger single image fairly well ... but can sometimes get really stupid over tabular designs.<br /><br />I'd focus instead on choosing the compression sweetspot on the single larger file. But that's just me!</p> Link to comment Share on other sites More sharing options...
jpo3136b Posted March 13, 2010 Author Share Posted March 13, 2010 <p>I was hoping to marry both. I was trying to come up with a way to load up that big honkin' ugly file at the end of the page, or on a button click or something. I wanted to use some kind of procedural containment, and was then thinking about using spans to fill in the blocks. I thought maybe I'd chop that thing up in sections.</p> <p>I have been using a lot of absolute positioning. I just thought I'd lay the blocks like tile as they loaded in succession or something.</p> <p>I picked up a fair amount of speed as I started recoding these pages. I have high hopes for The Better Mousetrap.</p> <p>Today I learned to build a big icon button with shadows using the spans; it seems way faster than what the WYSIWYG editor gave me before. No PNGs for the effects. I used concentric layers of DIVs and SPANs with Display Blocks at different z-indexes. I positioned everything by pixel, like map coordinates. It seems to be working out well.</p> <p>I thought I'd want to use something like it with a really big picture.</p> Link to comment Share on other sites More sharing options...
Damon DAmato Posted March 13, 2010 Share Posted March 13, 2010 <p>John, I'm no expert in these things, but look up "slices" with "photoshop" and maybe "web design."</p> <p>This "slicing" functionality is built into photoshop for web designers, but I've never needed to use it, so I don't know much about it.</p> Link to comment Share on other sites More sharing options...
lex_harris Posted March 14, 2010 Share Posted March 14, 2010 <p>I used Photoshop slices for a home page image on a previous website; it worked OK for me. I never saw any problems with browsers reconstructing the image and if I remember well it had more than 6 slices. But I'm no expert either!</p> Link to comment Share on other sites More sharing options...
jpo3136b Posted March 14, 2010 Author Share Posted March 14, 2010 <p>Thanks for the "slices." I'll have a look. I don't have photoshop, but that's probably what this is called. </p> Link to comment Share on other sites More sharing options...
Matt Laur Posted March 14, 2010 Share Posted March 14, 2010 <p>Slicing is traditionally used when you have a reason to make each chunk of the larger graphic serve as a link to some other URL. It's frequently used to carve up graphical menus, etc. For any even close to modestly sized graphic, a sliced up verison of it asks more of the browser and the network connection than does a single file. Where the sweet spot is, in terms of showing the visitor some progress in loading the larger image by breaking it up into pieces, vs the cleanliness of just making them wait for a single file ... that's completely subjective, given the huge variations in throughput/performance, browsers, etc.</p> Link to comment Share on other sites More sharing options...
peter_mounier Posted March 14, 2010 Share Posted March 14, 2010 <p>One thing you might try, if your intention is to show details of large pictures, is to use Zoomify. It does exactly what you're asking... chops up a hi res pic and assembles them in the browser on demand. See zoomify.com</p> <p>Peter</p> Link to comment Share on other sites More sharing options...
doug_dolde Posted April 27, 2010 Share Posted April 27, 2010 <p>I've started using the Photoshop Zoomify export. It works nicely though you'll have to host all the tiles files yourself. I added a bit of Javascript code to my window to adjust the size to be close to the Zoomify image. Look at my source code if you want to see the Java code.<br> By the way I tried the Zoomify Design version but its pretty cryptic; the Photoshop export works a lot easier.<br> All my panoramas are Zoomified on this page: http://douglasdolde.com/panorama.html</p> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now