bobbyratliff

Creating structures that automate things people do every day.

Archive for March, 2012

New laptop

I just received a Samsung Series 7 Chronos NP700Z3A. In short, it is a really nice piece of hardware, though the software is a bit of a pain to work with Ubuntu. I’ll write more about that later.

What I like best so far is the high resolution screen. It is a 14″ 1600×900, which is about 132 pixels per inch (PPI) according to the PPI calculator. This is higher than the typical computer screen, at 90 PPI. However, it is much lower than, for example, the screen resolution of the new iPad, which has about 260 PPI.

It came with Windows 7 Home Premium SP1. I ordered it from the Microsoft Store, so it has Microsoft Signature, which means it isn’t loaded with bloatware or other nonsense. It is quite nice to receive a new machine and not have to de-install a lot of “helpful” software. I did a little price comparison and the Microsoft Store was $50 cheaper, plus it had free shipping, and I received a $200 credit for the store. So overall I feel like it was a good deal.

Of course, the first thing I did when I booted it up is install some useful programs. These include some utility programs:

  • Mozilla Firefox
  • Dropbox, to sync my documents from my other machine.
  • KeePassX, for my encrypted password database.

Also some programs to edit my documents in Dropbox:

  • LibreOffice
  • Notepad++
  • Dia, which I am currently using for UML diagrams in computer science class

And some additional programs for computer programming:

Keep WordPress speedy by resizing images

When you upload an image to WordPress, it is stored in its original size on the web server. WordPress allows you to specify an image size. WordPress will create an additional copy of the image at that size and insert that in the page instead.

Here is an example:
Original size: 1858×1233 (652 kB)
Wordpress copy: 1024×679 (336 kB)

This means that when people view your page, they have to download 0.5 times the original file size. This is a smaller file download, and it will help your page load faster.

Point to remember: If you choose a size when you insert an image, it tells WordPress to create a smaller file download. This will help your page load faster.

Resizing images

After inserting an image and viewing the page in a web browser, usually you’ll find that your image is too large. So then you go in the Edit Image window and set a smaller size, e.g. 70%:

This presents a problem: If you use the Edit Image window, WordPress will not automatically resize your image file a second time. It will only display the image smaller. This means that the web browser is still downloading the full size file, but it is just viewing it smaller.

I tried resizing the cabbage image above to 70%. Here is what happened:

WordPress size: 1024×679 (336 kB) — Recall that this is due to our choice of size in the Insert Image box.
New size at 70%: 717×475 (336 kB) — But this image could be 186 kB if I resized the actual file.

See the difference? If you resize an image with the Insert Image box, it will actually save space, but if you resize an image with the Edit Image box, it will not actually save space.

Conclusion

Correctly scaling your images before inserting them into a post will solve this problem. If you are going to be inserting a lot of images, use a test image. Insert a single image and use the Edit Image box to find out what size looks right. Then on your computer, resize all your images to this size before inserting them into the post.

Misc notes

Another thing you have to take into account when viewing images is the maximum width of the content in your theme. For example, this blog (bobbyratliff.wordpress.com) uses the Twenty Eleven theme, where the maximum width is 585. Even if I choose the 1024×769 option, the image width is limited to 585. In other words, it will show the cabbage image as 570×377.

Another solution is to add image sizes to the insert image dialog. If you have hosted WordPress, you can use the Additional image sizes plugin to do it.

Google Page Speed is a great tool for troubleshooting slow sites. It has a list of rules that it evaluates your website against. When your page breaks a rule, it will tell you why and give some clues on how to fix it. The information in this post applies to the suggestion “Serve scaled images.”