IMAGES for WEBSITE: 2013

24/8/13

Scalable Vector Graphics(SVG)

Scalable Vector Graphics(SVG) are a great solution for creating high-definition images for your website. SVG images are an XML-based file format that use code to create graphics.If you have Adobe Illustratoror CorelDRAWyou can use those applications to create an image and save it as an SVG. If you don't have one of these editors, I recommend using the open source editor Inkscapeto create your SVG. You can download it for free at http://inkscape.org/.
1. First create a simple vector image within your graphics editor and save the file as vector.svginside of your /images/folder within the /retina/folder.
2. Then create an HTML document called svg.htmlinside the /retina/folder. Inside the basic HTML structure, we'll embed the SVG graphic that we created in our image editor.
<object data="images/vector.svg" type="image/svg+xml"></object>
3. Next we'll create a circle and a rectangle using SVG.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="300" r="100" stroke="black" strokewidth="1" fill="orange" />
<rect x="300" y="200" width="200" height="200" fill="#009933" />
</svg>
4. If you open the page within your browser you'll see the graphics we just added. Try zooming in or resizing the page to see how sharp they remain.

If you'd like to use scripting with your SVG image you can use the <embed>tag. The embed tag (<embed src="vector.svg" type="image/svg+xml" />) still works with the same set of browsers, but if you're using an HTML4 or XHTML doctypeat the beginning of your page it is invalid code. This code is allowed if you are using HTML5. More information on this topic is available at
http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_in_HTML.

High-resolution web apps

1. Adding a Retina favicon is quick and simple, so we'll start with that. To add a highdefinition favicon you'll just need to save your 32 x 32 image as an .icofile. If your graphics editor doesn't let you save in that format then save it as a PNG instead. You can find tools online to convert the file from PNG to ICO, such as http://www.icoconverter.com/. Put the favicon.icofile in the root directory of your site.
2. Next save your app icon as four PNG files in the /retina/folder with the following sizes and names:
‰ 144 x 144 pixels – apple-touch-icon-144x144-precomposed.png
‰ 114 x 114 pixels – apple-touch-icon-114x114-precomposed.png
‰ 72 x 72 pixels – apple-touch-icon-72x72-precomposed.png
‰ 57 x 57 pixels – apple-touch-icon-precomposed.png
3. After you've created all four app icons, create a new HTML document called appIcons.htmlinside the /retina/folder. Within the <head>tag of the basic HTML structure we'll add the code to run as a web app.
<head>
<meta name="apple-mobile-web-app-capable" content="yes" />
4. Next within the <head>tag we'll add the code for each of these icons.
<link rel="apple-touch-icon-precomposed" href="apple-touch-iconprecomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72"
href="apple-touch-icon-72x72-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114"
href="apple-touch-icon-114x114-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144"
href="apple-touch-icon-144x144-precomposed.png" />
5. Then we'll add your startup images. Save your startup image as seven different PNG files inside the /retina/folder with the following sizes and names:
‰ 1536 x 2008 pixels – apple-touch-startup-image-1536x2008.png
‰ 2048 x 1496 pixels (landscape) – apple-touch-startup-image-1496x2048.png(rotate this image 90 degrees clockwise before saving)
‰ 768 x 1004 pixels – apple-touch-startup-image-768x1004.png
‰ 1024 x 748 pixels (landscape) – apple-touch-startup-image-748x1024.png(rotate this image 90 degrees clockwise before saving)
‰ 640 x 1096 pixels – apple-touch-startup-image-640x1096.png
‰ 640 x 920 pixels – apple-touch-startup-image@2x.png
‰ 320 x 460 pixels – apple-touch-startup-image.png
6. Now we'll add the code inside the <head>tag to display our startup images.
<link href="apple-touch-startup-image.png" media="(device-width:
320px)" rel="apple-touch-startup-image">
<link href="apple-touch-startup-image@2x.png" media="(devicewidth: 320px) and (-webkit-device-pixel-ratio: 2)" rel="appletouch-startup-image">
<link href="apple-touch-startup-image@2x.png" media="(devicewidth: 320px) and (device-height: 568px) and (-webkit-devicepixel-ratio: 2)" rel="apple-touch-startup-image">
<link href="apple-touch-startup-image-768x1004.png"
media="(device-width: 768px) and (orientation: portrait)"
rel="apple-touch-startup-image">
<link href="apple-touch-startup-image-748x1024.png"
media="(device-width: 768px) and (orientation: landscape)"
rel="apple-touch-startup-image">
<link href="apple-touch-startup-image-1536x2008.png"
media="(device-width: 768px) and (orientation: portrait) and
(-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<link href="apple-touch-startup-image-1496x2048.png"
media="(device-width: 768px) and (orientation: landscape) and
(-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
</head>
7. Finally we'll add a paragraph after the <head>tag so that our website has some content.
<p>Testing out some app icons</p>
8. If you open this page on your device and save it to your home screen as an app (in the Safari browser in your mobile press the box and arrow icon) you'll see the icon and startup image displayed.

Fonts as icons( RSS button )

Web fonts are typically used for applying different typefaces to your designs, but they can also be used to add high-definition icons. Typefaces that are made up of symbols and shapes are called dingbats.Web designers can find useful sets of dingbats that are specifically tailored for building websites. These include icons for social media, shopping carts, e-mail, zoom, print, and other images that are useful for designing user interfaces. You could even create your own font with custom icons for your site.
1. To get started, move the .eot, .svg, .ttf, and .wofffonts that you downloaded, into your /retina/folder. Then create a new HTML document called dingbats.html inside the /retina/folder. Within the basic HTML structure we'll add some CSS code to include our web font.
<style>
@font-face {
font-family: 'ModernPictogramsNormal';
src: url('modernpics-webfont.eot');
src: url('modernpics-webfont.eot?#iefix') format('embeddedopentype'),
url('modernpics-webfont.woff') format('woff'),
url('modernpics-webfont.ttf') format('truetype'),
url('modernpics-webfont.svg#ModernPictogramsNormal')
format('svg');
}
2. Then we'll add a class that lets us create an RSS button.
.rssButton {
background: #ff9c00;
border-radius: 8px;
cursor: pointer;
height: 50px;
width: 50px;
margin: 20px;
font-family:'ModernPictogramsNormal';
font-size: 50px;
color: #fff;
line-height: 15px;
text-align: center;
}
</style>
3. Then we'll add the HTML code to display our button. The RSS icon is a "^" character,
which is Shift+ 6on the keyboard.
<div class="rssButton">^</div>
4. If you run this code inside of your browser you should see the RSS button. Notice that
the button is just as sharp on a Retina device while zooming in

Embedding fonts

To add CSS web fonts, @font-faceis used. It has been around for a while now, but the drawback has always been a lack of browser support for various font formats. These options include .eot, .otf, .ttf, and .woff. Web Open Font Format(WOFF) is the latest standard that has been adopted by most font foundries and web browsers. WOFF will likely be the primary format in the future. This recipe will cover how to add a web font to your page that includes support for older browsers and then we'll discuss font services
1. To get started, move the .eot, .svg, .ttf, and .wofffonts that you downloaded, into your /retina/folder. Then create a new HTML document called cssFonts.html inside the /retina/folder. Within the basic HTML structure we'll add our CSS code to include our web font.
<style>
@font-face {
font-family: 'BevanRegular';
src: url('Bevan-webfont.eot');
src: url('Bevan-webfont.eot?#iefix') format('embeddedopentype'),
url('Bevan-webfont.woff') format('woff'),
url('Bevan-webfont.ttf') format('truetype'),
url('Bevan-webfont.svg#BevanRegular') format('svg');
}
2. Then we'll add a class to display our new font as a large header.
.largeHeader {
font-size: 40px;
font-family: 'BevanRegular', Arial, sans-serif;
font-weight: normal;
}
3. Next we'll add a final class for a small header.
.smallHeader {
font-size: 22px;
font-family: 'BevanRegular', Arial, sans-serif;
font-weight: normal;
}
</style>
4. Then we'll add the HTML code to display our new headers.
<h1 class="largeHeader">Our New Large Header</h1>
<h2 class="smallHeader">This header isn't as large</h2>
5. If you run this code inside of your browser you should see the new fonts. Notice that the text looks just as sharp on a Retina device.

Using code instead of images

1. To get started, create a new HTML document called cssGraphics.htmlinside the /retina/folder. Then inside the basic HTML structure we'll add some CSS code to create a button.
<style>
.buttonArea {
margin: 50px;
}
.button {
background: #7999ff;
background: -webkit-linear-gradient(#7999ff 0%, #002c62 100%);
background: linear-gradient(#7999ff 0%, #002c62 100%);
border-radius: 60px;
box-shadow: 1px 1px 4px #666;
cursor: pointer;
padding: 10px 40px;
color: #fff;
font-size: 20px;
text-align: center;
text-decoration: none;
text-shadow: 1px 1px 2px #000;
}
2. Then we'll create a diamond for our first CSS shape.
.diamond {
background: #000;
margin: 40px 20px;
width: 50px;
height: 50px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
3. Next we'll create a circle with CSS.
.circle {
margin: 20px;
background: #000;
border-radius: 50px;
width: 50px;
height: 50px;
}
4. Finally, we'll create a triangle in CSS.
.triangle {
margin: 20px;
width: 0;
height: 0;
border-bottom: 25px solid transparent;
border-top: 25px solid transparent;
border-left: 25px solid #000;
}
</style>
5. Then we'll add the HTML code to display the button and shapes we created.
<div class="buttonArea">
<a class="button">Click Me</a>
</div>
<div class="diamond"></div>
<div class="circle"></div>
<div class="triangle"></div>
6. If you run this code in your Retina device you should see all the elements we just created. Note that for our example we only added a vendor prefix for Webkit (Safari and Chrome). You'll need to add other browsers' vendor prefixes for additional support.

CSS image-set

1. First, we'll create an HTML document called imagesetTest.htmlinside the /retina/folder to test our images. Inside of the basic HTML structure, add the CSS code to create a box and backgrounds to apply to it.

2. Then create some divtags in HTML with your two backgrounds to test them out.

3. If you are working on a Retina device (running Safari 6+, Chrome 21+, or another browser with image-setsupport) you will be able to open this page locally; if not, upload the folder to your web server and open the page on your device. You'll notice that the second background is much sharper than the first.

CSS media query

To build our media queries we'll be using the images that we have previously created. These include a Retina and normal version of a background image, an image sprite, and a border image with a photo to wrap it around.
1. To get started, create a new HTML document called mediaQueries.html inside the /retina/folder. Then inside of the basic HTML structure we'll add the non-Retina CSS code for a background image, an image sprite, and a border.
2. First, we'll add a boxstyle to hold our background image and the non-Retina version of the background image code.

3. Then we'll add the CSS code for our non-Retina image sprite.

.icon {
background: url(images/mysprite.png);
height: 40px;
width: 40px;
}

4. Next we'll add the code for a non-Retina border image.

.imageBorder {
border-width: 10px;
-webkit-border-image: url(images/myBorder.png) 10 repeat;
border-image: url(images/myBorder.png) 10 repeat;
}

5. Now we're ready to add a media query that will replace these images if the user is on a Retina Display.

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
.background {
background: url(images/myBackground@2x.jpg) repeat;
background-size: 250px 150px;
}
.icon {
background: url(images/mysprite@2x.png);
background-size: 80px 80px;
}
.imageBorder {
-webkit-border-image: url(images/myBorder@2x.png) 20 repeat;
border-image: url(images/myBorder@2x.png) 20 repeat;
}
} /* END OF MEDIA QUERY */

To complete the CSS, we'll add the styles to position our icons and the closing style tag.

.icon1 {background-position: 0 0;}
.icon2 {background-position: -40px 0;}
.icon3 {background-position: 0 -40px;}
.icon4 {background-position: -40px -40px;}
</style>

6. To finish our code we'll just need to add some HTML to display our three types of images.

First, @mediabegins the media query statement. Then only screenspecifies that the device being used must be a screen (another media type could be print). Next, we specify that the min-device-pixel-ratiomust be equal to or greater than two. This targets the Retina Display (or any other similar display) because it has a pixel density that is two times greater than a standard display (some other devices use a ratio of 1.5). We also included the -webkitvendor prefix to make sure that our code works on older Safari browsers. To keep our code short we only included one vendor prefix, but if you want full support you may need other prefixes (-o, -ms, -moz). You can find out more about browser support at http://caniuse.com/. Finally, the brackets will enclose any style that we would like applied if these conditions are met

Creating css border images

1. First, open the border image you chose in your graphics editor. Just like other Retina images, you'll want the initial graphic to be 2x as large as it will be displayed on screen. Save this image as myBorder@2x.pnginto the /images/folder that is within the /retina/folder. Then resize the image to 50 percent and save it as myBorder.pnginto the same folder.
2. Next save the photo you've selected into the /images/folder within the /retina/folder as
myBorderPhoto.jpg. Now we've got all the images ready to start writing our CSS and HTML code.
3. Create a new HTML document called borderTest.htmlinside of the /retina/folder. Add some CSS to create the border.

<style>
.imageBorder {
border-width: 10px;
-webkit-border-image: url(images/myBorder.png) 10 repeat;
border-image: url(images/myBorder.png) 10 repeat;
}
.imageBorderRetina {
border-width: 10px;
-webkit-border-image: url(images/myBorder@2x.png) 10 repeat;
border-image: url(images/myBorder@2x.png) 20 repeat;
}
</style>

4. Then add your photo in HTML and apply the CSS styles to create both a Retina and non-Retina border image.

5. If you are working on a Retina device you will be able to open this page locally; if not, upload the folder to your web server and open the page on your device. You'll notice that the second border is much sharper than the first.

The first includes the –webkit vendor prefix, which allows the code to work in older versions of iOS.

Creat image sprites

Image sprites help you accomplish this by combining a group of images into a single image. Sprites are a great way to group sets of icons or other similar graphics that are used in your template.
If you are creating an interface for a bank, you may have icons for search, savings, checking, loans, advice, and more. Instead of saving these files individually, you can group them into a sprite to speed up the download
For our example, we'll be using icons that are 80 x 80 pixels
1. First take the four images that you've collected and make sure that they are of the same size. Then create a new image that is 2x as tall and 2x as wide as each image (for 80 x 80 icons the new image would be 160 x 160). Place each icon in a quadrant of the new image so they fill the space. Save this image as a PNG inside the /images/folder within the /retina/folder with the filename mySprite@2x.png. Then resize the image to 50 percent and save it as mySprite.pngin the same folder
2. Now we'll test the two versions of the sprites on a web page. Create an HTML document called spritesTest.htmlinside the /retina/folder. Next, we'll add some CSS code to the basic HTML structure, using the measurements of a single one of your non-Retina icons (40 x 40 for this example). The background-size attribute should equal the full size of your small, non-Retina, sprite.

3. This CSS code will let us set either regular or Retina icons depending on the class that we use. Now we'll add in the HTML code to display both the sprites so that we can compare them.

4. If you are working on a Retina device you will be able to open this page locally; if not, upload the folder to your web server and open the page on your device. You will notice that icons 2 and 4 are much sharper than icons 1 and 3

Software optimize your images

TinyPNG – http://tinypng.org/(web-based)
ImageOptim – http://imageoptim.com/(Mac)
RIOT – http://luci.criosweb.ro/riot/(Windows)
PNGGauntlet – http://pnggauntlet.com/(Windows)

Optimization website

We'll cover using Photoshopand GIMPto edit images. The three main image formats you'll come across are GIF, JPEG(JPG), and PNG. .GIF is used for logos or low detail icons, JPEG is optimal for photos, and PNG is best for detailed graphics with transparency.
GIF images are best for simple illustrations and icons because they support transparency but only display a maximum of 256 colors. JPEG images are often used for photos because they support millions of colors and compress well
1. To get started let's work on optimizing a PNG image. Open any high color photo or graphic. The first thing we will do is posterizethe image. This will reduce the number of color variations that the image contains.
2. In Photoshop, go to Image| Adjustments| Posterize...in the menu bar. In GIMP go to Tools| Color Tools| Posterize.... This will open a dialog box allowing you to change the number of levels. Lowering the number will decrease the amount of colors used and reduce the size of the file. Start with a large number and slowly
decrease it while watching the image preview. Find a level where the difference in the image isn't very noticeable.
3. Next save the image as a PNG (PNG-24) via Export...in GIMP or Save for Webin Photoshop. In GIMP you can leave the compression level at 9.
4. Now we'll optimize a GIF image. Open a logo, clipart, or similar image file in your graphics editor. In Photoshop choose File| Save for Weband then select GIF as your image type. On the right-hand side you'll see a drop-down list for Colors. Decreasing this number will result in a smaller image by removing similar colors. If you find it is removing a color that you don't want, you can select that color in the pallet below and click on the lock icon. In GIMP from the menu bar select Image| Mode| Indexed.... Try choosing a maximum number of colors less than 255. Choose a low number of colors that still looks good (try somewhere around 128 first). You'll find that some GIFs compress well and others do not, based on the initial amount of colors.

Retina background images

1. We'll start working with background images by creating two versions of an image just like we did for regular images. If you don't already have a good background texture to use there are a lot of great options at www.backgroundlabs.com. In your graphics editor resize the image to double the size that you'd like a single tile to be and save the file in the /images/folder within the /retina/folder as myBackground@2x.jpg. For our example we'll use 250 x 150 pixels. Next, resize the image to 50 percent and save it as myBackground.jpgin the same folder.
2. Now let's add our background images to a web page to test them out. Create a new HTML document in your editor called backgroundTest.htmland save it in the /retina/folder. First, we'll add our CSS code into the file (it is typically a good idea to create a separate CSS file but for the example we'll add it in our HTML page).

3. This CSS code will create a box to display the background within and then apply our image to it. Make sure you enter the correct background-sizedimensions for your image (based on the smaller of the two images). Next we'll add the HTML code as follows to our CSS:

<div class="box bgRetina">Retina</div>
<div class="box bgNormal">Normal</div>

4. Now we're ready to test out our Retina background. If you're on a Retina device load the page in your browser, otherwise copy the new files to your server and open them up in your browser. The first background will look much sharper on the Retina Display.

Retina display in website optimization .

1. To get started, let's create a folder on your computer called retina. Inside that folder, create another folder called images. We'll use this as the directory for building our test website.
2. To create your first Retina image, first open a high-resolution image in your graphics editor. You'll want to set the image size to be double the size of what you want to display on the page. For example, if you wanted to display a 700 x 400 pixel image, you would start with an image that is 1400 x 800 pixels. Make sure you aren't increasing the size of the original image or it won't work correctly.
3. Next, save this image as a .jpgfile with the filename myImage@2x.jpginside of the /images/folder within the /retina/folder that we created. Then resize the image to 50 percent and save it as myImage.jpgto the same location.
4. Now we're ready to add our new images to a web page. Create an HTML document called retinaTest.html inside the /retina/folder. Inside of the basic HTML structure add the two images we created and set the dimensions for both images to the size of the smaller image.

<body>
<img src="images/myImage@2x.jpg" width="700" height="400" />
<img src="images/myImage.jpg" width="700" height="400" />
</body>

5. If you are working on a Retina device you should be able to open this page locally; if not, upload the folder to your web server and open the page on your device. You will notice how much sharper the first image is than the second image. On a device without a Retina Display, both images will look the same. Congratulations! you've just built your first Retina-optimized web page.