Images often take up a large portion of the data on a webpage, and their file size can drastically change the page’s loading time. The larger the file size, the longer it takes to download. So, optimizing images can reduce your file size, and can shave some seconds off your page’s loading time — which might not sound like much, but can make a significant difference in the performance, and the user experience of your site. It also is helpful for search engine optimization, since Google uses page loading time as a ranking factor in their algorithm.
What is image optimization?
Image optimization is the process of decreasing an image’s file size as much as possible without sacrificing the image quality. This is done to improve your page’s loading time. Keep in mind, the average webpage is only 2-3 MB, so your image should be significantly less than that.
How to Optimize an Image
Use a Descriptive File Name & Alt Tags
Don’t name your image file something meaningless like: IMG1234.jpg. Give it a meaningful name, for example: “chocolate-cupake.jpg.” This is an appropriately descriptive name, it’s not too long and even though you have not seen the image in question, you know what it shows.
Also, be sure to enter alt tags on all images. Alt tags are the text alternatives for when a browser cannot download an image. They are also used for accessibility. People with vision impairment can use screen readers to surf the web. Screen readers recognize and read alt tags. Whether you are writing the code yourself, or using WordPress, it’s easy to add alt tags. When uploading images to WordPress, there will be a box that reads “alt” simply add your alt information in this text box. To write an image alt tag, you should describe the image as if you were describing it to someone who couldn’t see it.
Both alt tags and descriptive file names are better for SEO — a search engine will know the content of the image and be more likely to retrieve it in the appropriate search.
Choose Image Dimensions Carefully
A webpage on a typical size monitor will appear at about 1200 pixels wide and about 700 pixels tall. Your image should never be larger than that. Save the image in the approximate dimensions that it will appear on your site. If I know that I want my image to be 500 by 500 px on my webpage, then I will only save it as 500 by 500, to cut down on unnecessary data. If you are unsure of how large your image appears on your site, you can always screenshot your webpage and crop down to just the image, to see how many pixels it is. On a Mac, the key command is: command + shift + 4, and the pixel size of the screenshotted area will appear right on your cursor. For an advanced maneuver, one can also inspect the image on Chrome: right-click an element, select inspect, and the page’s source code will appear on your screen, including any image attributes.
How to Change the Dimensions of an Image
Photoshop is the premiere tool for image optimization. To change the dimensions of any image in photoshop simply go to the “Images” button in the top navbar, then select “image size.” This window will display the current pixel size of your image (if it’s not showing the pixel value, select “pixel” from the dropdown menu on the right). From here, you can manually enter the desired pixel size. Photoshop also allows you to save a photo for web optimization. When you’re all done, select “File” from the top navbar, then “Export,” and “Save for Web,” and ensure that “optimized” is checked off in that window.
This is also very easy in Preview, which comes automatically on all Macs and Macbooks. Once your image is open in Preview, click the button that looks like a toolbox, just to the left of the search bar. Now click the button that looks like a square with two opposing arrows, to the right of the triangle button. Now you should be able to see the current pixel size, and manually adjust it. In this window, Preview will also show you how changing the pixel size will alter the overall file size.
Finally, those that have access to Microsoft Paint, can reduce an image’s pixel size with ease as well. Once the image is open in Paint, simply click the “resize” button in the top toolbar. Then, in the resize window, ensure that “pixels” is selected instead of “percentage.” Now you can easily see the current pixel size, and alter it based on your needs.
Choose the Best File Type for Your Needs
JPEG (or .jpg) images have become a standard; it just might be the most common type. JPEG images can be compressed significantly, which results in quality images with small file sizes. A downside of JPEGs is that they lose their quality over time; with every re-save, they degrade slightly.
GIF (.gif) images are lower quality than JPEGs. GIFs also support animation, so if you desire animation on your site, a GIF is typically the way to go. For images, GIFs are good for plain, simple images on a webpage that only include few colors. For any image that is more complex, or includes many different colors, a GIF is not the way to go.
PNG (.png) images are another good option. PNGs support many more colors than GIFs and they don’t lose quality over time with re-saves, like JPEGs do. The PNG file sizes can still be much larger than JPEG images. One thing that makes PNGs special is their ability to display transparencies. So, if you desire to showcase an image with a transparent background, for example, a PNG is your best choice.