Sizing and optimizing your images for the web

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.

Image Mode

001 image mode Sizing and optimizing your 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

002 image size Sizing and optimizing your images for the web

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.

Galleries

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

003 save for web Sizing and optimizing your images for the web

In the top right corner are the settings for choosing the file type.

004 optimized png 24 Sizing and optimizing your images for the web

 

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.

007 preview information Sizing and optimizing your images for the web

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.

005 4 up jpeg Sizing and optimizing your images for the web

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.

008 si logo png 8 Sizing and optimizing your images for the web

 

009 si logo png 24 Sizing and optimizing your images for the web

Views

010 view mode Sizing and optimizing your images for the web

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 (image@2.jpg), 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

011 WP retina 2x Sizing and optimizing your images for the web

 

WordPress re-compression

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.

wordpress media file Sizing and optimizing your images for the web

 

 

No comments yet.

Leave a Reply

11,528 Spambots Blocked by Simple Comments

HTML tags are not allowed.

Share with your friends










Submit