Managing Site Images in Hydro

Hydro is a visually-driven template with the ability to display lots of images in different sizes. To ensure your website is presented at its best, we have included a guide of recommended screen resolutions and file sizes for images.

Recommended Image Sizes

Pixel dimensions measure the total number of pixels along an image’s width and height. Resolution is the fineness of detail in an image and is measured in pixels per inch (ppi). The placeholder images are sized to the recommended dimensions for each image type. You can use these as references for sizing your images appropriately for Hydro.

Here is a list of recommended sizes:

Section Recommended Size
Hero Slide 1920×1280
Parallax Banner 1920×1280
Portfolio Thumbnail 720×720
Avatar 360×360
Quote Avatar 360×360

Recommended File Sizes

The file size of an image is the digital size of the image file, measured in kilobytes (K), megabytes (MB), or gigabytes (GB). File size is proportional to the pixel dimensions of the image. Images with more pixels may produce more detail. Thus, image resolution becomes a compromise between image quality and file size.

Another factor that affects file size is file format. Because of the varying compression methods used by .gif, .jpg, .png, and .tiff file formats, file sizes can vary considerably for the same pixel dimensions.

We recommend that you keep your file sizes as small as possible to reduce loading time. Images that are large in file size will slow down your site. The smaller the file size, the better. The faster the site, the easier to visit and index a page.

Google has indicated site speed (and as a result, page speed) is one of the signals used by its algorithm to rank pages. Pages with a longer load time tend to have higher bounce rates and lower average time on page. Longer load times have also been shown to negatively affect conversions.

We recommend using tools like ImageOptim or websites like JPEGMini or PunyPNG to reduce the file sizes.

By compressing your images for the web and keeping them in the right file format, you can dramatically increase your page speed. Many have found that faster pages both rank and convert better.