Posts in "Design" category

Optimizing Photos for the Web

Optimizing the images on your website can be one of the most noticeable improvements in its speed you can make. If your page takes more than half a second to load, your number of users will decline as they leave your site before it ever finished loading.

Size Appropriately

Did you know many popular tools such as WordPress may not resize your images automatically? If you insert a 3000 pixel wide image in a container 1000 pixels wide, the browser will still download the large image. The browser will then scale that image down to fit into the allotted space. Resizing your image is an absolute must for best optimization.

Let’s take a look at an example JPEG that is 4608×3456 pixels and 4.71 megabytes. Consider a mobile user who is using 3G data (which has a top speed of around 750 kilobytes per second, but often less) This image would take them 6.3 seconds to download!

Just by resizing this image down to a good size for a blog post (500×375) can bring this image’s file size to 97.6 kilobytes, which would only take our same 3G user 130 milliseconds (about a tenth of a second) to download.

Change the Image’s Quality Settings

The most common format for photos, JPEG, is extremely flexible. It has the possibility to encode the same image many different ways. Your goal is to find the happy medium of acceptable image quality to file size.

How It’s Done – Adobe Photoshop

Photoshop isn’t free, but it is by far the most popular software out there for the job.

The easy way to optimize your images is to go to File -> Save for Web. A new dialog will pop up with many options you can choose from. The image file type (shown in blue in this image) is currently set to JPEG which is ideal for the photo we’re optimizing. Be sure this is selected. By default, another format such as GIF may be selected.

There are presets for quality options for your images you can choose here as well. Change the dropdown box next to “Preset” to select “JPEG High”, “JPEG Medium”, or “JPEG Low”. These will each sacrifice more quality for smaller file sizes.

Once you’re happy with the settings, hit the Save button.

Optimizing Photos with Photoshop

With our scaled photo, this brought the size from 97.6 kilobytes to 37 kilobytes!

 

How It’s Done – GIMP

There are plenty of free alternatives to Photoshop. One of those is GIMP, available from http://gimp.org/

With this tool, you have to set the options manually. Once your image is loaded and resized appropriately, go to File -> Export. From here choose a location and file name and click on Export.

Another window will pop up with the saving possibilities. To get similar results to Photoshop, change the Quality setting to 60. Under Advanced Options, uncheck the Progressive checkbox (unless you want that feature).

Finally, hit Export to save your changes to a file.

Optimizing photos with GIMP

With this scaled photo, this brought the size from 97.6 kilobytes to 29.7 kilobytes!!

Can You Tell the Difference?

There are two versions of the same photo below. One is saved at 97% quality, and is 97.6 kilobytes in size. The other is saved at 60% quality, and is 29.7 kilobytes.

Optimizing Images - 60% Quality

Optimizing Images - 97% Quality

They’re remarkably similar, and one is a third of the size. In this example, the quality difference is most noticeable on the white icicles at the bottom. The first photo has more JPEG artifacts around the edges, and it is indeed the lower quality of the two. They’re both still beautiful, and most people would be hard pressed to find anything wrong.

That’s It!

It can seem a little daunting when looking at optimizing your images for your website, but once you get the hang of it, you won’t spend more than 10 seconds on each image. And why wouldn’t you?

From the original full-size photo at 4.71 megabytes down to our scaled and optimized image at 29.7 kilobytes is over a 99.99% savings!

It’s DEFINITELY worth the 10 seconds of your life and saves your mobile users valuable loading time. So they spend more time engaging with your content, and less time looking at loading bars.

5 Skills Designers Should Have

So you want to be a designer? It’s an exciting and creative job that gives you a step up into the profitable and ever-changing world of website technology. And let’s be honest for a moment: people and businesses will always need websites designed. This allows for a considerable amount of job security. So what skills should you know before jumping into the deep end? Here are five key skills to have under your belt in order to become a stellar website designer:

1. Understand the Basics

Perhaps the most important skill for budding designers is the ability to understand basic HTML and CSS, the coding languages for the vast majority of websites today. Yes, there are tools that designers can use, such as Macaw and Webflow, that can create beautiful websites using only drag and drop principles. No coding required. The drawback is that you can only rely on these website builders for so long. As you grow as a designer, a client will eventually come up with something too large or complex for a drag-&-drop platform. Then you will want to NEED the knowledge of HTML and CSS.

Knowing the basics of HTML and CSS should be important to designers because it allows you to see the works of your hands come to life. This knowledge will allow you to come to a better grip of what your limitations and expectations as a designer are. HTML and CSS will tell you how different web aspects will appear, such as where images will be placed, how text will look, among other things. Would you build a house without a foundation? No? Then why would you choose to ignore the cornerstones of many websites?

2. Marketing is Key

Your website will unfortunately not draw people to it on its own. The budding designer must be knowledgeable about the advantages of marketing. With the rise of social media, it has become easier than ever to get your name out to the public. However, many designers see this as the job of someone else or not important at all. In order for anyone to acknowledge your brand, they must be informed about it. Becoming fluent if not knowledgeable on major social media outlets (Twitter, Facebook, Instagram) will allow you to get your name into public awareness.

Another important thing to understand is the idea of actual marketing. There has been a rising trend of utilizing advertising campaigns. Websites can use paid marketing schemes such as Google AdWords to place ads in places where specific and targeted people will see them. Know the ins and outs of these marketing campaigns and they will help your clients get business!

3. A Picture’s Worth a Thousand Words

After spending so much time on a design, make sure you follow through completely. It’s important to put effort into all aspects of your design. One of the highest priorities visually is the quality of the images on your site. Yes, designers can create engaging designs but should the images have poor quality then your whole site can be easily disfigured. Knowing the quality of good photography or graphics is vital to the overall look of your website. Spending the extra money and time on the quality of these things will not only improve your site but also improve your own image as a designer.

4. Print is important too

As a designer, you need to be well rounded. Not only will this open more doors, but it will also help to expand your skill set and make you more marketable. So learn how to design print materials for any websites you may create. Anybody can slap a logo on a template and call it a business card, but having quality print materials is a vital part to any business. That’s where you can come in.

Knowing how to translate a company’s website and logo into print is an excellent skill to have. Many industries still rely heavily on business cards, brochures, yard signs, and printed material. Having this skill will give you the edge when clients go looking for a designer.

5. Be Creative

In today’s ever expanding society of the newest and trendiest websites, you have to stay on the cutting edge of things. Being creative is an imperative part to any good designer’s tool kit. A computer will never be able to create beauty and that’s why you are so essential. Let your creative juices flow and create a masterpiece on the Internet. Keep an eye on those popular websites around you and learn from them. Note what looks amazing and what just doesn’t work. Be your own designer and create something unique and beautiful.

There are so many valuable skills a website designer should possess. The ones listed above are just a sampling of those considered most important. If you truly want to be a designer, start with creativity and go from there. Drive and desire will follow if you’re passionate and inspired. Best of luck!