Creating and modifying images is part of the work you'll need to do in order to build attractive and effective web pages.
There's lots of software that will let you manipulate images, including the popular (and pricey) Photoshop.
Alternatively, you can accomplish many common edits using a free, web-based app like Pixlr.
You can learn all about using Pixlr via their series of tutorials, but in this lab we'll cover the basics of resizing an image.
Save an image to practice with
Check out this image of a kitten from Wikipedia:
It's a great picture, but it's huge. Let's use Pixlr to resize it.
Save the kitten image to your Desktop.
Once it's saved, right click the image and choose Get Info (or, hit
i). Based on the info that pops up, note the pixel dimensions to see how big the image actually is.
Open your image in Pixlr
Launch the Pixlr web app by visiting this URL: https://pixlr.com/editor/
From the options it gives you, choose Open Image From Computer and find the kitten image you saved in the previous step.
The area where you see the image is the canvas, where you will work on your graphic.
To the left of the canvas is a Tools panel, from which you can select actions to be performed on your image.
You can also use the menu at the top of the screen to select actions.
To the right are Navigator, Layers, and History windows, which are used for various tasks, and can be hidden or shown from the View menu as needed.
Transforming, resizing, and cropping
The kitten graphic in Pixlr is displayed at a reduced magnification since it's too large to display 100% on most screens.
Try zooming in via the Navigation window to get a sense of its true size.
Now let's try some modifications...
Try to figure out how to resize your image. Aim for a (much) smaller-sized image. Make sure your new version is not distorted! Once your image is smaller, try to crop your image, so that you keep only the kitten (i.e. exclude the background).
Now that you're edits are done, save your work by going to File > Save and saving the new image to your Desktop.
Our resulting image looks like this: