04 Mar
Images are a key component of any successful website. With proper imagery, a website helps to convey a message to the user, whether that is how great a product is, or what the organization’s building looks like, these images are crucial.
Many web admins realize the importance of good imagery to their website, but maybe do not realize how to go about making an image fit properly to their site.
Many sites offer a easy up-load option for images that allows drag-and-drop interface between where the image is located and hosting the image on the site.
These image up-loaders often fail to re-size the image to a proper size for the particular situation.
It is helpful to understand the basic concepts of web dimensions.
Basically, all web pages are approximately 1000-1200 pixels wide and 1000’s of pixels tall. With most images that are meant to actually show detail, coming in around 200-400 pixels wide by 200-400 pixels high. Each image will have it’s own specific image dimensions that it will look the best set at.
To find these dimensions, open the photo in a photo editor. If you have Photoshop installed, open the image in the program and check out the size specs. If you don’t have Photoshop, a good alternative is Photopea and it is free.
Changing Image Size
With the photo open in the photo editor, click on Image on the top menu, then choose Change Size from the drop down list. On this pop-up screen, are the current pixel dimensions of the image. This can be helpful for deciding if an image will fit in a particular location properly.
Additionally from this pop-up screen, you can adjust the size of the image by specific pixels, or by using the percentage change meter. Using the percentage change meter will yield a more accurate image then trying to change the image by pixel size alone.
Finding Image Space Allocation
In order to have the image fit the website, the space allocated for the image must be discovered. To do this, there are a couple of options. First, look to see if there is an image currently occupying the space. If so, copy this image to your computer and open it in your photo editor. Discover the size of the image and make the replacement image the exact same size.
If there is not an image in the current space, another option may work. Open the snipping tool on your machine by going to the Start Menu and clicking in the search box at the bottom of the menu.
In the search box type “snipping tool” (only works in Windows) a red pair of scissors with Snipping Tool will appear as an option, click on that. It is important to note that before launching Snipping Tool, to be on the page that you wish to capture the image size of.
So now with the tool open, stretch and drag the cursor to encompass the entire area of where you want to place the new image. Let go of the mouse clicker and a context menu will appear. Choose save from the menu, and save it to your desktop.
Drag the image from the desktop into your photo editor and change the size of the image in order to discover it’s exact dimensions. Now take those dimensions and make the new image that exact size. After that, the image is ready to be uploaded to the spot indicated by the sizing.
If you are having a hard time updating your website, please do not hesitate to contact Authentic Imaging, at 406-322-3569.
