Large images — that is, images that consist of a file size greater than 1 MB — can result in slow web pages, resulting in a poor user experience and potentially lower page ranking. By optimizing your images for the web, you can decrease the load time of your pages, making your visitors and search engines happy. Read on for tips on how to optimize your images.
Resize your images
Image size and file size are two different things. Image size describes the pixel dimensions of an image (for example, 800 pixels by 600 pixels). File size, on the other hand, describes the storage space the image file will occupy on the web server, as well as the amount of information a user’s browser will need to download (for example, 80kb). Fortunately, the display modes that are available to you as an editor will resize your images when they are rendered on the page, but it is still a good idea to keep this concept in mind and avoid choosing a large display format when it isn’t needed.
Choose the right format
There are several file formats available for images, but only four web-specific formats are allowed when adding an image to your site: JPG/JPEG, GIF, PNG, and WebP. An image with lots of colors (for example a photograph of Duke Chapel) will be best optimized as a JPG or WebP file. An image with limited colors (such as a logo), or which requires an area of transparency, should be created a GIF or PNG files.
Use the proper compression
Finding the sweet spot between smallest file size and good quality is the primary goal of selecting the best compression type for your images. Most image editing applications, such as Adobe Photoshop, have an automated “save-for-web” feature that will allow you to preview how the type and level of compression will affect the image at the time you are exporting/saving an image. While your site has been configured to apply image compression to all uploaded images at the time they are rendered, it is still a good idea to keep this concept in mind when preparing your images.
Use descriptive file names
In addition to providing the required alternative text, it is important to give your files meaningful, relevant names from a SEO standpoint. For example, if you download an image of the Duke Chapel from your camera which you took last winter after a snowfall and the file name is DSC_1234.JPG, change the file name to Duke-Chapel-after-the-December-2021-Snowfall.jpg before you upload it. The descriptive file name gives search engines more information to use when indexing the image and the page on which it is displayed.