Images are integral to generating a good experience for your online visitors. Unfortunately, they are also one of the main culprits when it comes to a slow load speed for web pages. Not only is load speed one of Google’s ranking factors, but it is also one of the main reasons why visitors become frustrated and leave before they have truly experienced what your website has to offer.
The Importance of Optimizing Images
Image sizes can affect the basic functionality of your entire site – as well as your server. Since most images that we use have an incredibly high quality that is lost when they are used on the web, it is important to optimize every image before uploading it to your website.
Here are a few tips to help get you started.
Ideal File Size
As a general rule of thumb, the image you upload to your website should have a file size of less than 200KB. That’s the absolute maximum. Ideally, the images should be 100KB or less.
JPG vs PNG
There are a variety of file types that an image can be saved as. The two most commonly seen for non-graphic designers are JPG and PNG. The essential difference lies in quality: a PNG image has richer colors and an inherently larger file size. They are typically used for print materials. JPEG images are of a lower quality and smaller file size, but typically are indistinguishable in small-sized applications, such as displaying on websites.
For a web-optimized image, use JPEG.
Ideal Image Size (Dimensions)
The maximum dimensions of an image will differ across the board. In general, the required width will be 2000 pixels in width at most. More commonly, an online image may be 1200 pixels in width or less.
When in doubt, check with your web designer or dig into the website itself to find out the maximum dimensions required for images.
How to Optimize a Photo Using Photo Editing Software
Everyone has their own opinion of the best photo editing software to use. For the purpose of this article, I’ll focus on two of the most popular: Photoshop® and Gimp.
Available for purchase or rental, Photoshop is one of the most advanced and user-friendly software options available. The image alteration possibilities are nearly endless.
This is the “poor man’s version” of Photoshop. It is a freely distributed software that is available to download for free. At home, it is my go-to photo editing software, and has the same basic capabilities of Photoshop, although the process is a little different.
Step 1 – Open Image in Photoshop
Open up the image you would like to use on the website. Make sure that it is a file with large enough dimensions to suit your purpose.
Step 2 – Resize Image
Process: Image > Image Size
Here, I’ve re-sized the imaged to 1200 x 627. Originally, the image had a dimension of 4080 x 2710 pixels. The re-sized image looks tiny in the screenshot, but the magnification is only set to 25%. So that’s why.
Step 3 – Save Edited Image to Computer
Process: File > Save As > Save
After all of your edits have been made, you’re ready to re-save the file to your computer (or flash drive, what have you).
When you select “save as,” a popup window will appear. This window gives you the option to select the new location of the image and to re-name the file. Make sure the “save as type” is set to JPEG.
Step 4 – Change Quality
When you hit “save,” a second popup window will appear. This window enables you to change the quality of the image. I typically drop it at least to 7, and go from there. Drastic reduction in quality will result in a blurry image – definitely not the look you want!
This simple process took an image that had a file size of 1.3 MB in size to a much more manageable 104 KB. A drastic reduction!
Step 1 – Open file in Gimp
Make any necessary edits to the image at this point, including any dimension resizing.
The image I used was originally 4080 x 2710 pixels in dimension. When I opened it in GIMP, it was re-sized to 1200 x 627.
Step 2 – Export file
Process: File > Export As
Merely selecting “save” or “save as” will not give you the option to alter the quality of the image. When you select “export as,” a popup screen will appear. At this point, you can change the image file name as needed. Be sure to maintain the .jpg ending. When the file name is ready, click “Export” in the bottom right corner of the popup screen.
Step 3 – Reduce Quality (aka file size)
A second popup box will appear, giving you the opportunity to change the quality of the image. I typically reduce it to at least 70, and will drop as low as 50 for photos that I know will be posted with small dimensions on the website.
Drastic reduction will result in a blurry, unusable image.
Simply altering the image through GIMP brought the file size down from a whopping 1.3 MB to a much more manageable 58.2 kB. Although the quality (should) be roughly the same as obtained through the Photoshop method, the completed file is only half the size of the comparable Photoshop file.
It is officially web-ready!
To learn more about optimizing your website for user-friendliness and search engine ranking, contact our team at Art Unlimited.