×

Screen Shot 2013-08-09 at 3.21.10 PM

During our last Atlanta Web Performance Meet-up, Billy Hoffman of Zoompf 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 that were covered:

– Techniques optimizing GIF, PNG, 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:

“HTTP Compression is not the king”

– js, css, html = 332 KB
– Only 21% of total content size
– Reducing 21% of web content by 66% is not great

Images

Reduce image size by 25% results in more total savings than text optimizations.

Two Types of Optimizations → Lossy and Lossless
Lossless = picture perfect optimizations
Lossy = Actually changing the image

→ Pings 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.
  • 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

Mobile Banking a Top Priority for Financials

As mobile devices continue to play a more prominent role in our 21st century society, their usefulness has spread beyond the casual activities of technological enthusiasts. According to research conducted by FUNDtech, a rapidly growing number of ba...

Read More

The Perception Gap for Poor Web Performance

E-commerce is a growing source of revenue for many companies and businesses, as it continues to capture market-share from brick-and-mortar stores over recent years. However, many businesses are not prepared for this growth of online business becau...

Read More

Measuring Cross-Browser Performance

In recent years, client-side browsers have been more involved with processing code before it reaches the user's desktop, shifting away from a reliance on servers handling the bulk of this burden. Websites and applications now rely more on a user's br...

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