Small introduction to TinySlider

TinySlider is a lightweight javascript component – 1.5KB – that can be easily integrated in any website. It is easy to alter it visually through CSS which makes it a perfect component for designers. Another point that needs to be reminded is that the component is cross-browser compatible – yes, IE6 too. You can take a look at the demo from www.leigeber.com.

Download TinySlider Script

To use it you will have to download it, upload it onto your server and link it to your slider page(both the script and CSS styling). To use it with WordPress … follow the next 5 steps.

Step 1 – Analyzing TinySlider

I’ve removed the previous and next button for the posts because you can choose to put them or not, since you have the bullet navigation on top of the slider. Below is the structure of the slider that we will follow in order to create a content slider for WordPress using TinySlider.

1
2
3
4
5
6
7
8
9
10
11
12
13

<div id="slider">
	<ul>
	<li><img src="photos/sea-turtle.jpg" width="500" height="300" alt="" /></li>
	<li><img src="photos/coral-reef.jpg" width="500" height="300" alt="" /></li>
	<li><img src="photos/blue-fish.jpg" width="500" height="300" alt="" /></li>
	</ul>
</div>
<ul id="navigation">
	<li onclick="slideshow.pos(0)">1</li>
	<li onclick="slideshow.pos(1)">2</li>
	<li onclick="slideshow.pos(2)">3</li>
	<li onclick="slideshow.pos(3)">4</li>
</ul>

So, after seeing this code, what we want to do is get an image from a blog post and place a link towards that post. To do that we will use a function in order retrieve the first image from the post.

Step 2 – The Thumb Function

This is a very common function that you will find it on numerous sites. All you have to do is – take the code and place it inside the functions.php file, in your WordPress theme folder. If you don’t have such a file, you can create a new one with this name – functions.php.

1
2
3
4
5
6
7
8
9
10
11
12

<?php if ( function_exists('register_sidebar') )
register_sidebar();
 
function the_thumb($size = "medium", $add = "") {
global $wpdb, $post;
$thumb = $wpdb->get_row("SELECT ID, post_title FROM {$wpdb->posts} WHERE post_parent = {$post->ID} AND post_mime_type LIKE 'image%' ORDER BY menu_order");
if(!empty($thumb)) {
$image = image_downsize($thumb->ID, $size);
print "<img src='{$image[0]}' alt='{$thumb->post_title}' {$add} />";
}
}
?>

What this function does when it is called, it gets the first image from your post and you can mention the size of the image (thumb, medium, large). You can set your values in Settings->Media – in WordPress administration.

Step 3 – Retreive Posts’ Images

Let’s assume that we already have some posts inside a category which is entitled – featured. We will use WP_Query in order to get the images from posts within featured category.

1
2
3
4
5
6
7
8
9

<div id="slider">
<ul>
	<?php $sliders = new WP_Query(); 
	$sliders->query('category_name=featured');
	while ($sliders->have_posts()) : $sliders->the_post(); ?>
	<li><?php the_thumb('large');?></li>
	<?php endwhile; ?>
</ul>
</div>

First we create a loop to go through featured category. Then we display the image using the_thumb function. So, for now, we created a list with large images from all featured posts.

Step 4 – Creating Navigation Bullets

In order to create the navigation, we will need to retrieve the link for each post. And we can do that by creating a loop, but we won’t. We will reuse the first one with the help of rewind_posts().

1
2
3
4
5
6

<ul id="navigation">
<?php rewind_posts(); $i = 0;while ($sliders->have_posts()) : $sliders->the_post(); ?>
	<li onclick="slideshow.pos(<?php echo $i; ?>)">
	<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php $i +=1; endwhile; ?>
</ul>

You can see that our slider will display the name of the post as navigation items. You can change that and for instance leave it empty, and then stylize the bullets as you wish. You can also print i variable and you will have numbers as navigation. The possibilities are endless and it is up to you how the slider will look in the end.

Step 5 – Initialize the Slider

Place this script in the footer of your site – before closing the body tag in order to make this slider work. Also, as stated in the start of the tutorial, link to the script file and CSS stylesheet in the head of your document.

1
2
3
4
5
6
7
8
9

var slideshow=new TINY.slider.slide('slideshow',{
	id:'slider', // ID of the parent slideshow div
	auto:3, // Seconds to auto-advance, defaults to disabled
	resume:true, // Resume auto after interrupted, defaults to false
	vertical:false, // Direction, defaults to false
	navid:'pagination', // Optional ID of direct navigation UL
	activeclass:'current', // Class to set on the current LI
	position:0 // Initial slide position, defaulting to index 0
});

Conclusion

Assemble all these lines, add the styling you want and good luck. Please let me know if for some reason the tutorial is hard to follow or you have other question to ask. Don’t forget to check first Michael Leigeber’s site for more info about TinySlider component.

Cheers!

Tutorial Requirements

1. Launching Pencil

In order to start Pencil Addon, you must start first Mozilla Firefox. After that, you must select from the Menu Bar the Tools section and then find and press Pencil Sketching

2. Setup Page

After you launch Pencil, you will see a blank page with certain width and height that are relative to your screen size. To set your page the way you want you can Right Click on the Untitled Page tab and select Properties. Here you can customize the width, height and title of the page.

3. Analyzing Twitter Layout

Twitter is built onto a 2 columns layout. In the top side of the layout (header) it has a logo and a navigation menu. In the left side it has a big input text element and the tweets, while in the right side (sidebar) it has the mini-profile and different other links.

Our task is to create a simple wireframe with Pencil that will look like Twitter from the structure perspective. So basically we will use only block elements that will represent each of the user interface components. That is the main idea behind wireframing – creating an outline that will be used as guideline in the design process.

4. Creating the 2 Columns

In order to start our wireframe, we will need to drag a rectangle element from the left sidebar onto the canvas (page). In the standard form it has a blue fill color. We will have to Right Click on the rectangle and change the Properties to a white rectangle with a 1 pixel solid black border. Then, we will set its size for the left column and then we will copy&paste it in order to create a smaller column for the sidebar.

After creating these 2 rectangles your canvas should look like this:

5. Creating the Header

Now, we will have to create 2 new elements that will serve as the header: logo and navigation. As I’ve told you, we will use just block elements so the logo will be represented by a rectangle as well. So in this step we will make the same action as in the previous step: copy rectangle elements and shape them and place them properly as logo and navigation.

In addition we will add some text inside the rectangles that will tell us what element is there. For the logo we will use … logo and for the navigation we will actually write similar menu elements as Twitter.

To insert text inside the rectangles we will have to Double Click on them. After we enter the text that we want, we can Right Click on the element and select Properties. From here we can go to the Text tab and change the way the text is displayed – color, font, size.

These elements are common in most pages on Twitter – profile page, reply page, direct message page. So in order to boost our productivity, we will create new pages that will have the background our current page. In this way on the other pages we will add only the particular elements.

6. Creating an Finalizing the Main Page

From the top right side of the canvas we can press New Page button in order to create a new page.

The only difference compared to the first page screen is that now we will set the background as our Twitter page. Now all we have to do is to add the rest of the elements to the stage. Keep in mind that the elements from the background can only be modified inside the background page.

After adding all the other element from the page using rectangle, text and line elements, here the final wireframe of Twitter created using Firefox Pencil Addon.

Conclusion

Overall, this addon is quite useful and after half an hour inside Pencil you will know most of the functionality. Cheers for the developers behind this project and have fun working with Pencil. Cheers!

The price should not be the deciding factor

The biggest mistake is also the most common mistake. A lot of people stare themselves blind on the pricing without thinking about what they are getting for their money. Sure, it is possible to find cheap hosting that is qualitative and stable but the price should not be the deciding factor. What should matter the most is what features that are included in the plan, often you will only have to add a couple of dollars to get that extra oomph that you so desperately need.

Are you able to grow with your provider?

One obvious reason for having a website is letting it grow bigger and increase in number of visitors. In the start-up period you will have very limited needs, and hence a regular shared hosting account might be sufficient but as the site grows so will your hosting plan have to do. Make sure that it is easy to upgrade your hosting account. So, if you have big plans for the site – avoid web hosts who specialize in only plan as they can be a hassle when you need to do an upgrade.

Check their reputation

A very easy way to make sure that you pick a great web host is in checking up their reputation beforehand. Browse web hosting forums to see what people think about their web hosts or ask your friends what they think about their hosting plans. Do not believe all the testimonials that you see on the web host’s own page as it is most likely phony testimonials. A good idea is visiting the Better Business Bureau website to get info on anything from the management to the customer complaint history.

Conclusion

It is quite vital to know the reputation, features and diversity in plans before checking the price. So, here you have 3 things to look for before purchasing a hosting plan. Keep in mind that these are not the only things that are important, and we will try to cover the rest in other posts. Cheers!

Shared Hosting – Cheap and Qualitative

The most popular form of web hosting on the market today is shared hosting. The hosting is affordable and if signing up with any of the well-known and trustworthy web hosts you can be sure that it will be of great quality as well. As mentioned is shared hosting very affordable, only setting you back a few dollars per month, and the reason for its low fees is simply that you will share the server with a number of other websites. A couple of things that are good to look up in advance is if you will get enough, disk space, bandwidth, if a user-friendly control panel is included and if their uptime is satisfying. This type of hosting is good for all of you with a private website or if you are running a small online website.

Dedicated Servers – La crème de la crème

If you are looking for hosting that is suitable for a major online website you will have found your match in dedicated servers, aka dedicated web hosting. As its name gives away, you will have a server that is working solely for you and your website. This equals quality, security and a stable website. As the server is stored within the premises of the web host you will not have to bother with any maintenance or giving up any physical space for storing it. Remember that dedicated hosting comes in two different forms: managed and unmanaged. Unmanaged dedicated hosting is the pick for you with a lot of techy experience and want to be in total control; otherwise pick managed dedicated web hosting.

VPS Hosting – Something In-Between

Many people are looking for a web hosting alternative that lays somewhere in-between shared hosting and dedicated hosting. A majority of these people end with a virtual private server, VPS hosting. This type of hosting is great in the way that it splits one single server into multiple virtual servers, making it stronger and more customizable than shared hosting. Many medium-sized businesses use this form of web hosting for their websites.

Cloud Computing – Adaptive Hosting

This is perhaps the trendiest alternative in the web hosting industry at the moment. What really makes cloud computing stand out is in the way that it is elastic. Your website will be backed up by as much hosting as it requires. As a consumer you only have to pay for the amount of web hosting that you have been using, meaning that your bills be higher some months and lower others. It is very easy to use as well; the service is entirely managed by the provider.

Green Hosting – Eco-Friendly

If you want to do something for the environment you should start looking for green hosting for your website. What web hosts offering green hosting do is either purchasing carbon offsets or uses eco-friendly and energy efficient servers. Green hosting is almost exclusively shared hosting which means that it is good for individuals as well as small businesses.

For additional information, drop a comment, a question and we will be happy to help you. Or, you can check the Web Hosting Search site for in-depth information and resources. Cheers!

…The Problem

So what seems to be the problem? The problem is that while these plugins are used in the site, they are useless in the front page. This means that every new user will see a slow webpage at first sight because of these plugins. The way to deal with this problem is to tell the plugins to load their stuff in the footer. In this way, the user will see the entire front page faster, while at the end of the loading time plugins’ stuff will get loaded.

The Solution

For now, the solution is to manually edit your plugins and change their position of rendering from header to footer. This is a tricky move because you must edit the plugins’ files. Another thing that you must consider is that you won’t find the same structure inside the plugins.

Steps to Solve WordPress’ Speed Problem:

1. Navigate into the Plugins directory ( http://YourSite.com/wp-content/plugins/)
2. Edit the plugin’s .PHP file
3. Search where the fuction add_action is called
4. Change wp_head with wp_footer
5. Save, empty browser cache and reload broser.
7. View source and check

and The Result

After this operation, my footer contains 2 CSS (I coudn’t make the third CSS work ) files that were moved from the header and also 2 Javascript files. Also remember that the rest of the page below a Javascript link is blocked until the js file is loaded. So, as a conclusion, you can achieve better performance by putting the CSS on in the footer instead of the header for the secondary WordPress elements (NOT the main style).

Cheers!

1. WordPress

WordPress is a state-of-the-art publishing platform with a focus on aesthetics, web standards, and usability. WordPress is both free and priceless at the same time. – from WordPress.org

There are 2 versions available for users:
- WordPress.org (self hosted version) – You can download the package and install it on your hosting account
- WordPress.com (no hosting needed) – You can create an account on WordPress.com

2. WordPress Cheat Sheets

Cheat Sheets are those documents that can help you when you want to save time. These files have all the basic information you need. And there are several good cheat sheets for WordPress including my own.

1. My WordPress Cheat Sheet
2. WPCandy Cheat Sheet
3. DBSWebsite Cheat Sheet
4. WPToy Cheat Sheet
5. Bueltge.de Cheat Sheet

3. Installing WordPress

Although WordPress is quite easy to install, there are many people that are less technical and that could use some tutorials on this topic. Here is a list with links to help you install your WordPress instance.

6. WordPress.org Codex – Installing WordPress
7. Installing WordPress with FTP
8. HowToInstallWordpress.com
9. Sitground WordPress Install
10. How to install WordPress 2.8

4. WordPress Tutorials

In this section I will list some of the most important tutorials from the blogosphere regarding WordPress. Just watch some of these tutorials and they will boost your WordPress skills. We will start with some very comprehensive tutorials on how to create a WordPress Theme.

4.1 Theme Tutorials

Here you can find basic and some advanced instructions of how to create a WordPress theme. It will take you some time before you know all the steps, but at the end you will see that the process has an intuitive flow.
11. So you want to create WordPress themes huh?
12. Designing for WordPress: Complete Series & Downloads
13. New WP Video Series
14. How to Create a WordPress Theme from Scratch
15. Creating a WordPress Template

4.2 Theme’s Menu Tutorials

Menus can be tricky depending on your needs. Here you have several tutorials about different types of menus. Dropdowns or Rounded Corner Menus are available in this next list, so make sure to check it.
16. Rounded Corner Tab Menu Using CSS
17. Making a Categories Drop-Down Menu
18. WordPress: “Magazine style” Horizontal dropdown menu
19. WordPress Menu Tricks
20. Creating Two-Tiered Conditional Navigation in WordPress

4.3 Comments Tutorials

The comments module is a tricky one. You will have to watch several tutorials in order to be familiar with the standard and threaded comments.
21. Separating Trackbacks from Comments
22. Unraveling the Secrets of WordPress’ Comments.php File
23. How to Highlight Author Comments in WordPress
24. Rearrange WordPress Comments (Latest On Top)
25. WordPress 2.7 Comments Enhancements

4.4 Advanced Tutorials

Here are some advanced WordPress tutorials like: Control Panel for a custom theme, How to Build a Newsletter, Thumbnail Selection. For other advanced tutorial you should search the web because there are tons of tutorials dedicated to WordPress.
26. How to make a control panel for your WordPress theme
27. Build a ‘WordBurner’ Email Newsletter Manager using WordPress and FeedBurner
28. Build a Featured Posts Section for WordPress
29. Integrate a slideshow in your wordpress theme
30. Advanced WordPress Thumbnail Selection

4.5 Plugins Tutorials

At some point in your WordPress designer/developer timeline, the need for a plugin will come. Here are some introductory tutorials on how to create a plugin.
31. How to Make a Social Bookmarking WordPress Plugin – Step by Step
32. Writing a Plugin
33. How to Write a WordPress Plugin
34. How to Create a WordPress Plugin from Scratch
35. How to Create a Simple WordPress Plugin

5. WordPress Tips and Hacks

36. Hodgepodge of WordPress Tricks
37. WordPress Theme Hacks
38. 40+ Most Wanted WordPress Tricks and Hacks
39. 20+ WordPress Recipes (Codes)
40. WpHacks

6. WordPress Free Themes

41. Gallery

42. Facebook Theme

43. WP Premium

44. Magazeen

45. Modern Clix

46. Irresistible

7. Great WordPress Books

The next WordPress Book come from very talented designers and developers. Make sure to check some of these book for advanced topics and information.

47. WordPress for Business Bloggers – by Paul Thewlis
48. WordPress Plugin Development – by Vladimir Prelovac
49. How To Be a Rockstar WordPress Designer – Collis Ta’eed & Harley Alexander
50. WordPress 2.7 Cookbook – Jean-Baptiste Jung

8. Awesome WordPress Developers

51. Alex King
52. Chris Wallace
53. Elliot Jay Stocks
54. Adriaan Pienaar – Adii
55. Matt Mullenweg

9. Automattic – WordPress Products Family

1. Akismet

Akismet, or Automattic Kismet, is a spam filtering service created by Automattic, the corporation which employs most of the main developers of the weblog platform WordPress, and released on October 25, 2005. Akismet attempts to filter link spam from blog comments and spam TrackBack pings.

2. Gravatar

A gravatar is quite simply an image that follows you from site to site appearing beside your name when you do things.

3. IntenseDebate

IntenseDebate is the premier commenting system available on the Internet for blogs and websites. IntenseDebate comments enhances and encourages conversation on your blog or website.

4. PollDaddy

PollDaddy provides polling and survey widgets to over 500,000 users around the world. Launching in October 06, we have gone from strength to strength and have grown to become the number one provider of poll widgets online. Our polls are used on social networks, blogs, corporate websites etc.

5. VideoPress

VideoPress is an upgrade that makes it easy to upload, embed, and share video on your WordPress.com blog or any site around the world, even in full HD.

6. P2

A group blog theme for short update messages, inspired by Twitter. Featuring: Hassle-free posting from the front page. Perfect for group blogging, or as a liveblog theme. Dynamic page updates. Threaded comment display on the front page. In-line editing for posts and comments.

7. BuddyPress

BuddyPress is a suite of WordPress plugins and themes, each adding a distinct new feature. BuddyPress contains all the features you’d expect from WordPress but aims to let members socially interact.

8. bbPress

bbPress is forum software with a twist from the creators of WordPress. bbPress is focused on web standards, ease of use, ease of integration, and speed. We’re keeping things as small and light as possible while still allowing for great add on features through our extensive plugin system.

Conclusion

I know your question: Where are the plugins? The plugins are not listed here because it would’ve made the article impossible to follow. Overall, the basic resources and tutorials from WordPress were covered in this post. Hopefully this will be useful. Cheers!

I want to make it clear from the beginning that a Community News section is a part of your site, where users submit links and you will approve or not the link. In our case, a user will submit a news through a contact form and then you will add the info from the mail into your site. This can be made automatically but this tutorial will not cover that.
Here are the steps needed to create a Community News section for your site.

Step 1 – Create the Category for Links

In order to create this section, we will use the Links module inside WordPress. And the first step is to create a category dedicated to these types of links.

Step 2 – Add the Code Snippet

Now, edit your theme and place the following code where you want the Community News section to be displayed. When you add the snippet bellow make sure to delete the white space generated around “?”.

1
2
3

<ul>
< ? php wp_list_bookmarks('title_li=&limit=10&categorize=0&orderby=id&order=DESC&show_description=1&between=<br />'); ?>
</ul>

title_li – represents the title given to this section (in this case is left empty)
limit – represents the number of news
categorize – display the news’ category
orderby – sort your news by various options
order=DESC – shows the latest news in the top side of the news section
show_description – show the description or not
between – displays a string between the link and the description

* for additional info please check the WordPress.org documentation for wp_list_bookmarks()

Step 3 – Add a Submit Button

In this step all you have to do is add a button that will link to your Submit News page. In that page you will have a contact form that I will not cover in this tutorial.

Step 4 – Add Submitted News to your Community News Section

Now, assuming that you have some submitted news in your email account, you will sort them and add them to your section. In order to enter them, you will log into your WordPress backend and hit the Links button. After that go to Add link, enter the details from a submitted news, select the category you created at the beginning of this tutorial and press Add link. This is all you have to do.

The Plugin Solution

There are several plugins that can add this Community News section for you. The best plugin for that is the one made by Frank Verhoeven – FV Community News. This is a perfect solution for those of you that don’t want to deal to much with the PHP code.

I hope you will benefit from this tutorial. Cheers!

1. Write Quality Posts

The first rule is this: In order to promote it, your post should be valuable for a certain target. So, the first thing is to make sure that you have a potential target and that some users will benefit from the post. This is a crucial thing, because the users that are happy with your content, will help you spread it across the web. You can’t promote posts that are useless and unattractive.

2. Use Catchy Title Posts

The title post is the first point of interaction between the reader and the blog post. So, in order to make the user read your article, your blog posts should: describe the content, use of common words, have an appropriate length. For advanced tips please read the following article: The Importance of Blog Posts Titles

3. Write Effective Posts

These days, the most effective blog posts are lists. Their big advantages are: they are easy to write and they are very important for the readers. That is because a list has diverse information compared to a personal blog post. So, an effective post could be a list, a good review, a new product launch etc. All you have to do is to cover well any of these topics.

4. Create and Distribute Freebies

Freebies are one of the most certain way of promoting a blog. Again, you need to make sure that you offer quality stuff. Things that have a great rate of success are icon packs, cms themes, photos etc. Analyze the market, check for competitors and make the best offer.

5. Use Twitter

Twitter is now the new traffic tool. And who knows to manage and work with this tool will get a lot of coverage and traffic at no cost. For example, Twitter is now the 3rd traffic provider for Techcrunch with a 9.7%. Think about it, around 200.000 unique visitors for Techrunch from tweets.

6. Use Social News Sites

This is very handy since sites like Digg can generate a lot of traffic. Depending on your post, you can submit your it on sites like Mixx, Yahoo! Buzz, Reddit and Digg in order to ger more visitors.

7. Boost Your Blog with Tools

The last thing you will have to do in order to get better stats is to take advantage of the RSS and posts sharing widgets. With the help of ShareThis or AddThis a happy visitor has a greater possibility to share your blog post with a friend. It is not necessary to use these 2 services. You can create your own based on your needs.

Any Suggestions…

I would like to hear from your experience. What is the best approach to spread a blog post? Please share with us. Cheers!

Overview
We will first make a pattern that will draw diagonal lines. After that we will apply a couple of filters and apply the pattern for 2 layers and that’s it.

Step 1 – Create a pattern that will draw diagonal lines

The first step is to create the pattern. We will do that by creating a new 5×5 pixels document with transparent background.
After creating the document, we will select the diagonal pixels and color them in a solid color.

After the diagonal was created and filled, go to the Edit Menu and select Define Pattern

Step 2 – Create the blue noisy texture

Now we will create a new document of 620x240px. I picked this size because of the width of the blog post. You can choose your own size. Then, pick a color and fill the document with that color. In our case it should be a blue color that is common to jeans.

After the color is applied, we have to add some noise to the image to simulate the jeans texture.
For this we will go to Filters » Noise » Add Noise and choose the following settings: Amount-6%, Distribution-uniform and monochromatic.

Step 3 – Add diagonal lines

Now that the texture is set, let’s add the characteristic of the jeans texture – diagonal lines.
Remember that we already have a pattern that creates oblique lines. Let’s apply it and color the lines in white. First create a new layer to apply the pattern, then – press Shift+F5 and a new window will appear.
Choose Pattern from the Fill Window, choose our pattern, press OK and we have a new layer with diagonal lines.

Now we will have to color the lines in white. You can do that in several ways:

Ctrl+Click – on the layer with oblique lines
Shift+F5 and select to fill with White color.

or

Click on the layer and select Lock Transparent Pixel from the Layers Window
Choose the white color as the foreground color
Alt+Backspace

After this task is done, reduce the opacity of the lines to 20%

It looks quite OK, but we still have to add a little detail for a realistic texture.
Since we have the white lines, now all we need are black lines. We will use them to create a 3d effect for the texture. So, the next step is to duplicate the lines layer (Ctrl+J when the lines layer is selected) and press Ctrl+I in order to invert the white color to black. Now we have to raise the opacity back to 100% and move the layer 1 pixel to the right.

The Result

Of course you can add additional levels of details, like more noise, some luminosity. This is just the base for a denim texture. The rest is up to you. I hope you like the technique and good luck on your designs.
Cheers!

PROS
- 256 number of colors
- uses lossless compression
- suitable for logos, flat areas of color with well defined regions
- suitable for icons with few colors
- support for transparency
- suitable for small animations

CONS
- the oldest format for web – 1989
- in most cases it has a bigger file size than PNG

PNG: Portable Network Graphics

PROS
- 24bit color / 8bit color(256 colors)
- uses lossless compression
- suitable for flat areas of colors, logos, transparent or semitransparent images
- suitable for icons
- in most cases PNG has a smaller file size than GIF
- it has alpha channel transparency which is more advance than GIF’s transparency
- approved as standard in 1996
- proposed as replacement of GIF by World Wide Web Consortium

CONS
- it is wise to avoid using PNG with big photos and images with details because of the big generated file size
- in different situations it has bigger file sizes than JPG

JPG: Joint Photographic Experts Group

PROS
- 24bit color
- suitable for images, high details & quality pictures
- uses lossy compression
- it is the most used graphic file format
- approved as standard in 1994
- used in design and photography industry – it is likely to see nature photos in JPG file format
- it is good when you are willing to drop quality from a picture for the sake of file size

CONS
- it does not support transparency
- it is not suitable for logos and icons because it does not have transparency and it can generate a bigger file size for small resolution images.