The Grid: A New Way To Design Websites?
I remember developing websites when the web was just starting to take off (mid 90's). Coding HTML by hand and using Mosaic 0.9 Beta as my browser. Over time, tools like Dreamweaver gave us WYSIWYG editors to make things easier. Today, this site is based on WordPress, one of the very successful web publishing platforms that sprung up in recent history to make creating websites and posting content easier still. Themes, plugins, widgets, and other shortcuts means you never have to see the code, or do any heavy lifting. It's a great way to create a site, but you still need some tech skills to get it up and running. I still go into the code to make small changes to the templates and plugins, even making a child theme to keep my changes separate from the parent theme. The beauty is that once running, anyone can post content. It's no harder than writing an email.
Switching themes in WordPress is not trivial, having done this a few times I know that the change isn't seamless. Layout usually looks terrible and requires some effort to fix. It doesn't help that themes have unique features (like shortcodes) that don't work elsewhere, so you may also need to edit your posts. Further, you need a plugin like WPTouch to make the content look good on mobile devices. As good as WordPress is, there is room for improvement.
Today, I saw that a new publishing tool, The Grid, is being developed that hopes to make building a site even easier. Sites look good in any browser or on any device (desktop or mobile), layout can be changed and everything continues to look good and work well. The video below gives a quick into to the service.
https://www.youtube.com/watch?v=OXA4-5x31V0
The Grid harnesses the power of artificial intelligence to take everything you throw at it - videos, images, text, urls and more - and automatically shape them into a custom website unique to you.
AI sounds good, but will it actually work and produce what I want? How much control will I have over the look and feel? Are "layout filters" really different from templates? Will the automatic selection of color palette and fonts look good? Hard to say right now, you can't create a site yet. It sounds good but it is too early to say. If you are willing to sign up now and be a founding member, you pay $8/month and that rate is locked in for as long as you use the service. One launched the service will be $25/month so I'll take the chance that it's something I want to use and start paying now. It won't launch for about six more months, so it's a $50 roll of the dice but that seems like a reasonable amount. You can also get referral credits if you spread the word and others sign up. So visit The Grid and check it out for yourself.
Testing WP Retina 2x Plugin
This post is to test the WP Retina 2x plugin for Wordpress. The image was uploaded at 2880x1500 (603kb). I'm also using CloudFlare and CloudFront with w3 Total Cache so I want to test it out to see if this configuration will actually work. The photo is from my trip to Belize.
Testing Wordpress Carousel V2 (Jetpack)
I didn't use the first version of Carousel for photo galleries on this blog, but the new and improved version seems worthy of a look. It has some great features, as outlined at this blog post, and something I'm testing in this post for myself.
Some of the features I really like:
- Ability to leave comments on individual photos.
- Ability to link directly to an image within a post.
- EXIF data displayed for each photo.
- Apple Retina support. May not be needed that much right now but pixel density will be increasing in displays so this is a handy feature. Also, users of some of the new Apple products can take advantage of the added resolution.
Image Compression Shootout: Lightroom, Photoshop, JPEGmini, and Smush.it
Using the smallest images possible while preserving quality is important because small images load faster. If your site visitors have to wait a long time for your site and images to load they are likely to just move on. There are several methods of reducing the size of your images, here I compare four different methods, though there are certainly other methods (software). I use Adobe Lightroom 4.2 for most of my image management and editing, with some work in Adobe Photoshop CS5 for some extra editing when needed. To reduce the size of my images I most often used JPEGmini but then stumbled across a WordPress plugin called Smush.it, which is an easy way to tie in the web service from Yahoo. Since there is a Wordpress plugin that can automatically shrink your images as you upload them, it seemed like the ideal solution to my compression workflow as it was easy and integrated into the website. I decided to do a quick and rather non-scientific test between Lightroom, Photoshop, JPEGmini, and Smush.it to see which would work the best for me.
I took one of my photos and exported it from Lightroom with jpeg quality at 85, color space sRGB, and width on the long edge 1600. This might be a common way people export photos for posting online and it was my 'control'. The image size is 643 KB, which is certainly not small. This is the image (click for full size).
Running this image through Smush.it, it gets compressed down to 553 KB, which is a minor savings. Note, the Wordpress plugin and Smush.it website produce the same results, in case you were wondering.
However, running the same control image though the JPEG mini site results in an image that is only 234 KB, which is a substantial savings in size over the control and, as promised, no reduction in image quality.
Next, I tried the Photoshop "Save for Web & Devices" option using "JPEG Medium" which was the default. It was also set to JPEG quality 30, optimized, resize to 1600, quality bicubic. The result is a file size only 111 KB in size which still looks excellent despite the low JPEG quality setting.
So it looks like Photoshop's export option may be the best of the bunch so far, but I decided to do a bit more. I exported a few more samples from Lightroom, at JPEG quality 50 which results in a file of 187 KB in size and a slight reduction in quality compared to the Photoshop export which is even smaller. Note that the differences are relatively minor, but present. Best if you can toggle between two images quickly as I was doing on my screen.
I also exported from Lightroom using JPEG quality 30, though I'm not sure if this is directly equivalent to the Photoshop JPEG quality setting. If so, Photoshop's export and resize algorithm must be better than the one in Lightroom. This option yields a file size of 129 KB, which is still bigger than Photoshop's and not as good in terms of quality.
I also tried exporting from Lightroom using quality settings of 65, 60, and 55 and running all of those through JPEGmini to see if I can get smaller results than Photoshop but I couldn't. A Lightroom export at 60 processed via JPEG mini was still 172 KB which is a significant difference over the 111 KB file that Photoshop produced. For Lightroom to match Photoshop in terms of file size, I had to export the file with JPEG quality set to 20. At that point there is a noticeable drop in quality.
You may also be wondering, why not use the Photoshop export then ALSO run it through JPEGmini or Smush.it. I did that and Smush.it could do no better so it left the file intact. JPEGmini reduced the 111 KB file to 104 KB, which is not enough savings to make the effort worthwhile.
CONCLUSIONS
- Smush.it is not worthwhile, it really doesn't compress the images enough. Also, the plugin timed out several times when I was trying to use it and the site is slow. Also, the bulk compression for your Media library doesn't work, it timed out on me several times after only compressing a few images. I'm not planning to use it and have removed to plugin from my Wordpress install.
- JPEGmini does an impressive job of reducing the file sizes of images exported with a relatively high quality. If you don't have Photoshop or find the export dialog or workflow cumbersome JPEG mini is a viable option. It certainly warrants use over no compression or optimization at all. It also does a good job of batch processing images, so you can upload a pile of them and download a zip file of your optimized files. Fast and efficient, and what I have done for many of the images on this site.
- Lightroom can get decent file sizes, but simply via JPEG compression settings. If image size is important, it won't do a good job on it's own. I would export a JPG with a quality setting somewhere between 60 and 85, then run the resulting image through JPEGmini. You will optimize the image enough that it makes the extra step worth it.
- Photoshop does the best job, at least in this limited test. I suppose the most expensive option in this test should be doing the best job. It seems that Adobe have created a very capable and powerful image export option here, use it for the smallest sizes while preserving quality. If you have Photoshop, use it. My only potential issue may be the workflow, though I need to do more testing with it. JPEGmini makes it easy to process large batches of images. Photoshop does have an automation/batch system, I'll have to give it a try to see if it will be as fast as the Lightroom/JPEGmini combo.
BEST: Photoshop Save for Web & Devices. No other optimization needed.
GOOD: Lightroom export with JPEGmini optimization.
CRAP: Smush.it. Not worthwhile for any images.
If you have any comments or suggestions, please leave a comment and I'll follow up.
Testing "WP Retina 2X" Plugin For Wordpress
Now that Wordpress 4.4 is out (and used on this site as of December 8, 2015) I wanted to test the Retina 2X plugin for Wordpress to see how it works and if it makes a difference on my 4K monitor and iPhone. I exported two images from Lightroom, one is 1024 pixels wide, the other 3840 pixels wide (4K).
1024 pixels version below. The blog displays images here at 818 pixels wide, and if you click you get the large version. 
The 3840 pixel version. The theory is that high resolution displays should show a higher quality version than the one above (which is limited by the file size).
