Images

Working with images is a vital part of the web design process. Here are some tools to help you work with images. More tools and information can be found under Resources > Visual Design

Image Dimensions

Default Logo
Suggestions: The size will depend on both the logo, theme and if using a slogan

Callouts
Recommend 800 x 600 pixels and less than 10 MB

View or use some of the open-source examples provided.

Database Listings
Recommend less than 16 MB (png, gif, jpg, jpeg)

Index Page Image

  • Must include URL or image doesn’t display
  • Files must be less than 16 MB
  • Allowed file types: png gif jpg jpeg
  • Images must be smaller than 293 x 293 pixels

Events & News Articles

  • Files must be less than 16 MB
  • Allowed file types: png gif jpg jpeg
  • No dimension requirements or limits

People

  • Pictures larger than 1024 x1024 pixels will be scaled down

Sliders

Large Slider

  • Files must be less than 16 MB
  • Allowed file types: png gif jpg jpeg
  • Images must be exactly 1566 x 450 pixels

View or use some of the open-source examples provided.

Mini Slider

  • Files must be less than 16 MB 00px by 100px 
  • Allowed file types: png gif jpg jpeg.
  • Images should be 100 x 100 pixels

 

Homepage Images in Themes

  • Files must be less than 16 MB
  • Allowed file types: png gif jpg jpeg
  • Images must be no larger than 1920 x 1280 pixels

The size of the image used on your homepage should be no wider than 1920 pixels.  The height of your image will depend on the Theme you have chosen. For example some themes, such as: 

  • The Whyte Theme has the largest homepage image - this image should be no larger than 1920 x 1280 pixels.

 

  • The Rundle Theme homepage image should be no larger than 1920 x 450 pixels.

 

  • The Monarch Theme should have homepage images no larger than 1920 x 450 pixels.

 

Compressing Images

Compress your images to limit file sizes. Tiny png and Tiny jpg are a good option to try.

Tiny jpg: Smart JPEG and PNG Compression: Optimize your images with a perfect balance in quality and file size

https://tinyjpg.com/

https://tinypng.com/

Image Hosting & Gallery Options

Flickr Alternatives

There is free image hosting sites out there but they don’t offer easy or customizable options to add to a website. Example: 500px is free (up to a certain amount) but you can only grab a single image at a time and can’t embed a gallery.

I think the best options are to put your images up on any of the big free ones (Flickr, Facebook, Twitter, Instagram, Google Photos) and then use a service to customize and pull in your gallery or carousel. Some services are free some are paid. 

*Note: Pinterest is not that good when it comes to uploading images and create galleries.

Flickr
Pros:

  • Free
  • Highly customizable
  • Responsive
  • Easy to use
  • Tons of features

Cons:

  • Only uses Flickr images

 

Imgur

Pros:

  • Free
  • Easy to paste a single image into the site

Cons:

  • No customization
  • Posting galleries is difficult

Instagram Only

Lightwidget

Pros:

  • Easy to use
  • Tons of features
  • Easy customizable
  • Responsive
  • Lazyload
  • The paid option can be cheap (each widget is a one-time payment of $10)

Cons:

  • Need pro version for https
  • Only Instagram integration

Multiple Platforms

Embed Social

Pros:

  • Tons of features
  • Facebook albums, galleries, and Facebook shop, Instagram, Twitter, Google place photos
  • Many layouts

Cons:

  • Has their logo in the free version
  • Pricey
  • Most features are paid only

SnapWidget

Pros:

  • https on the free version
  • Instagram, Twitter, and Facebook
  • Easy to use
  • Tons of options

Cons:

  • Need to go pro for any real customization
  • Ugly click through page if using the free version

Google Photos

Manual implementation

Pros:

  • Free
  • Almost unlimited storage

Cons:

  • Not many options
  • Not easy for customers to integrate

Overview

  Flickr 500px Imgur Instagram Albumizr Facebook
Cost Free & Paid version Free & Paid version Free Free Free Free
Private Albums     yes   no yes
Limit   Free (20 pictures/week)   n/a   n/a
Features            
Analytics            
HTTPS            
Widgets            
Carousel            
Integration   Dropbox
Flickr
Facebook
Google Drive
Gmail
Instagram
Google Photos
Box
OneDrive
Amazon Cloud Drive
n/a Facebook Tumblr
Twitter
   
Apps   iOS & Android iOS & Android      
Tools for Resizing Images
FREE ONLINE IMAGE RESIZERS

PicResize http://www.picresize.com/

  • Crop images
  • Rotate images
  • Resize to custom width and height in pixels or percentage
  • Batch resize images
  • Define the output format and maximum file size

WebResizer http://webresizer.com/

  • Crop image
  • Rotate images
  • Resize width and height
  • Shows preview of the image
  • Bulk optimizer
  • Modify contrast and exposure

Rsizr http://www.resizr.com/

  • Need to download a Flash plugin
  • Crop image
  • Rotate an image
  • Resize height and width
  • Resize the image to a custom pixel size
  • Save as jpg or png file