Properly sized images can have a big impact on site performance and speed. Especially with mobile devices, not everyone is always on a high speed internet connection. A slow loading site will cost you visitors so getting control of image sizes is important.
This article will cover best practices when saving and sizing images for the web.
Before you save an image, make sure your Image Mode is set to RGB. Adobe 1998 and CMYK do not display well on the web. You can check the image mode Image > Mode
Sizing the image
Before you size an image for the web, you’ll want to make sure the image file isn’t too large to begin with. Size images no more than 1024 pixels on the longest side is good. This is a good size for gallery images
If you are using an image for a full page background, then those would be a little higher. Keep these images 2000 pixels on the long side or less, however this could vary by theme.
File formats: JPG or PNG
When to use JPG
JPG’s are best for photos. JPG’s are “lossy” which means some data is discarded from the image to reduce the file size.
When to use PNG
PNG’s are used for graphics, like logo’s, background patterns, icons and anything with a transparent background. PNG’s are “lossless” which means all the color information is retained. This also means a bigger file size.
Keep galleries to 20 images or less. Galleries with too many images can effect page load time dramatically especially on mobile devices with a 3G or 4G speed.
How to save images for the web using photoshop
Photoshop has a Save for Web option that is much better for web optimization than just resizing and using the ‘Save As’ command.
In the File menu, go to File > Save for Web
In the top right corner are the settings for choosing the file type.
You can adjust file type and quality and a preview will be displayed with information on the file type, image size and how image size will affect load time.
There is always a trade-off between file size and quality. Photographers understandably choose quality over size, however when images are too big, page load time can be painfully slow. As you toggle the quality slider, you can preview the effect on page load time.
With JPG’s, choosing the ‘Progressive’ option means initially a blurry/lower quality image will displayed, then become clearer as the image is fully downloaded.
There are two options for working with PNG’s: PNG-8 and PNG-24.
PNG-24 is a much higher quality file, which also means one of the downsides is the file size.
Different view options are available that let you see the different quality and options, and how they will affect loading times. Each tab shows you the file type, size, quality and loading time of the image based on internet connection speed.
The Original tab shows the original image preview along with file and size information. The Optimized tab shows the optimized image preview.
Both the 2-UP and 4-UP tabs display different options for quality and size which lets you experiment with quality settings and see the effect on final image size.
What about Retina Devices?
Retina devices like Apple’s iPad and iPhone display everything at a much higher resolution. For websites this is more than twice the resolution. On the surface the easiest thing would be to upload every image at double the size, however this isn’t ideal since it would significantly affect load times.
Some WordPress themes have Retina support built in. The graphics on HiFi sites make use of icon fonts for things like social media icons and other graphics so they are optimized to display nicely on Retina devices.
Apple recommends creating two of each image, one sized for normal devices (image.jpg) and one sized for retina devices (email@example.com), then larger image would be displayed to retina devices only. Saving two versions however can be time consuming.
A better solution for WordPress users would be a Retina Plugin options, that make it easier to display Retina versions of your images. The Retinamatic plugin and the WP Retina x2 plugins are good options
WordPress generates exact pixel size images for post and pages based on the settings in the admin panel. When you use an image at any size other than full size, the image is being re-sampled using the default settings you have chosen under Settings >Media.