zachruss92 Posted April 6, 2011 Share Posted April 6, 2011 I Have a few issues regarding images. First of all, im creating a website for a friend Philadelphia Entertainment and he wants me to use this image as a background. When i put it as the background of the container, it loads super-slow. I can see that it's 7+ MBs JPEG so that can be a partial explanation. I want to know if i can do anything to make the image load better? I would like to see It load faster.The next thing I would really like to learn more about the graphic element of web design. I am currently a high school student and have no hope to be able to afford photoshop anytime soon, but I have GIMP and i know that works pretty well. If I could get a recommendation as to an image editor to use, and where a good tutorial for them is?Lastly, i would like to know more about image sprites. I know that w3schools has a little information about them, but i would like to know more about them, because im a little confused as far as they work in practical application.Thanks In advance for everyone's help, i really appreciate it Link to comment Share on other sites More sharing options...
jeffman Posted April 6, 2011 Share Posted April 6, 2011 The only way to make an image load faster is to compress it.For most people, the cheap alternative to photoshop is gimp.Image sprites are ideal for small images -- like buttons or icons -- that need to be downloaded all at once. The idea is to combine multiple images into a composite. Background image positioning makes it possible for only one piece of the whole composite to be visible. Ever notice a page that has a bunch of little buttons that pop randomly into view as the page downloads? Annoying. If all the "images" are part of one image, they all appear simultaneously. Much nicer. Also, buttons that require multiple images to represent different states -- hover, click, on, etc -- look terrible if the first state change causes a new image to download. Users HATE that. If all the images are part of one composite, they download together. Changing state just repositions the background, so even the first state change happens immediately. Link to comment Share on other sites More sharing options...
justsomeguy Posted April 6, 2011 Share Posted April 6, 2011 I can see that it's 7+ MBs JPEG so that can be a partial explanation.That's the entire explanation. Photography people have a habit of saving their images with as little compression as possible. That's great for photography, but not for the web. You'll need to compress those images. You may want to save them as PNG files, which don't lose any quality when you compress them, but if the PNG files are still too large then you'll need to re-save them as JPG files and increase the compression until the file size is reasonable. A background image of around 100KB is pretty reasonable.Photoshop (and other Adobe products) and GIMP are the two most popular image editors. Luckily for you, piracy is part of Adobe's business model.As for sprites, they are almost always used as various images for backgrounds or borders, and also for image rollover effects. Why load two images for a button rollover when you can only load one and just move it? For that matter, why load separate images for 20 buttons when you can put them all in the same image and just move it around? Here's a sprite, for example, which is part of the ExtJS framework and includes the normal and over states for several different kinds of buttons:http://dev.sencha.com/deploy/dev/resources...ool-sprites.gifIt's better to load that instead of individual images because there is overhead with each request to the server, so once that one image loads you get all button states for all buttons without needing another request, to stop things like a delay the first time you hover over a button while it downloads the over state for it. Similarly, here's another sprite which contains the various parts of a single button:http://dev.sencha.com/deploy/dev/examples/...startbutton.gifYou can see those in use here:http://dev.sencha.com/deploy/dev/examples/...op/desktop.htmlThe second sprite, the single button, is used for the Start button on the bottom-left. If you click Start and open the Accordion Window, you can see several buttons that use the other sprite for their images. Notice when you hover over them there's no delay in showing the hover state, because it's already been downloaded. Link to comment Share on other sites More sharing options...
zachruss92 Posted April 6, 2011 Author Share Posted April 6, 2011 Okay, Thanks a lot, that gives me a lot of information about the image sprites and background images. How exactly can i compress the bakcground image atPhiladelphia Entertainment Like i said it is over 7 megabytes in size and i dont know if i can reduce the size to a favorable 100KBs. And If i was creating a navigation bar, should i just create three images and then stack them on top of eachother and use image sprites? and does anyone know a website that is really good to learn about using GIMP?I appreciate everyone's help. Link to comment Share on other sites More sharing options...
justsomeguy Posted April 6, 2011 Share Posted April 6, 2011 An image editor like Photoshop or GIMP will give you options for JPEG compression when you save the file as that type. When you save the image for the web you'll typically get a screen where you see the uncompressed image and how it will look once you save it. Link to comment Share on other sites More sharing options...
zachruss92 Posted April 6, 2011 Author Share Posted April 6, 2011 Okay, I did that and saved it from a quality from 98 to 50. But after that, it was stil 1.37 mbs I did it in JPEG format though An image editor like Photoshop or GIMP will give you options for JPEG compression when you save the file as that type. When you save the image for the web you'll typically get a screen where you see the uncompressed image and how it will look once you save it. Link to comment Share on other sites More sharing options...
jeffman Posted April 6, 2011 Share Posted April 6, 2011 If the image has large dimensions, like 1200px by 1150px, that might be as small as it gets without ruining the image. As a rule, BIG images are a bad idea, for exactly the reasons we've been discussing.Frankly, from a design standpoint, the image in question is just not interesting enough to make it the focal point of that page. Try to convince your friend of this. Surf the internet to your/his favorite sites and point out that most of what looks cool is HTML and CSS used cleverly, not big overwhelming images.Even when it seems that an image is big, more likely it is small and the edges blend into a background color or a small repeating gradient. A lot of illusion happens on the web. Link to comment Share on other sites More sharing options...
thescientist Posted April 6, 2011 Share Posted April 6, 2011 another option is have a smaller compressed version of the image for people to "preview" and then tell them that they can click for a larger/higher quality version of the image, which can load the 1MB or so version of the image in it's own page. Thus the user has the option to just glance at the thumbnails, or reduced size/quality versions, and then they can opt-in to the larger quality one, with the understanding that it will probably take a few seconds to load. Link to comment Share on other sites More sharing options...
zachruss92 Posted April 6, 2011 Author Share Posted April 6, 2011 That makes a lot of sense, I spoke with my client, and he said that he wants the image at the highest quality possible, even though it takes a while to load. I am seeing an issue when i open Philadelphia Entertainment in FireFox the background image doesn't load correctly. I don't know if it is just my computer or all computers, but i have no clue how to deal with that issue. Also, for future references, when I am creating web graphics, what exactly should i do in the case of file type (.JPEG, .PNG, .GIF?) and is the compression rate within the image. Are there certain guidelines that i should follow, because I have seen background images that are quite large, that load almost instantaneously. I know when i put this the background image that is 7+ MBs it takes forever to load, but when I reduce the quality in the JPEG image it becomes extremely distorted. I can see now that I don't know how to do this, but I have aspirations to become a web designer/programmer after I graduate High School, and I would like to know as much as I can. Thanks for everyone's help, Link to comment Share on other sites More sharing options...
jeffman Posted April 6, 2011 Share Posted April 6, 2011 One thing to keep in mind is that your browser will cache most images, either in RAM or on your hard drive, until it runs out of space. Then it uses a priority system to determine which should be wiped from memory. So an image that loads very quickly may be one that's on a site you visit often. All the images are still available locally.As a designer, you can take some advantage of that, if you assume your visitors will return often.You also have to keep in mind connection speeds. If your server has a fast connection, download time will be faster. Link to comment Share on other sites More sharing options...
zachruss92 Posted April 6, 2011 Author Share Posted April 6, 2011 You also have to keep in mind connection speeds. If your server has a fast connection, download time will be faster.How can I determine how fast a server is? I am using the web host iPage and they are running the vDeck Platform.Also, is there any rules of thumb when creating web images, or are there tutorials anywhere?Thanks, Link to comment Share on other sites More sharing options...
justsomeguy Posted April 6, 2011 Share Posted April 6, 2011 You can use internetsupervision.com to have severs around the world connect to whatever you specify and report the time it took. Link to comment Share on other sites More sharing options...
Ingolme Posted April 6, 2011 Share Posted April 6, 2011 You should allow the user to cache the image. It keeps trying to realod the image every time I enter the page because a max-age header is being sent. Link to comment Share on other sites More sharing options...
zachruss92 Posted April 7, 2011 Author Share Posted April 7, 2011 You should allow the user to cache the image. It keeps trying to realod the image every time I enter the page because a max-age header is being sent. What do I have to do to allow user to cache the image. I am not familiar with the max-age header. The background image is set in CSS. If someone could show me an example of the code to allow the browser to cache the image I would Greatly appreciate it Link to comment Share on other sites More sharing options...
zachruss92 Posted April 8, 2011 Author Share Posted April 8, 2011 You should allow the user to cache the image. It keeps trying to realod the image every time I enter the page because a max-age header is being sent.How do I allow the user to cache the image? Link to comment Share on other sites More sharing options...
justsomeguy Posted April 8, 2011 Share Posted April 8, 2011 It should be configured on the server. If you're not the one who configures that server, ask whoever does if they can help out. Link to comment Share on other sites More sharing options...
zachruss92 Posted April 10, 2011 Author Share Posted April 10, 2011 It should be configured on the server. If you're not the one who configures that server, ask whoever does if they can help out.I am the person who administers my server. I could contact support to help me out, but i'm not completely sure of what I should even ask them. What I would like to do is allow users to cache my background image so it doesn't have to reload every a visitor goes to a new page within my website.Thank you for everyone's help Link to comment Share on other sites More sharing options...
justsomeguy Posted April 10, 2011 Share Posted April 10, 2011 How you set that up depends on your server.http://www.google.com/search?client=opera&...channel=suggesthttp://www.google.com/search?client=opera&...channel=suggest Link to comment Share on other sites More sharing options...
zachruss92 Posted April 11, 2011 Author Share Posted April 11, 2011 After a long wait, I spoke with my web host. I asked them about the max-header and they said that they cannot support that because I am a part of a shared server. Does anyone have any ideas as to what i can do about thisThanks For Everyones' Time Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.