Skip to main content Screen Reader Website Version
Get a Quote
Home Web Design SEO Services ADA Compliance Hosting & Support Custom Web Applications Our Work About Blog Contact

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

What’s Worse?

What’s worse than these dang North Florida love bugs? Having a poor website, for one. A website should be like the dream employee . It should never call in sick, treat your customers properly and get them the information and the attention the require each and every time.

An Accessibility Mindset

How often do you receive this response when inquiring about making a website more accessible? We wish we could devote more resources to it, but at the moment we just don’t know enough to get started. The value and necessity of making websites accessible are generally recognized. Almost

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.

Better Than Notepad: Notepad ++

We love this little program. It’s a replacement for Notepad called Notepad++. It’s like notepad on steroids. Lots of  new, useful functions – essentially, everything Microsoft neglected to put into their product,; open source, once again, has provided a better alternative. Easy find/replace functions, even in files so

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’ ]);

Adding a Fee in Woocommerce

This piggybacks off of a solution I found elsewhere. We modified it to add a single fee for products based on the taxonomy. It comes in handy to categories products and then apply this rule to that category. function action_woocommerce_checkout_calculate_fees( $cart ) { // Initialize $quantity = 0;