All About Images on the Web

One of the more complex issues for people who manage the content for websites is making sure that images are sized appropriately but still high quality for the user experience. This post will be a step-by-step guide for using a free image optimizer tool to do just that - and we'll also give you some rules of thumb for thinking about images on websites.

File Types for Web

PNG - this is a great file type for web - especially for transparent files and this is the file type best used if your page may be linked to by a social media site like Facebook - because it is only the PNG file types that are available within Facebook to display next to the link. (To the left is an example of 2 images placed on a page that has a colored background. Notice how the first is transparent and the second is not.)

JPG (JPEG) - these are great file types for photos as they can be saved with good quality at reasonable sizes. These cannot be transparent.

GIF - GIF is similar to PNG, but is an older file type. They can be transparent, but the PNGs can be made smaller. GIFs were very popular at one time for creating animated logos and images. This practice has fallen out of popularity as web users have become more savvy and the trend has moved towards simpler (or less annoying) designs.


File Size versus Screen Size

File size matters when putting images online. The larger the actual file, the longer it takes to load on the page. It doesn't matter if the screen size is tiny - if the file is large it is slow.

Screen size matters - but it is more a question of design. You want to use the size images that look good on a page - that do not 'take over' your content and that bring attention to things on your page and break up the text in a way that 'feels good'. Notice that these are not precise. Designing your content on a page is an art, not a science.

Rules of Thumb for File Sizes:

Image Size (approx screen size)	Max File Size
ICONS - XSM (5-15 pixels wide)	10k
SMALL (15-80 pixels wide)	20k
MEDIUM (80-250 pixels wide)	50k
LARGE (250-500 pixels wide	100k
XLG (only used for banners, large background images, etc.	200k

Images need to be saved for web - which is a process that compacts the image and reduces the quality but in a way that still is good for web viewing. We recommend a simple and free program called RIOT to do this.

You can download RIOT here! (Click the bar at the very top of the screen that says 'Download RIOT standalone application', not the big blue bar that says 'Download')

Then, follow our step by step guide below to convert a single image from a large photo to a web ready PNG or JPG or to convert a batch of images all at the same time.



Converting a single image:

1) Open RIOT, and select the 'Open' folder to import your image. If your image is very large, you will be asked if you want to resize the image, be sure to say 'yes' since this is where you will input the final size you want the image to be. My original image is huge, 3264 x 1952 pixels, and I want to take it down to something web-friendly, like 300 pixels wide. Go ahead and input what you would like your final size to be, and be sure the 'Keep aspect ratio" box is checked.

2) Once your image is uploaded, you will see a preview of it in both splits of the screen. The screen on your left is the original, and the one on the right is the optimized image. Both of their sizes are listed above them. My photo is now at 35K, which, for its pixel width/height, is a very reasonable size.

Check out the sliding Quality bar in the bottom part of the program to make sure the image quality is at least 80%. This is also where you can choose the type of file you want to save your picture as--I'm saving mine as a JPEG.

3) Now that you have the file type and quality set, go ahead and click the save button on the top. Enter in a file name and pick the location of where you want to save it to, and voila! Your photo is now an optimal size for your web use needs!

Another great feature of RIOT is the ability to re-size a batch of photos at once.

1) To do this, click on the Batch icon on the top menu.

2) Once in the Batch screen, you can click on Add images and...add images! You can pick and choose which, or just add an entire folder's worth. Once you have your files, go ahead and choose Resize from the Additional Tasks button along the top. Enter in your pixel width, I'm using 300 again.

3) You are now ready to choose the folder where you want the resized images to go, and you do so from the bottom of the box by clicking on the ellipses.

4) After you've sorted out where to send your images, go ahead and click on the Start button! You can see the status, and if you receive an error message, it is probably because the new files cannot be saved in the same folder because they have the same name as the originals. Your new files will be in the folder you chose, and you can click on the Settings button at the top, check the Report file size changes box, Apply the changes, and your final report will show you just how much the sizes decreased. Simple and amazing!

That is what it takes to resize a single image or a batch of images using a great little tool called Riot.  I Hope this was helpful!

___________________________
Find Mary Online! 

marycamacho.com  

JoyaTechSolutions.com  

TheInternetPlan.com