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
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

Budding Biologist has a new website

A cute website for a really neat childrens’ book series by budding biologist. Their new website is responsive, meaning it is mobile ready and will display correctly across all devices and all browsers. Integrated web store and using the latest in HTML 5 and CSS3 media queries. Cloud

To Gimp or Not To Gimp

In the world of photo editing, adobe photoshop is king. They really do have an amazing product. It’s sleek, works great, and is very robust sporting dozens and dozens of functions and endless possibilities for the graphic artist.  Photoshop is also very, very expensive. The entire Adobe creative

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

Javascript called by PHP

Interesting little snippet. What is going on here? Livewire gives you the low down.    if($num_rowvs == 0){ echo ‘<script>// <![CDATA[ alert(“This is an alert message. I’m alerting you that you are totally awesome!”); // ]]></script>’; }   First, we’re creating a simple if statement in PHP.  Not entirely

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.