Showing posts with label optimization. Show all posts
Showing posts with label optimization. Show all posts
Thursday, October 8, 2009

4 online image optimization tools

在如今的Web设计中,图片的应用是必不可少的,为了更好地设计网站效果,大体积的图片被越来越多地应用到Web设计中来,所以,更好地优化图片文件,减少图片文件的体积就变的非常重要,这里为大家介绍的几款图片压缩工具,都是在线应用,无需在本地安装,你要做的就是记住网址就够了。
1. Smush.it

Smush.it被称之为图像“压榨机”,是雅虎的Yahoo Exceptional Performance Team开发出的一个网络应用,旨在帮助网站优化图片,提高站点速度。是非常流行的无损压缩工具。
官方网站http://www.smushit.com/
2. PunyPNG

punypng是一个免费的图片压缩工具,更适合设计师和前端开发人员,它可以大大的减小图像文件的大小( 支持JPG, GIF ,8/24 bit PNGs),将其转换成高压缩的图像。如果你的网站有大量的图片,使用它可以大大减少网页加载的时间。
官方网站http://gracepointafterfive.com/punypng
3. SiteReportCard

同样是一款优秀的图片在线压缩工具,支持URL网络图片和本地上传图片。支持文件格式有GIF、JPG、PNG。
官方网站http://sitereportcard.com/imagereducer.php

4. Dynamic Drive

dynamicDrive也是一个免费的在线图片优化压缩工具网站,支持GIF、JPG、PNG。等格式的图片。除了优化的功能,也提供简单的格式转换,上传图片的大小限制300K之内。
Wednesday, June 3, 2009

SEO Tips: Effective HEADING tags H1 H2 H3

Similar to how newspapers and magazines use headings and sub-headings to help readers, websites can use special tags in their HTML. These tags not only help human readers read the content, they also help search engine spiders better understand the content on a page and what is most important. It is generally a good idea to use heading tags to help signal to the search engines, what the web page is about. If you are concerned about SEO, then you will want your headings to be as descriptive… within reason.

Search engines such as Google pay special attention to your page’s tag and how much it relates to your content - remember SEO rule number one: if you don’t write it, Google can’t find it! <h1> <h2> <h3> they're held in high regard for SE.

I run through www.stuff.co.nz with website.grader.com, the report tells me all the second level headers H2 and third level headers H3 found by search engines. Obviously, some of the titles within H2 H3 are not the related content which we want to provide to readers, some of the headlines we want to provide to readers are not found by search engine. see the example below:




From the examples we can see, the content in red boxes should be stripped from heading tags, the titles in yellow boxes should be wrapped by heading tags.

I did the same task to www.nytimes.com/, they are doing extremely well.
Wednesday, March 25, 2009

Minimize HTTP Requests by CSS Sprites


Problem:



The new launched Stuff.co.nz is facing a loading speed issue. Currently has around 190 HTTP requests on pages, 126 image http requests on homepage, 78 CSS background images.I've done some research on optimization, 80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages.


How to improve?


According to first rule of 14 Rules for Faster-Loading Web Sites, Minimize HTTP Requests
http://stevesouders.com/examples/rules.php
http://developer.yahoo.com/performance/rules.html#num_http


How to optimize?


CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment.
CSS Sprites Generator http://www.csssprites.com/


Example


Little icons on one image file Examples:
Google http://www.google.com/images/nav_logo3.png

Yahoo! http://l.yimg.com/a/i/ww/sp/trough_2.0_062308.gif

Delicious http://static.delicious.com/img/del_sprite_smallIcons.gif
Tuesday, March 24, 2009

Image Optimization With Smush It

As many people have complaint about loading speed of new stuff.co.nz, I am doing some research on website optimization. Reducing image size is one of common ways.  There are many good image editing tools that allow us to get the best visual result for a certain file size but "under the hood" a lot more optimization can be done.

Smushit.com is a service that goes beyond the limitations of Photoshop, Fireworks & Co. It uses image format specific non-lossy image optimization tools to squeeze the last bytes out of your images - without changing their look or visual quality. You'll get a report of how many bytes you can save by optimizing your images and all the changed images as a single zip for download.


Yahoo exceptional performance team have built a image optimisation tool. Its amazingly easy to run.
  1. Install the firefox plugin and press on the little face on the bottom of the browser.
  2. Smushit will open a new tab and run the optimisation  process on the fly.
  3. Download the optimised images in a zip file!
After run the tool on stuff.co.nz homepage, 69.34k can be saved.see screenshot below: 
smush it Image Optimization
Now there’s no excuse for having bloated images. Every web developer should have this plugin installed !