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

Digital Worlds

Just finished up a long term project with Digital Worlds at the University of Florida in Gainesville. This web design project intends to reach young audiences with compelling content. It is a place for them to upload videos, share, collaborate and get insights into problems and issues that

Product Variations – WordPress Plugins

So this is a nice little plugin – an add-on to Woocommerce called Smart Variation Images. The extension allows  you to set different images to each product variation. This is handy to display different style types to the user as they browse through your product variation choices. Each time they

Redirects & Canonical. What’s The Difference?

There is a lot of confusion about the difference between setting redirects and canonicalization. Here’s the deal. What a 301 says to search engines. Hello, Mr. Search Engine. My page has has moved, permanently, to this other address. If you will please remove my old domain from your

Jquery Simple Fadeout

A cute little snippet to show a simple green bar upon a successful edit. <?php if(isset($_GET[‘edit’])){ ?> <div id=’notifyy’> Edited Successfully </div>     <script type=”text/javascript”>     $( ‘#notifyy’ ).show(function(){     $(this).fadeOut(5000);     });     </script> <?php } ?> The CSS: #notifyy{width:100%;background:#2f5001;padding:4px 15px;color:#fff;} Always,

african american man using computer

How to Reset the SMC on Your Mac: A Step-by-Step Guide

How to Reset the SMC on Your Mac: A Step-by-Step Guide If your Mac is acting up—battery issues, overheating, or problems with sleep mode—it may be time to reset the System Management Controller (SMC). The SMC controls essential hardware functions like power management, battery charging, and thermal regulation.

Five Frequent SEO Mistakes and How to Fix Them.

Five Frequent SEO Mistakes and How to Fix Them. A few simple missteps can derail all the hours of toil, not to mention money, put into your SEO efforts. Here are five common SEO mistakes and how to rectify them.  Keywords Should Match Content. Google wants its customers