Understanding Image Optimization

Image optimization is complicated and a multi-tiered process that takes months of study and practice.

Just kidding. It’s easy.

First, make sure you’re images aren’t huge. Most digital devices take pictures in high resolutions and most stock photos come that way. Always size your images to the exact size they’re going to be online. If you’re using relative widths with a responsive design (eg 100%, 90%,) then size it to the max width you’re using and consider using media queries to  scale down the image if possible for mobile devices and tablets.

Second throw your images through an optimizer to reduce their overall “weight”. This won’t affect image quality most often and will reduce the KB of your image by up to 95%. So a 100KB image becomes more like 5KB. This is significant. The best image optimizer (free) on the market it RIOT. http://luci.criosweb.ro/riot/ RIOT is easy to use and does a great job on jpegs … not so much on transparent png’s. Still it is very useful and best of all, free.

Ultimately, that is it. Size your images and run them through an optimizer …. aaaaaand…. you’re done. Simple. Livewire.

More Web Design Blog Content

SEO is No Big Secret

Really, SEO is not some big secret. Some companies try to pretend it is but you don’t have to be an expert to manage your own SEO. What do you think search engines like Google want? Well, they want what their users’ want. That’s how they get business,

Leverage Browser Caching

When a webpage loads on your screen there are a lot of little pieces that have come together to create what you’re seeing. Your logo, other images, style sheets, javascript files are among some of the external resources a webpage might use to render itself on your screen.

CSS3

Lots of new fun with CSS3. CSS makes styling web pages a snap. Now CSS3, the third “version”,  allows for incredibly robust styling possible. For instance, background gradients are a breeze when before developers had to create them as images or use CSS ‘hacks’ to accomplish those goals.

Preloading Images with Jquery

There are times when preloading images is an important step in keeping your site/page/program running smoothly. This is especially true in the era of mobile. Here’s a cute little snippet that does just that. function preload(yourarrayOfImages) { $(yourarrayOfImages).each(function(){ $(‘<img/>’)[0].src = this; }); } preload([ ‘img/image1.jpg’, ‘img/image2.jpg’, ‘img/image3.jpg’ ]);

Submit A Sitemap … To Bing?

Indeed. For some reason, Bing still exists. And since it does you’ll need to submit your sitemap so your business will show up in the results of a person who searches from the unwanted automatically installed Bing bar on their browser. They’re so lovely, forcing it on you

Maintaining The Correct Keyword Density

Keyword density, by definition, is the number of times, expressed in a percentage, that a particular keyphrase or keyword appears in a body of text. So if your keyword appears 4 times and the number of words on the page is 200 then your keyword density is 2%.