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

WordPress Email Issues

Every now and again we run into issues with WordPress where the email functionality has stopped working. This is usually the result of corrupted core files and/or plugin conflicts. Easy enough to fix: disable plugins or upload a fresh copy of the software and you’re good to go.

Domain names other than .com a good idea?

Top Level Domains (TLDs), which are suffixes, are the final part of URLs. Although.com is well-known, there are more than 1,000 TLD choices available; however, not all of them are open to the general public. Prior to TLDs, IP addresses were used to visit websites, however this proved

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,

reducing cumulative layout shift (CLS)

Reducing Cumulative Layout Shift (CLS)

NEED HELP REDUCING CLS? Enter Your Website Below For Personal Recommendations:   Fill out my online form. In the fast-evolving landscape of web design, one metric that has gained significant attention among developers and SEO experts alike is the Cumulative Layout Shift (CLS). Since it directly affects user

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