Tag Archives: Photoshop

Tips to Save Bandwidth

Save the rainforests, and save your bandwidth – bandwidth, if you don’t know, is the amount of data that can run through your server at one time. Hosting companies will typically limit the amount of bandwidth you can use, and being careful means your site can keep operating as quickly as possible for anyone who visits it, including polar bears.

Bandwidth Usage

If your site loads more easily, that means you can process more browser requests at the same time and that you are generally conserving. No reason to run servers too hard and burn up energy – plus, obviously, it costs you money and slows down the speed at which your site loads.

For this piece I used information from a Jean-Baptiste Jung article for Cats who Code and an anonymous piece from Calomel.org.

Bonus Tip! Bonus bandwidth-saving tip: stop looking at the site yourself. You’re just using up your bandwidth. Also carefully vet people before allowing them to visit your site. Put up a pop-up on your landing page: “Are you sure you want to use up my bandwidth?” with “Yes, I’m Selfish,” and, “No, I’m a Good Person” buttons.

Tip 1: CSS Rather than Images

All the popular browsers are now able to pull up the complexities of graphics built with CSS, and CSS will use much less bandwidth than an image file will.

Some older browsers can’t view CSS graphics accurately. You can use the below piece of code to enable viewing for users of Internet Explorer 6. You’re forwarding them to an alternate stylesheet so that people who haven’t updated their software since August 27, 2001, can view your website just like everyone else. I still use IE6 myself. What’s all the hoopla about these new browsers and new versions? Twelve years later, I’m still sold. It’s called loyalty.

<!–[if IE 6]>

<link href=”ieonly.css” rel=”stylesheet” />


Tip 2: Compress Your Data

You want all the information on your site to be as tightly composed as possible. Data compression involves using code with fewer bits/bytes. (For the uninitiated, there are typically 8 bits in 1 byte, similarly as with letters and words. The functionality is similar to words too – to increase efficiency and memory by transferring data in small groups.) You can save up to 80% of bandwidth by compressing. You can also save up to 80% of room in your house by compressing your belongings.

Your server will typically have a module to allow for compression. For example, with lighttpd and Apache, the module is mod_compress (also a demand you can make to a “mod” individual to make themselves smaller and more manageable).  Newer releases of Apache version 2 also have a mod_deflate module (a very cruel thing to demand of a “mod”) that allows you to compress specified file types. You can compress CSS and HTML up to 90%. Do not compress the jpg’s though: they are already compressed.

Any page that you compress using mod_compress – and the reason this command is particularly useful – will be saved on the server. It compresses once and keeps the file for repeated use when it receives an additional request from another user.

Compression, unlike teaching emotionally-disturbed children how to steal from their parents without getting caught, has a downside. The server must package the data, meaning that encrypting and decrypting must take place locally. Your energy use on your server will still be affected then in CPU – but it’s not substantial. It doesn’t take more than a few seconds to compress a typical website. (A human being usually takes 7 to 12 minutes to compress, by comparison.)

Tip 3: Optimize Images

OK, so you’ve implemented CSS wherever you can. You still have some images though, because hey, everyone needs to see pictures of your custom dining sets (frankly, much less important than most custom dining set shops realize).

Optimize the images. Photoshop contains a “Save for Web” feature. This option reduces the size as much as it can without significantly losing quality. It’s like a brain without all the meat and blood – like a robot image size decider without a hormonal imbalance.

You can also use a free online service to reduce your image size. Here’s one called Smush It, per Jean-Baptiste. Here, as well, is a plugin for WordPress, if you use that (automatically “smushes” everything you upload). Men, here’s a good pickup line: “Baby, I want to make you an Internet star, but first I need to smush you … repeatedly.”

Tip 4: Caching & the Expires Header

Consider caching when you design your site. The way to control caching is via the Expires HTTP header. The header lets browsers know how long the content is valid, after which it re-accesses the server to check if the object has updated. OCD browsers, though, will keep checking and rechecking the server regardless whether it makes any logical sense or how many times you tell them they’re not helping.

Caching means that the data is stored locally on the site visitor’s machine. What this process allows is less reliance on your server to repeatedly deliver the same material. You not only minimize bandwidth usage with caching. You also greatly increase page load times, which is popular among people who aren’t using the Internet to develop patience so that they no longer need to use the stress ball their court-appointed physician demanded they use during probation until “marked progress” was evident.

Elements of the page that can be given longer expiration periods include logos, headers, and navigation bars.  Other parts of pages that change frequently should be given shorter expirations. Ranch salad dressing should be refreshed any time you have out-of-town company.

You can set expire times typically in three different ways: absolute, last access, or last modification. Absolute is a specified time without additional parameters, whereas access relates to when the data was most recently viewed by the user, and modification refers to when the server most recently updated the content.

The below code contains a sample tag for use on Apache servers. The tag would automatically refresh content after 2 hours, which would make sense in a case where you know that certain data will update at that interval.

# Expires mod

ExpiresActive On

ExpiresDefault “access plus 2 hours”

Tip 5: Prevention of Bandwidth Theft

It’s good to be generous with your bandwidth, which is why you should freely allow hotlinking on your site. A hotlink is when a person refers to your page and loads an image or other content located on your server to present on their own site. In other words, it means they are using your server to load elements of their own webpage.

The way to fight this is to create an image that says, “Don’t Steal My Image” or “Free Hotlinking Image – Please Post to Your Social Media.” You could either store it on your server or on a free image hosting site (the latter would be better because then they aren’t accessing the image even the first time it’s used).

Once you have created the image, save this code to your .htaccess file (updated with your own stuff of course – specifically, be sure to change “yourdomain.com” to “cutepicturesofkittens.xxx”).

RewriteEngine on

RewriteCond %{HTTP_REFERER} !^$

RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain.com [NC]

RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain2.com [NC]

RewriteRule \.(jpg|jpeg|png|gif)$ http://yourserver.com/yourimage.gif [NC,R,L]

Tip 6: Minimize Connections by Users

Each object on the page represents a different connection. If you minimize your number of objects per page, your server will not be bombarded by requests every time someone accesses the site. For this reason, you probably just want to have some text in the middle of the page and that’s it. No media. In fact, you may not want to have anything on the site at all. Say to your customers, “There’s nothing on our website, because I respect your time.”

Number of connections doesn’t just apply to your own content. It also applies to advertising. If the server related to the advertising is not as fast as your site is, it will slow everything down. Typically, pages will load on a browser in order as they appear in the HTML file. Placing a bunch of ads at the top of your site will make your site itself look slow to whoever is viewing it. If ads are slow, consider placing a pop-up on your site that says, “Please wait while these guys I know try to sell you some stuff.”

Tip 7: For Huge Files, Use a Third Party

Obviously huge files take up a lot of bandwidth. No need to have those files on your server. A service like Dropbox can be used to host images that you’d rather move off your own server. Dropbox is a system built for large files, so it’s a great option when you don’t want to overload your own.

Examples of good files to host on Dropbox are all your customers’ personal information in unencrypted form in a file named “Highly Sensitive Information of Rich People.” You also may want to use Dropbox for your “Huge Amount of Uncompressed Nonsense” file.

Tip 8: Eyes Out for Bots

Bots like to look at your data as frequently as possible. If you do not want certain pages to be indexed, place them in the robots.txt file. You can keep the Google bot that looks for images from scanning yours, for example.

Your modified date/time is listed for each page, which is typically the last time you updated it. This information goes out to the bots as well as humans. The bot won’t recheck a page if it sees the page is unchanged. If you want bots to take another look, change HTML files to reflect the current time. The bots are awaiting your instructions. They are here to please you. All they ask if that you give them everything you have, except your heart. They will come later for your heart.


Hopefully a few of those tips will be useful for you. Save that bandwidth. Make yourself sleek and efficient. Smush everyone and everything in your path, including the bots.

by Kent Roberts and Richard Norwood

Speed Up Image Editing Workflow For Your Website

Providing visual impact for your blog or website is one of those tasks that can become really arduous. Why? It’s nobody’s favorite thing to scour the internet for free use images, correctly attribute them, clutter up your hard drive, and work out the best work flow for image labeling, social media sharing etc. The list goes on, and for the most part, those of us in control of publishing things for our web page – are not web designers.


Online Photo Editor for WordPress Websites or Blogs

Edit your pictures online and add them to your WordPress website or blog. It’s easy to do with PicMonkey!

Juliana Payson‘s insight:

Angela Wills goes through a step by step on how to use PicMonkey in this Video. The important thing about an online picture editor, is that it doesn’t add more software to your hard drive . I find even the ultimate software for image editing – Photoshop, is frustratingly cache consuming, and obviously nothing similar for blogging on the run using your android device.

To capture screens on mobile phone you’ll find a list of apps, Similarly on Firefox there will be different add-ons, and to capture screens in Chrome, you can check out the following …

Juliana Payson‘s insight:

For those of you who can’t step up to paid tools like Snagit and Camtasia by Techsmith, FreeNuts weighs up the pros cons and overall usability for browser based screen grabbers. I have recently switch to Chrome, and particularly love the way I don’t have to worry about data management on my hard drive. In Chrome, recently downloaded files have a short cut right in the browser window which you can drag into form fields when you want to re-upload them to your website.

Finally I wanted to feature some web based image editing software, here is a top list recommended by 6revisions.

From sixrevisions.com – 2008

Web-based image editors have several advantages to its desktop counterparts. The most obvious benefit is that they allow you to work on any computer.

Juliana Payson‘s insight:

Although this is one of Jacob Gube’s old articles I included it as a starting point to show you there are still evolving options out there that avoid you having to fork out for Photoshop. I’m sad to say Pheonix an advanced image editor from Aviary is no longer available. Pixlr seems to be the most robust tool out of all of them, but is sadly lacking the community and image-sharing aspect that was so integral in Pheonix. For now, my image capture-editing-storing is a two step process that involves re-upping content onto my G+ profile.

Write back and let me know if you found alternative ways to speed up your online image workflow process. I’m sure our fellow webmasters and website owners will appreciate the tips. Hit me up on Google Plus or leave a comment for me to follow up and investigate. – Juliana




Retro and Vintage Photoshop Tutorials

vintagetutorials.jpgAhh Retro…what a bizarre concept. It’s incredible to imagine that simply because something was fabricated in an era before our own, regardless of what it is, that it could suddenly acquire a brand new level of kitsch value.

With little to no discretion, vintage has sort of taken over. Those tight Levi’s and old school Nikes are no longer the uniform of the bleak hipster ‘sub’cultures. Recreations of vintage t-shirts are sprawled across popular clothing chains like American Eagle or Hollister and the even that plain, brandless hoodie from American Apparel has become an advertisement of its own. Old pop cans are ‘vintage chic’; toys, cookbooks, plates. It doesn’t matter what the item is, as long as it’s old it can be blessed with the funky, avant-garde image that is close to impossible to emulate. Although it sounds oddly oxymoronic to say, vintage is in, so it is probably useful to learn a few vintage tricks of the trade for Photoshop; see how close you can get to the real thing.

Smashing Magazine has a slew of Vintage and Retro Photoshop Tutorials for your creative pleasure. Smashing Magazine also has an excellent article about the merits of using vintage styles in web design.



Superb Internet offer VPS packages at affordable prices.