One of the most common problems I see on websites is the use of images that are not optimized. Two telltale signs are (1) images that are too large and require the user to scroll and (2) resolution is too high and the images load slowly. Optimizing means: resizing the physical dimensions to fit the maximum width for the content area on your website; reducing the resolution to 72 ppi; compressing the image by saving it as a JPG, PNG, or GIF. Your website will load faster with optimized images.
How do you figure out the maximum size?
On most websites that I design, the maximum width of the site container is 1140 pixels. But there is always some left and right padding, so on a full width page, the maximum width is usually between 1080 and 1100 pixels. On pages with sidebars, the maximum width of the main content area is around 740 to 800 pixels. If you know how to use Firefox Firebug or Chrome Developer tools, you can figure out these widths. Otherwise, ask your web designer to give you the measurements.
Column width next to sidebar = 800px on my website.
If the site features a lightbox or slideshow, the considerations change. In a lightbox, a viewer clicks on a small or medium size of the image and a larger version of the same image will appear above the page; the viewer can then navigate to the next large image. Some slideshows can be configured so that the larger images take up the full browser screen. If you are implementing such features, you must upload appropriately-sized images. According to w3schools.com, 97% of web users have a monitor screen resolution of 1024 x 768 pixels or higher (my computer’s resolution is 1920 x 1080). Among those users, 33% have a monitor resolution of 1366 x 768. So, I use this figure (1024 x 768) as a baseline for my dimensions when resizing to make sure a user can view the entire image without having to scroll.
Once the images are uploaded to the web, upscaling will result in loss of quality. Downscaling is no problem. That’s why you want to find the largest size that is most common at the present moment. Resolutions and desktop screen sizes are increasing yearly, and image sizes will have to increase to keep pace. Using CSS and JQuery, we can code for responsiveness and the images will automatically scale down when appearing on smaller viewports.
Reducing the Image Resolution Density
Pixels per inch (ppi) refers to 2 things: resolution density of an image and how many pixels exist across the surface area of a monitor screen or a print piece. For years, we’ve been taught that web images must be 72 ppi to match the screen resolution. But, image ppi only matters in the print world, where 300 ppi is the standard. The 72 ppi is actually a Mac-based number. When you do a screengrab on a PC, then open the screengrab file, you’ll discover its resolution is 96 ppi. There’s a nifty online tool for calculating the actual pixel density of your computer monitor, and it reveals a little-known fact: most monitor pixel densities are actually above 100 ppi!
So, where does this leave us? There are many compelling articles that show how an image’s ppi doesn’t make any difference in its display quality on the web. The only reason, then, to reduce an image’s ppi is to reduce the image’s physical size. The smaller size will take less time to upload to the web and will render faster for the viewer.
Compressing the Image
Before saving an image to a compressed file format, make sure that its color mode is RGB to match the color space of the web. RGB files are also smaller than CMYK files, because there is 1 less color channel.
When saving an image for the web, use one of these file formats (all with built-in compression):
- JPEG (Joint Photographics Expert Group) — Offers different levels of lossy compression, which means you lose and cannot retrieve data when compressing. Best used for continuous tone images.
- GIF (Graphics Interchange Format) — Supports transparency and animation. Best used for graphics.
- PNG (Portable Network Graphic) — Supports transparency and has much better color quality than GIF.
- SVG (Scalable Vector Graphic) — A vector format for high-quality web graphics.
SVG is a relatively new option that has many benefits: scalability, SEO-friendly, and resolution-independence. It will likely become the next standard for crisp vector web graphics. Right now, it’s not yet supported on all browsers. For continuous tone images, like photographs, JPG and PNG are still necessary.
Compression Tools
Photoshop is my tool for optimizing. It has an effective Save for Web option that offers a nice range of settings. If you don’t have Photoshop, there are many free options that you can try, such as:
- Preview: one of several free applications pre-installed on new Macs. Preview is often used as the default PDF viewer. But, it can also be used to resize your images. Go to the TOOLS menu > Adjust Size … You’ll still need to compress the image, though, with another tool.
- Pixlr: Great, free online image editor that can crop, resize, modify, and compress files. Chrome and Firefox have extensions for it.
- GIMP: Free alternative that is PC and MAC compatible, but not for the iPad. It has most of Photoshop’s capabilities, with a more PC-style interface.
- Pixelmator: Not free, but a great, affordable alternative to GIMP and Photoshop that iPad users might want to investigate and use. Mac/iOS platform, with a 30-day free trial period.
- Image Optimizer: This free, online application can resize and compress files.
- ImageOptim: Free compression tool with drag and drop interface.
- Photoresize Pro: A photographer client has used this for years. It’s not free, but very inexpensive.
You may notice that JPG files are smaller than PNGs. Both file formats are great for continuous tone images, but use PNGs only when you need transparency, like masking out the background. In Photoshop, the SAVE FOR WEB (File > Save For Web) option provides better compression than the standard SAVE AS… My favorite presets are:
- JPEG High – High Quality 60, Optimized
OR - PNG-24 – PNG-24, Transparency
Naming Conventions
It’s good practice to establish a naming system for your files. This system will help you find the files on your computer, and it will also help search engine optimization if those files are uploaded to the web. My system is based on dates. Each project is assigned a date number and given a descriptive shortcode. All project folders and images will have that date number. Your system could be based on event titles, art medium, location, or whatever makes sense to you.
In Summary
- Resize the physical dimensions of the image to fit the maximum width of the content area on your website:
– 1024 x 768 pixels as a baseline
– 1080 to 1100 x 768 pixels for full container widths of 1140 pixels
– 740 to 800 x 768 pixels for containers with sidebars
– 1366 x 768 pixels for full screen widths - Reduce the resolution to 72 ppi
- Compress the image by saving it as a JPG, PNG, GIF, or SVG
- Name the file appropriately
Related Posts
How to Create and Edit WordPress Galleries
How to Resize an Image in WordPress
How to Resize an Image in Photoshop
How to Scan within Photoshop CS6, CS5, CS4
Thank you for sharing this information. The information was very helpful and saved a lot of my time.