Managing Assets and Icons
In this article, you will learn how to manage icons and assets using web-based tools.
Introduction
An important part of building an attractive web page is including visual assets such as logos and images. One way to make a web page more professional is to add something called a favicon - a small image displayed in the tab or browser bar containing the name of the page being viewed.
You may also need to resize or crop images before adding them to a web page. You’ll get to try all of this below!
Before learning about favicons and image sizing, it’s important to have a basic understanding of the difference between three types of image files:
JPEG - a highly compressible file type that is preferred for images with significant detail
PNG - a file type that is lossless (meaning that full quality is maintained) - generally preferred for images with less detail such as logos
SVG - useful for high resolution screens, scalable vector graphics (SVG) will change size (scale) for various screen sizes; SVGs also contain roughly 50% less data than their JPEG or PNG equivalents allowing web pages to load more quickly; they are becoming widely used for simple images such as icons and logos
Making favicons using favicon-generator.org
A favicon is frequently the same as, or a modified version of, whatever logo is associated with a company’s web page.
To convert an existing image to a favicon, you can use an online conversion tool such as Favicon-Generator.
** Exercise I: Create a favicon from an existing image **
1. The image being used must be a GIF, PNG, or JPEG (you may find JPG and JPEG used interchangeably). For this exercise, we will provide an image. Open this image in a new tab. Right click or Ctrl and click on the image and download it to your local machine.
2. On favicon-generator.org, click “Choose File.” Select the file you just downloaded.
3. Select “Generate Only 16x16 favicon.ico.”
4. We recommend that you unselect “Maintain Image Dimensions” so that the image will be resized to a square.
5. Deselect “Include your favicon.ico in the public gallery”.
6. Click “Create Favicon.”
7. Click “Download the generated favicon” and save it locally.
8. To add the favicon to your web page, add the file to your project directory and add this code to the <head> of your HTML document.
<link rel="icon" href="./<favicon-name>.ico" type="image/x-icon">
That’s it! You have a favicon!
Editing Images
Another important skill is creating and managing assets. Assets are images and other media that will be presented on your web page.
Sometimes your images will be imperfect for any number of reasons: they might contain content you wish to crop out, the file size may be unnecessarily large, or the image itself might be too big.
A best practice is to ensure that images are sized properly before adding them to an HTML file. Images that are too large may overflow their parent container or render incorrectly. Furthermore, overly large files cause web pages to load significantly slower.
There are several tools we can use to modify assets. Adobe Photoshop is a commonly used and useful tool for all sorts of photo editing tasks. Unfortunately, Photoshop requires a monthly subscription fee. Because of the cost, in this article we will use Pixlr, a free and industry-accepted alternative.
Exercise 2: Edit and Crop an Image with Pixlr
1. Navigate to Pixlr.
2. Select the correct option based on where your asset is stored. In this case, select “OPEN IMAGE FROM URL.”
3.Paste this image URL into the box that appears. Be sure that you don’t have http twice at the beginning of the URL.
4. To crop the image, press “c” and select the portion of the image you wish to keep. Adjust if necessary, then press “Enter” to complete your selection.
You could also select this tool for cropping:
5. Alternatively, you can resize the image by choosing the size first. To try this out, select “Edit > Undo” to revert to the original image.
6. We’ll resize this image to 2200 pixels wide by 1500 pixels tall. Double click the lock symbol on “Layers.”
7. Select “Image > Canvas Size.”
8. Enter the height and width specified above.
9. Press the “v” key and use the arrow keys to move the full size image inside of the new canvas you just created. Alternatively, you can drag the iamge around with your cursor.
You can also select this tool for moving the image within the canvas:
10. Select “Image > Crop.” Now your image contains only the content you want it to have!
11. Select “File > Save.” You’ll have to choose between JPEG and PNG. A good practice is to select JPEG for more detailed images and PNG for images with more empty space. If you select JPEG, you’ll also have to select quality. The web standard for JPEG files is 85%. Select JPEG and use the slider to select 85%.
Nice work! You just sized and saved a JPEG image!
Converting to Scalable Vector Format
Scalable Vector Graphics, or SVGs, are generally the smallest file size as they are created by specifying a series of line lengths, with turns and colors. However, this means that they cannot render highly detailed images well. If you have an image that is relatively simple and you want it to scale well on screens with high resolutions, you may wish to convert it to SVG format. To convert an image to SVG, you can use an online conversion tool such as online-convert.
Exercise 3: Convert to SVG
1. Click here to navigate to online-convert.com.
2. Click “Choose File” and upload this image. Check the size of the image file.
3. Click “Convert File”. If you are using Chrome, the image should automatically download. It is not necessary to use any of the advanced features, but you can if you wish! How large is the image file now?
Awesome! Now you have an SVG file.
Converting an image is a relatively easy task, and it can be beneficial to convert an image and see which file size is smaller. Again, it is good to use the smallest possible file sizes when possible as it allows your web page to load much more quickly.
Everything you have practiced in this article will help you create professional web pages with logos and assets!
