Images
In order to manage the site load we optimized all images using the online service kraken.io. In addition to optimizing the images we used a CSS scaling trick on the home page to enlarge the blog images. In taking the mobile first route, we made the main blog images 480px x 683. This allows for much faster loading on both mobile and the desktop. The code used to scale the images can be found in the Deluxe News Pro CSS file. Here is an example of the code use:
figure.containimg { width: 100%; height: 800px; overflow: hidden; position: relative; } figure.more.containimg { width: 100%; height: 587px; overflow: hidden; position: relative; }
Demo images courtesy of: Deathtostockphotos.com and pixabay.com. Animated GIF source videos are available from pond5.com.