360° Coverage : Image Performance

2 Updates
Image Performance

Image Performance

Jan 22 2014, 5:47am CST | by

By Lara Swanson Images make up the majority of most sites’ page weight. Thanks to their size and the number of image requests made by an average site, optimizing images is arguably the easiest...

Filed under: news

 
 
 

39 weeks ago

Image Performance

Jan 22 2014, 5:47am CST | by

By Lara Swanson

Images make up the majority of most sites’ page weight. Thanks to their size and the number of image requests made by an average site, optimizing images is arguably the easiest big win when it comes to improving your site’s page load time.

Let’s start by looking at the various image types available, and then work through the various options you have for optimizing them.

Image File Types

You have a range of file types to choose from when creating images for your site. When generating an image, ask yourself:

* How compressed can this image be?
* How many colors are needed?
* Do I need transparency?/>/>

When you need transparency in your image, PNG is your best choice. GIFs also support transparency, but they tend to be much heavier than PNGs. PNG-8 contains a maximum of 256 colors within the image, and generally result in a smaller file size. If you have a small number of colors in your image, PNG-8 will likely be your best option of all image file types, thanks to its small size. While Photoshop supports exporting PNG-8 with binary transparency, it also supports creating PNG-24 images with partial transparency as well as millions of colors. This naturally results in a larger file size.

Use JPEG for photos and other images with tons of colors. JPEGs do not support transparency. JPEG is a lossy compressed file format, unlike PNGs, which are lossless. While you can use PNGs for photos, they will often be five to ten times larger in file size than JPEGs because they are lossless. Since you're aiming for the smallest file size to decrease page load time, and web images typically have more than 256 colors, it's no surprise that the majority of the images analyzed by HTTP Archive are JPEGs.

Optimizing Image Request Size

If you use Photoshop, test out a few different qualities and file types in the Save for Web workflow. You’re aiming for a happy medium of acceptable quality and small file size. Most people find that for JPEGs, 80-90% quality works well, but it’s important to play with the file size and see what level of compression is noticeable. Look for artifacts, inaccurate contrast between elements, and blurry details and text.

After you’ve exported the image, run it through a tool like ImageOptim, which finds the best compression technique for a variety of file types. There’s also SmushIt, which is an online lossless image optimizer. These tools can save you a ton of additional file size by finding ways to reduce the image size without visibly reducing the quality of the image.

Optimizing the Number of Image Requests

In addition to decreasing your images’ file sizes, it’s also important to decrease the number of image requests on the page to improve page load time. One way to do this is to combine images into sprites. Your page weight might increase slightly because you’ll have one large image file and additional CSS to position the site elements, but it’s likely that combining images into a sprite will be a huge win for page speed.

Another way to decrease image requests is to replace them with CSS3 gradients. CSS3 gradients (aka visuals):

* Can handle transparency
* Can be overlaid on a background color
* Eliminate an image request
* Are super easy to re-edit/>/>/>

CSS3 can be a great, performant replacement for images. Don’t worry about the extra page weight from the vendor-prefixes in CSS3 syntax; if you arent’ already, you should be using GZIP on your site, which will take care of optimizing this code. Even though you will be loading more CSS, it’ll still be a faster-loading option than an image request.

You can do some pretty amazing things with CSS3 gradients because of the control over where colors begin and end. That being said, be careful how your CSS affects repaint times, as there can be a cost to using a lot of CSS3. A repaint is an expensive operation performance-wise and can make your page look sluggish. If you find that your user interface does become sluggish, especially upon scrolling, you may have a CSS3 or JavaScript repaint issue and will want to diagnose what’s causing it using tools from JankFree.org.

Optimizing images is likely the biggest win for performance on your site. As you take a look at the images on your site, ask yourself:/>/>

* Can I save any file size by choosing a different image format?
* Have all of my images been run through a lossless compression tool?
* Can any of my image requests be replaced with gradients or sprites?
* Is there any UI slugishness that could be due to repaint times?/>/>/>

In the next post, we’ll cover optimizations you can make to the HTML and CSS of your site such as creating design patterns that can be repurposed, identifying the best naming patterns for your elements, and caching assets correctly.

Additional Resources

This post originally appeared on O’Reilly Programming (“Image Performance“). It’s republished with permission.

Source: Forbes Business

 
Update
2

8 weeks ago

Khazanah throws MAS RM6b lifeline

Aug 29 2014 5:01pm CDT | Source: Business Times Singapore

August 30, 2014 1:15 AMKHAZANAH Nasional will inject RM6 billion (SS$2.4 billion) over three years to resuscitate loss-making Malaysia Airlines (MAS) under a recovery plan that includes even an Act of Parliament. Other key moves are migrating its operations, assets and liabilities to a new company (NewCo) and slashing the workforce of 2 ...
Source: Business Times Singapore   Full article at: Business Times Singapore
 

 
Update
1

8 weeks ago

MAS posts loss of RM307m for Q2

Aug 28 2014 5:00pm CDT | Source: Business Times Singapore

August 29, 2014 1:13 AMMALAYSIA Airlines (MAS) registered a loss of RM307 million (S$122 million) for the second quarter to end-June, but warned of worse to come in the second half when the "full financial impact of the double tragedies of MH370 and MH17" hits home ...
Source: Business Times Singapore   Full article at: Business Times Singapore
 

 

Don't miss ...

 

<a href="/latest_stories/all/all/30" rel="author">Forbes</a>
Forbes is among the most trusted resources for the world's business and investment leaders, providing them the uncompromising commentary, concise analysis, relevant tools and real-time reporting they need to succeed at work, profit from investing and have fun with the rewards of winning.

 

blog comments powered by Disqus

Latest stories

Slovakia to provide further financial help in fighting Ebola
Bratislava, Oct 26 (IANS) Slovakia planned to provide some 90,000 euros ($114,000) to countries affected by Ebola to help with the construction of field hospitals, foreign ministry said Saturday.
 
 
Mauritania closes border with Mali after Ebola death
Nouakchott, Oct 26 (IANS) Mauritania has closed its border with Mali after an Ebola death was confirmed in the border area this week, a health official said Saturday.
 
 
Number of Ebola cases crosses 10,000: WHO
Geneva, Oct 25 (IANS/EFE) The World Health Organisation (WHO) confirmed Saturday that the number of Ebola cases has risen to more than 10,000 in the eight affected countries, two of which, Nigeria and Senegal, had recently been declared free of the virus.
 
 
India-born Sundar Pichai is Google's new product chief
Washington, Oct 25 (IANS) In a major restructuring of Google management, India-born Sundar Pichai, who is already in-charge of Android, Chrome and Google Apps, has been made the chief of core Google products, according to a technology magazine.
 
 
 

Latest from the Network

Second MERS case reported in Qatar
Doha, Oct 23 (IANS) A 43-year-old man in Qatar has tested positive for Middle East Respiratory Syndrome (MERS) in the second confirmed case of the deadly virus in 10 days, media reported Thursday. The patient had...
Read more on Business Balla
 
Two people die in Pakistan bomb blast
Islamabad, Oct 23 (IANS) At least two people were killed and 12 others injured in an explosion that took place in Pakistan's Balochistan province Thursday, media reported. The bomb was planted on a motorcycle, Dawn...
Read more on Politics Balla
 
Trott extends contract with Warwickshire till 2017
London, Oct 23 (IANS) England batsman Jonathan Trott, whose mental issues led to his abrupt departure from last winter's Ashes tour, has confirmed his successful comeback to competitive cricket by signing a new three-...
Read more on Sport Balla
 
Srikanth, Kashyap big movers in BWF rankings
Kuala Lumpur, Oct 23 (IANS) Indian men shuttlers Kidambi Srikanth and Parupalli Kashyap jumped seven places each in the latest Badminton World Federation (BWF) rankings released Thursday while Olympic bronze medallist...
Read more on Sport Balla
 
Alvin Stardust dead
London, Oct 23 (IANS) English singer Alvin Stardust died after a short illness. He was 72. Stardust's manager confirmed the news about his demise Thursday, reports mirror.co.uk. He was recently diagnosed with...
Read more on Celebrity Balla
 
Indian man reunited with family after 40 years
Dubai, Oct 23 (IANS) An Indian man, who had disappeared from his hometown in Kerala nearly 40 years ago, has been found by his family at a hospital in Dubai in the UAE, a newspaper report said. Now in his 60s, Abdulla...
Read more on Politics Balla
 
Srikanth, Kashyap, Saina rise in world rankings
Kala Lumpur, Oct 23 (IANS) Indian men shuttlers Kidambi Srikanth and Parupalli Kashyap jumped seven places each in the latest released Badminton World Federation (BWF) rankings Thursday while Olympic bronze medallist...
Read more on Sport Balla
 
Flintoff signs for Big Bash side Brisbane Heat
Brisbane, Oct 23 (IANS) Former England captain and all-rounder Andrew Flintoff, who retired from international cricket in 2009, Wednesday confirmed that he will play for Brisbane Heat in the Big Bash League (BBL) this...
Read more on Sport Balla
 
OPEC daily basket price falls again
Vienna, Oct 23 (IANS/WAM) The basket of 12 crude oils of the Organization of Petroleum Exporting Countries (OPEC) closed at $81.94 a barrel Wednesday compared to $82.09 Tuesday, the OPEC Secretariat said. The new OPEC...
Read more on Business Balla
 
Lopez to sign multi-million dollar deal?
Los Angeles, Oct 23 (IANS) Singer-actress Jennifer Lopez is reportedly in the final stages of securing a multi-million dollar deal to perform in Las Vegas. The 45-year-old is being offered $350,000 per show at The...
Read more on Celebrity Balla