Tips to make your images load faster

September 23, 2008

Here are 10 quick tips for decreasing the load time on your graphics.1. Use Height and Width (Size) Attributes.

 

 

1. Use Height and Width (Size) Attributes.

Every time a browser loads a webpage it looks for the height and width attributes (size) of each image in your html code so it knows how to lay out the text and the graphics on that page.

This all takes place instantly behind the scenes. When the proper attributes are used, the browser loads the text before the graphics. This is good. It’s faster this way.

If you do not use the attributes, it causes a delay waiting for the browser to download the images first and then lay out the text. The browser has to play catch-up. It cannot load text onto the screen until it has figured out the exact size of the graphics.

Make sure to use attributes on all your graphics, even those little tiny ones, like buttons and bullets.

2. Size Your Image Correctly

If you do not use the attributes, it causes a delay waiting for the browser to download the images first and then lay out the text. The browser has to play catch-up. It cannot load text onto the screen until it has figured out the exact size of the graphics.

Make sure to use attributes on all your graphics, even those little tiny ones, like buttons and bullets.

Lets say you’re trying to place an image with a file size of 30k and height & width attributes of 300 pixels wide by 400 pixels high in a spot on your webpage that is designed to hold an image sized at 200 pixels wide by 300 pixels high.To accomplish this you have changed the height & width attributes in your html code to 200 x 300.

 

Use an image editor to change the size of the image to the correct dimensions first. Then use the correct size attributes in your html. By resizing the image before you plug it into your html code, the file size will be smaller and the browser will load it quicker.3. Animations4. Use the Correct Image Format5. Slice Those Images6. Limit the Number of Graphics you Place on Each Page.

 

Animations are attention getters, but they quickly become annoying. They also slow down the loading of your page.

Limit the number of animated graphics on your page and set your animation at a specific number of repetitions rather than allowing them to loop endlessly.

 If your image is simple with a small number of colours try converting it to a gif format. Good choices for this are clipart, bullets, buttons, charts and such.

A word to the wise. Not all images are suited for the gif format. Complex images, photos or those with enhancements such as reflections and drop shadows do not display well in this format.

The jpg format is suitable for complex images with lots of colour variations. A good example of this is a photograph.

The .png format can be used for either. The high-end .png format (png-24) produces a beautiful transparent image and maintains any enhancements you have included. The file sizes are generally higher so if you are at all concerned about load time, you may not want to consider the .png format unless you have the software and skills to slice your images. (See Tip #5)

 Image slicing is a technique used to breakdown a large image into smaller pieces to make it load faster.

I use the image slicer feature in Photoshop but there are also many options available to do this if you don’t use Photoshop.

Search for “Image Splitter” - without quotes in your favourite search engine for list of resources for slicing images.

 

If your pages are loading too slowly, consider removing some of the images. Keep only those that absolutely necessary.

7. Use Thumbnails8. Browser Cache9. Optimize Your Images10. Progressive Optimization

Use a java script to display a thumbnail and load the larger image only when the reader rolls their mouse over the thumbnail.

I use this technique when I have many images I want to put on one page, but the page would be too big if I included them all at normal size.

I got this script from Dynamic Drive. As long as you keep their copyright notice in the html code, you can use their scripts free.

 

Graphics and text are stored in what is called cache on your hard drive. This makes it easier and quicker to load files that are displayed in your browser. It loads them from the cache rather than over the net each time, if it is available.

To improve your visitor’s experience, take advantage of their browser cache. The best way to do this is by not putting identical images in more than one folder, subfolder or directory on your server. If the browser always calls the image from the same folder, it loads much quicker.

 

optimizing your images is a great way to reduce the load time. I generally optimize images I make for my clients to about 60%. I have found this to be the magic number that reduces the file to a reasonable size yet does not compromise the quality of the image.

I caution you on optimizing further. Greater percentages of optimization may leave your images blotchy with speckled blocks of colour. It will often make your colours look washed-out and you may lose some of the fine details.

 

A sneaky little trick I have learned is to select progressive settings when you’re optimizing your images.

This does not really make your images load faster; however, they do load first at a very low resolution and continue to load progressively, with more detail, until they are fully loaded.

Your visitor at least has something to view and content to read while the loading process finishes up. This technique works with JPG, JPEG, PNG and GIF 89 file types.

Filed under: General Information, Graphics, Image Formats Explained, SEO Search Engine Optimisation | Comments (0)

Who we are & what we do………

July 7, 2008

what we do & Who we are:

Sparkle Web Design is a professional internet strategy and design agency based in Leicester. We are proud of our integrated creative team of designers, programmers and marketing professionals. Our business led approach has built us a reputation for creating a positive return on investment for our clients.

Sparkle Web Design specialise in bespoke web site design, online marketing, email providers, flash multimedia, corporate identity and hosting packages. Please browse our site to see how strategic thinking, personal attention and competitive prices can achieve real world results.

Our new offices are equipped with state of the art facilities to better enable us to meet our client’s needs. We currently manage sites for e-commerce traders, publishers who use our e-brochures and several estate agents for whom we designed individual virtual tour sites.

Sparkle Web Design is in a unique position to be able to offer you other services to complement your website. We have special relationships with several leading telecommunications providers which can help you streamline your offices and reduce your telecom bills, whilst still keeping you at the cutting edge of capabilities. Follow the Telecom link for more information on how we can save you money.

If your company is in need of an image overhaul or you’re a brand new business the Sparkle Web Design can help you in so many more ways. Our marketing adviser and the creative team will guide you through logo redesign, paperwork printing and even premises signage. Got a corporate event you need to promote? Then look no further Sparkle Web Designs’ affiliate company can produce every kind of promotional item from t-shirts to pens to mouse mats and banners. Follow the Corporate Services link for more information.

Listed below are direct links to the rest of our site.

Home

Web Design

Hosting

Corporate Services

Portfolio

Telecom’s

Blog

Contact

Terms & Conditions

Filed under: Everything Else, General Information, Graphics, Hosting, IPgenie X-Lite, Image Formats Explained, Node4 Telecoms, SEO Search Engine Optimisation, X Lite | Comments (0)

IPGENIE

May 21, 2008

I have been asked many times about IPGENIE such as what they offer, how the offer it, what are the prices, how quickly can I get it, what platform do they use, where is their equipment made and so on. So it was with this in mind that I set about creating a PowerPoint presentation that explains just about anything and everything there is to know about IPGENIE. If you require a copy of the IPGENIE presentation please send an email to enquiries@sparklewebdesign.com and we shall endeavor to get it sent out to you as soon as possible. We also have the same information about IPGENIE in the form of a brochure and if you would like a copy please call, our offices leaving you name, address and telephone number so we can get a copy sent out to you as soon as possible. From our own personal dealings with the guys at IPGENIE I can honestly say they are a friendly bunch of folks. In business or at home we meet people from all lifestyles and from all sorts of backgrounds.   In my experience, I have learnt through a lifetime of business ventures failed and otherwise that sometimes there comes along a company that you feel really has something to offer and that it can really make a difference.   To be frank (My name is not Frank and never will be) I have found that IPGENIE fits into that wonderful accolade of being a great business with a bright future. I wish IPGENIE all the best and look forward to continuing to work with them. IPGENIE……….More than just talk

Filed under: Everything Else, IPgenie X-Lite | Comments (0)

Perfect Links

May 19, 2008

Creating the perfect links

 Webmasters are given the advice that they must attract links, but the key is not just to attract links… they need to attract good links. But what is the perfect link? The search for the perfect link need not be a quest in vain. Consider the following when attempting to attract links…1. RelatedThe best links should come from related websites which contain similar and related content but not the same type of material or content. For example: A link for baby clothing would benefit from a link that discusses baby care. 2. Anchor The anchor text (the “text” that is used in the link) should include keywords that relate to the topic covered on the web page that is being linked to. Anchor text should be varied; links that all have the same anchor text will appear manipulated and contrived to the search engines. Therefore, the text links should contain a variety of related words.3. Deep Link The links should direct visitors to a related page within the website. Do not make the mistake of directing all of the web links to a website’s home page. Deep linking, and directing visitors to material that corresponds to content that is closely related to the text link is key. Deep linking appears more natural to search engines, whereas links directing all visitors to a single page or the home page seem unnatural, and could be interpreted as an effort to manipulate search engine ranking.4. Domain And Page Authority Search engines trust some websites more than others. Links from “authority” websites have more weight than links from lesser-known websites. Google is said to use Page Rank as an indicator of authority. Keep in mind that Page Rank is not the only factor used to determine a website’s authority. Authority websites should still relate to the website it is pointing to.5. Nix No Follow Links should not contain the No Follow command. The No Follow command directs search engines to not “follow” the link. If a link contains “No Follow” there is no search engine benefit from the link; the only benefit to having the link is any organic traffic that results if the link is clicked. As a result, No Follow links are nearly worthless.6. Mix It UpLinks should come from a variety of sources. Fewer links from a larger number of websites will generally “weigh” more than a large number of links from a small number of websites. 7. Surrounding Text Some search experts claim that the text surrounding a link can influence ranking. Whether this is true or not is difficult to determine. It is more likely that links containing surrounding text are more likely to be relevant, and as a result those links tend to be worth more.8. Link Position The location of the link on the page can also influence the value of the link. Some search experts claim that footer links carry less value than links which are integrated into the actual web page content.9. Type of Link There does not appear to be a difference between a “text” link’s value and an “image” link’s value, if the image link contains ALT text. The search engines use the image ALT text in the same way they use the anchor text of a text link.10. Number Of Outbound Links A page with fewer links is better than a page with a large number of links. This is because a WebPages passes along what is referred to as “link juice”. The more “link juice” passed along, the more valuable the link is. The link juice is divided up over all the links on a WebPages, so popular websites with few outgoing links are more valuable than those with a large number of links.11. Link Age Search engine critics cannot seem to agree as to whether older links or newer links carry more value. When information is vague, it is best to garner both aged links and new links to websites.12. Vintage Domain The age of the domain is said to influence link power. More than likely the age of the domain simply contributes to the trustworthiness of the website, and links from trusted websites tend to have more value.13. One Way Links Links that are not reciprocal carry more weight than those which are simply link-for-link exchanges.14. Page Content A web page that is mostly just a list of links has less value than a web page that contains a mixture of links and content.15. Updated Pages Web pages that are updated frequently will typically be spidered by search engines on a more frequent basis. The update will not influence the power of the link, but it will mean that the link will be picked up more quickly by the search engines.16. Link Surges Webmasters should be encouraged to gradually build links over time, rather than all at once. The gradual improvement is more natural and will have a stronger impact on organic search rankings.The quest for the perfect link can be frustrating and elusive, but the fact is: the perfect link is logical, appears natural, and grows over time.

Filed under: Everything Else, General Information | Comments (0)