Search Engine Optimization, Web Design

Use Graphics Correctly and your Web Site Downloads Faster

February 12, 2007

Using graphics effectively can make a big difference in how fast your website loads and how engaging it is. As an expert graphics designer in Swansboro, NC, located just minutes from Morehead City, we specialize in optimizing visuals for speed without sacrificing quality. By choosing the right formats and optimizing file sizes, we ensure that your site loads quickly while still looking great. Faster website speeds can improve user experience and boost your search engine rankings.

Graphics can visually make or break a web site. For a visitor, a web page with mostly text can look an awful lot like one of those “end user license agreements” and nobody wants to look at those things :). So, you need to grab your visitor’s attention and some well placed pictures can do wonders to that end.

But failing to optimize those graphics can have just as negative an impact as using no graphics at all. A graphic saved in the wrong format or one that is not compressed correctly will result in a painfully slow download time for visitors to your web site. This can cause them to lose patience and leave your site even before the Home page finishes loading. If that happens regularly, why even have a web site?

Well, here are a few tips to keep in mind when using graphics on your web pages. The purpose of these techniques is to keep the graphic file size small without compromising the quality of the finished image.

Tip #1 – Blur your .jpgs

    • The next time you are going to be placing .jpg files on your web page, open your photo editing or graphics program (usually Photoshop or Fireworks or maybe one of the

free Photoshop alternatives

    • we have recommended) and add a slight

guassian blur

    • to each of the images you plan on using. “Make the graphic blurry”, you say? That’s right. Now, I am obviously not talking about making the image so blurry that its

visual quality

    • is affected. No, I am saying that by adding a

slight

    • gaussian blur to a .jpg file, you will actually

decrease

    • that image’s file size. You will have to play around with the exact amount to add, but try it next time. You will be surprised at the results and the visual difference will be imperceivable.

This is an especially good trick for e-commerce web sites that display dozens of images per page. Reducing the file size of each of those images results in the total page loading faster and you thereby avoid the risk of your visitors becoming impatient and leaving.

Tip #2 – Know your .gifs

    • It is important to know exactly

how

    • a .gif file is compressed in order to take full advantage of this image format. A .gif file is compressed horizontally and from top to bottom. This means that a .gif image with the majority of its solid colors running horizontally will be smaller in file size than a .gif image with the majority of its solid colors running vertically. Here is an example:
horizontal gif
vertical gif
Image size: 118kb
Image size: 163kb

So, if you are using .gifs on your web site, see if you can orient the image so that most of its solid colors are running horzontally.

Now, if you are only using a few small images on your web page, don’t worry about it spending the extra time on these techniques. The big payoff happens when you are using lots of graphics on your web page and you apply these techniques. In that case, you can dramatically decrease the time your visitors spend waiting while your web page is downloading.

If you have some additional tips, don’t be stingy – leave a comment below with your tip :).

designer

CCT

Are You Ready?

When you are ready to get more specific information about your project, click here and fill out our handy online form for a free web design quote.

Get My Free Quote

you need a website?
we can help

    order a project

    arrow

    Recent Posts

    In Web Design

    Responsive Website Design Services in Morehead City NC

    Search Engine Optimization, Web Design

    Domain Name Services Scam - Kind of

    Feb 12, 2007

    Using graphics effectively can make a big difference in how fast your website loads and how engaging it is. As an expert graphics designer in Swansbor...

    Captivating Website Design - Morehead City NC

    Search Engine Optimization, Web Design

    Web Design Basics

    Feb 12, 2007

    Using graphics effectively can make a big difference in how fast your website loads and how engaging it is. As an expert graphics designer in Swansbor...

    Dynamic Web Design in Morehead City NC

    Search Engine Optimization, Web Design

    Three Common Web Design Mistakes

    Feb 12, 2007

    Using graphics effectively can make a big difference in how fast your website loads and how engaging it is. As an expert graphics designer in Swansbor...

    arrow

    Go to our blog