Optimizing and Inserting Images for the Web

The web is a visual communication medium, so you want your images to look as top notch as they can. Your images also need to be reduced in file size so that they download and appear as quickly as possible. This is especially important for mobile platforms that might not have as fast a connection or as much processing horsepower as a desktop or laptop computer. Additionally, search engines (such as Google, Yahoo, Bing, etc) will actually knock your page down in search results- meaning your page will show up lower on the search results page beneath other pages- if your web pages are slow to load. The usual culprit for slow loading speeds is either un-optimized or poorly optimized images.

Pixels- the on-screen unit of measurement-

Images on the web are measured in pixels. Pixels are the thousands of tiny blobs of light that make up our computer/phone screens that combine together to display what we see on the screen- documents, the interface, images, video etc. So while we might measure something in inches or centimeters if we are going to print it, if we are designing something for the web (for display on our screens) we measure it in pixels.

1. Optimizing Images for the Web

You are going to need Adobe Photoshop and the app Squoosh for this brief demonstration.

• Adobe Photoshop – available for free to all Providence College Faculty, Staff and Students
• Squoosh – online image compression app, also free

2. Inserting Images into WordPress

Next – Step 9 of 12 – Site navigation, menus, sidebars, & parent-child relationships