×

Screen Shot 2013-08-09 at 3.21.10 PM

During our last Atlanta Web Performance Meetup, Billy Hoffman discussed ways to optimize images to reduce their size, increase download and rendering performance, and make your website fast! Here is a quick recap:

Topics Covered

  • Techniques for optimizing GIF, PNG, and JPG images
  • Free, open source tools to optimize images
  • Progressive JPEGs and rendering
  • WebP, and how it could change things

The Issue: Images are getting heavier, which is hurting performance. The web is obese. This is no surprise. Bulky images are the biggest problem. Sadly, pages are getting slower.

The Answer: We need to get smarter about how we use images online.

The easiest form of optimization is reducing response size. There are some obvious things you should be doing to optimize images. Some include using the correct format and making sure that they are progressive.

Key Takeaways

Images

Reducing image size by 25% can result in more total savings than text optimizations.

There are two types of optimizations, including lossy and lossless. Lossless image optimizations are picture perfect optimizations. Whereas lossy optimization actually changes the image.

→ PNGs are most of the time always slower than gifs (gif uses an old compression algorithm).

 PNG
-Deflate Usage
-Extra Chunks

JPEG
-Quantization tables
-Progressive reorders data

How we handle images on the web is a massive, complex issue, but our main challenges can be pared down to a couple of main points:

We need to get smarter about how we handle images on the web, since they will only continue to get heavier and we need to embrace existing formats and best practices that will make our images slimmer.

For more useful tips and best practices on this topic and related topics, visit these posts:

The Lowdown On Responsive Imaging
Lose the Wait: HTTP Compression
Chrome’s Data Compression Proxy

Suggested Blog Posts

The Perception Gap for Poor Web Performance

E-commerce revenue continues to grow,as consumers turn away from shopping in brick-and-mortar stores to shopping online.  However, many businesses are not prepared for this growth because they do not fully understand the market and how to invest in...

Read More

Using Browser Trends to Maintain a Better Site

Because of the multifarious nature of web clients today, it’s important to consider the usage statistics when designing, implementing, and managing your site. However, misconceptions often arise when determining what browsers to design for an...

Read More

Finding Causes of Intermittent Errors from Google Webmaster Tools

Google Webmaster Tools is a web service that allows webmasters to view the status of their sites as seen by Google and the Googlebot crawlers. In addition to indexing your site structure and content, the Googlebot crawlers also record data on perform...

Read More

Optimization Options not Always Optimal

Web designers and developers are always looking for ways to speed up their page load times. Yahoo has an excellent article written on the best practices for speeding up your page. How do you know if implementing one of their suggested practices will...

Read More