Home / images
Tampilkan postingan dengan label images. Tampilkan semua postingan
Tampilkan postingan dengan label images. Tampilkan semua postingan

Senin, 14 Maret 2016

HTML Images

Komentar
HTML Images
Images are very powerful tools in web design and help convey the message and style of a business instantly

HTML Images work in a similar way to links in that they require a single element but also only work together with one specific attribute. So with links the element <a> always uses the attribute 'href', with images the element <img> (for image) always uses the attribute 'src' (for source).

The <img> Element

The element <img> tells the computer you placing an image in the web page and the attribute 'src' tells the computer where to find the image. Like with links the image can be an existing online image that you link to or an image saved on your own hosting space. For example,




The code above links to a file called 'html' which is a .gif file (more on file types in a moment) and is save in a subfolder called images. Note the attribute title can also be used with images. Also note how the element does not need a closing tag, this is because there is now content, the image is stand alone.

The image would appear in the browser like this...

The HTML5 logo


There are three main types of image files that you can insert into your web pages, gif, jpeg and png. For a more in depth look at file types, see the section on common graphic design file types.

HTML Image Attributes

You always need to use the attribute 'src', which tells the browser where the image is located but there are a number of other attributes which can be useful when inserting images. Another attribute you should always use is 'alt', this allows you to set a value which describes the image. This value will appear if the user hovers over the image (try the image above) while also helping search engines to correctly index the image. Two other attributes to the 'img' element are width and height, for example,



The above code results in a 64 x 64 pixel sized representation of the original image, as seen below.

The onlinedesignteacher logo

With images it is also recommended that you always use the 'alt' attribute to describe what the image shows. This is valuable for 4 reasons...
  • The alt attribute helps search engines understand the content of the image.
  • The alt description will be displayed as text if the image fails to load.
  • Text readers will read the alt attribute for the blind or visually impaired using your website.
  • When you hover over an image the alt attribute will be displayed.
The example below shows the html code for an image with the alt attribute in use.



The above code will result in the image below and if you hover over it the alt text will display.

The html5 logo

Image Sizes and Resolution

Pixels are the units of measurement used to measure the resolution of screens. (The most common screen resolutions are 1024 x 768 and 1366 x 768 pixels). Unlike centimetres, pixels are relative units of measurement which depend on the resolution of the screen. To a user with a high screen resolution, 25 pixels may correspond to 1 centimetre, while the same 25 pixel in a low screen resolution may correspond to 1.5 centimetres on the screen. If you do not set the width and height, the image will simply be inserted in its actual size. 

However, it is worth keeping in mind that the actual size in kilobytes of the image file will remain the same so it will take the same time to load the image as it did before, even though it appears smaller on the screen. Therefore, ideally you should never decrease the image size by using the width and height attributes but instead, you should resize and optimise your images in an image editing program to make your pages lighter and faster.

That said, it is still a good idea to use the width and height attributes, even if you are not changing them, because the browser will then be able to detect how much space the image will need in the final page layout before the image is fully downloaded. This allows your browser to set up the page nicely in a quicker way. Another article you may be interested in is How to get your images up the Google rankings.

Next Up




Baca selengkapnya

Sabtu, 05 Maret 2016

Top 5 Graphic Design Tips

Komentar

1. Avoid Image Overload...

We are now bombarded with more images and information than ever and our brain simply can't process it all

We are now exposed to more information than ever before through TV, radio, emails, text messages, snap-chats, skype calls, viber etc. There are screens everywhere we look and it is simply impossible for us to process and remember everything we see. But we do remember some things of course.

As a designer, the question is how can you make your designs memorable? The answer is simple...no really it is simple! Complex visuals with multiple images or areas of focus distract the eye from each other and actually prevent people from taking in any message at all. On the flip side, simple images/visuals with a single focal point and a consistent design style can be processed more easily and are therefore more likely to transit their message to the viewer. All the design tips which follow also have simplicity at their core.

So before you start a design project, identify the key requirements and focus on translating the single most important message. For example in a movie poster make sure the viewer walks away remembering the movie's name, if they remember that they can look it up online to find on when it's out, where it's on etc.


2. Grab Attention...

An attention grabbing image
Did I Catch You Looking...?
Made you Look! Good, I was trying to. The first tip was to keep your designs simple and have a single focus so that they will be more easily remembered but that will of course only work if you can get people to look at it ion the first place.

There are actually 7 different image types that are proven to grab attention, make sure your designs main image contains one of them. The first one is obvious (I've used it above) and that's sexy. The others include Funny, Surreal, Iconic, Shocking, Bright (vividly so) and, the hardest to achieve, Original. Read more about Attention Grabbing Techniques.

3. Get Vector Friendly...

A vector image
This image is made up of layers of flat colour tones and vector shapes

Vector images are another great way to keep an image simple, as you can use them to reduce an image down to it's most basic form and yet (if done correctly) it will still be instantly recognisable by the viewer. In fact, a vector image will be more recognisable and memorable than a photo as they are less common and therefore stand out as being original.

Once mastered, the vector tools in Photoshop or Illustrator are also a really quick way to block out a designs structure and form which can help you visualise the final design more easily. In graphic design projects where an image might be reused in a variety of situations like a advertisement which can appear on anything from the side of a bus to pop up on a mobile website then vector images also have an extra advantage as they can scale up and down without losing quality or pixelating.

4. Forget Colour*

A black and white or other high contrast image has greater impact
Black and white images are more powerful due to the contrast 
A lot of designers make the mistake of starting a project by adding colour to their design in the form of a gradient background or by inserting their main feature, often a colour photograph. Although it would seem to make sense to get the main features of a design in place early it can actually slow you down in the long run.

*Working in just black and white at the start of a project allows you to focus on the composition and layout of the design without the distraction of trying to choose and match colours as you go. Think about any design template you see, they are all in black and white and focused on structure. Here and here for example.

If the composition in a design is poor the viewer will not be drawn in to look at it no matter how nice the colour scheme is. A good composition also allows you to structure the design to ensure the key message is in focus compared to the other elements which may surround it.

5. Have Principles...

The principles of design help your project come together
This image uses 2 of the 5 design principles
Every self respecting designer should be familiar with the principles of design but more important than that every designer should use them! Using at least one of the design principles in every design project will immediately improve the quality of your work. Read more about the principles of design here.



Baca selengkapnya

Senin, 29 Februari 2016

SEO For Images

Komentar
SEO for images
Screenshot from the Google search results page


If your web graphics are optimized for Image search engines like Google they will help to generate an alternate source of traffic to your website. But unlike regular web search where we are more familiar with how search engines rank content, the rules associated with Image search rankings are very different and often based on assumptions.

Why do I say this ? Try a search for "Google" on Google Image Search. None of the top results show images from the actual Google websites or even associated websites. Now if you repeat the search for Amazon, none of the top 5 images displayed are from the official Amazon website. So how do individuals and small companies manage to stay ahead of corporate giants in Image search results? It's to do with image optimization techniques like the ones discussed below.

Regarding optimization, here are 6 simple things that you should keep in mind for getting good rankings in Google Images Search:

1. Image File Name

Use a descriptive image file name which includes keywords related to the content of the image. If your webpage has pictures of an old country farm house - use file names like 'old-country-farm-house.jpg' instead of the default camera file name like IMG_401.jpg. In this way you are providing relevant information about the image to Google rather than just a string of meaningless numbers or letters.

2. Alt and Title

Attach a 7-8 word description with both the ALT and TITLE attributes of the IMG tag. Make it a habit to use these attributes. An example could be...

<img src="old-country-house.jpg" alt="dilapidated old county farmhouse in countryside" title="country style farm house ageing and run down">

3. Discuss The Image

A short two line description of the image just beneath the graphic is the best way to describe an image. It can work wonders for your image search rankings as well. For a live example, read any news story on the BBC website. The HTML tags enclosing the image descriptions will also matter. A description alongside a heading enclosed in H3 or Bold tag will have more weight than the one with just a description enclosed in the paragraph tag.

4. Wrapping Text

If possible, try to wrap text around your images using the CSS code of "float", like the old country farmhouse image above. If you site design won't allow wrapping text or if the image is large in size, try to place the images near text that describes the context of your image. Web Photo Galleries which have no text on the page can make use of the Title and Meta tags to insert information about the images.

5. Image Position On Page

From personal observation Web Images placed at the top of the page are more likely to appear in search results than the ones which are at the bottom. They do not have to be at the very top of the page but certainly 'above the fold' images tend to perform better than those below the fold.

6. Image Size

Another personal observation is that images which are very large or very small tend not to do very well in the search results. Try to keep images at sizes which will be useful to others who may be looking for them. In my experience images around 600px x 400px tend to do well.


If you do decide to use some or all of these tips, please keep an eye on your image performance and let us know how you get on.


Baca selengkapnya

Selasa, 18 Agustus 2015

Layered Image Effect Using CSS

Komentar

This tutorial outlines a simple but impressive CSS effect for you to use on your website.

The effect...


  

The HTML


The CSS

div.box1
{
z-index:1;
position:relative;
-webkit-transform: rotate(-3deg);
-ms-transform: rotate(-3deg); 
-o-transform: rotate(-3deg); 
transform: rotate(-3deg);
}

div.box2
{
z-index:2;
position:relative;
left:-150px;
}

div.box3
{
z-index:3;
position:relative;
left:-350px;
-webkit-transform: rotate(3deg);
-ms-transform: rotate(3deg); 
-o-transform: rotate(3deg); 
transform: rotate(3deg);
}
Baca selengkapnya

Kamis, 05 Maret 2015

Optimising Images For The Web

Komentar
Optimising Images for the web
Optimising an image in Photoshop
In this tutorial you will learn how to change the size of an image by using the crop tool and how to optimise an image for the web in Photoshop. When an image is optimise it helps for a faster download when using the image on the web.

Step One:

In Photoshop, open up an image that you have saved by clicking on open and selecting the image you need.

Opening the image to be used in Photoshop



The image I am using the below image for the demo. I downloaded the image from google images. It is a non-copyright image,that means it’s free to use without having to pay any fees. I searched in the “Search Tools” area in google images and selected “Usage Rights” and selected “Labeled for reuse with modification”.

Selecting the usage rights on Google Images

Image used for the demo 

Image used for cropping and optimising in Photoshop

Step Two:

If you would like to get rid of any unwanted area of the image, you can crop the image. You can use the crop tool as show below to get rid of unwanted areas.

Selecting the Crop Tool in Photoshop



Appearance of the Crop Tool on Photoshop

Selection area on the image once the Crop Tool is selected in Photoshop

Step Three:

To save this image to use for the web. Click on file and the selected “saving for the web”.

Selecting  "Save for Web" in the file area on Photoshop

Step Four:

The “Save for web” window will appear. In this window, selected 4-Up, select png-24 for a faster download and for a greater number of colours of the image to be displayed when using it for on the web. 


Pop up menu to help you to select the correct format for your image to use for the web

Then you can save your image as beach_opt.png. 

Saving your optimized image 
Baca selengkapnya
Langganan: Postingan (Atom)