มารู้จักการ Compress ไฟล์รูปภาพ เพื่อใช้บนเว็บไซท์กัน

ในปัจจุบัน แม้ว่า เทคโนโลยีทางความเร็วของการใช้งานอินเตอร์เน็ตจะสูงขึ้นมาก การเข้าถึงเว็บไซท์แต่ละที่ทำได้อย่างรวดเร็ว และ ตอบสนองผู้ใช้ได้อย่างดี

สิ่งที่ผมจะมาแนะนำนั้น เป็นเทคนิคของการทำเว็บไซท์ให้เร็วขึ้น ซึ่งมีหลาย ๆ เรื่องในการทำให้เว็บเราเร็วขึ้นได้ หนึ่งในนั้นคือ การ reduce ไฟล์รูปภาพ คือ ทำให้ขนาดของรูปภาพเล็กที่สุดเท่าที่จะเล็กได้ อ่านให้ดีนะครับ ขนาดของไฟล์ ไม่ใช่ ขนาดของรูป นะครับ ซึ่งวิธีการที่จะนำมาใช้ก็มีหลากหลายวิธีอีกเช่นกัน เราเรียกรวมรวม ๆ ว่า การ Compress and optimize images for website

ก่อนอื่นมารู้จักศัพท์ของการทำ compress ก่อนว่าแตกต่างกันยังไง ในปัจจุบัน การทำ compress นั้นมีอยู่ 3 รูปแบบดังนี้
1. Lossy compression
2. Glossy Compression
3. Lossless Compression

แล้วแบบไหนล่ะที่ดีที่สุดสำหรับเราในการเลือกใช้ ก็ให้ข้อมูลตามนี้ครับ

Lossy compression
Lossy เป็นตัวเลือกที่ดีที่สุดสำหรับผู้ใช้ส่วนใหญ่ รูปภาพที่ประมวลผลด้วยอัลกอริธึมการสูญเสียเป็นภาพที่เล็กที่สุดที่คุณจะได้รับ ดังนั้นหากความเร็วของเว็บไซต์ของคุณเป็นสิ่งสำคัญและคุณต้องการความสมดุลที่ดีที่สุดระหว่างการปรับให้เหมาะสมและคุณภาพของภาพเราขอแนะนำให้คุณใช้การเพิ่มประสิทธิภาพที่สูญเสียไปต่อไป

Glossy Compression
Glossy เป็นตัวเลือกที่ดีที่สุด หากคุณกังวลเรื่อง Google Insights แต่คุณเชื่อว่าการสูญเสียความเร็วของหน้าเว็บเล็กน้อยนั้นเป็นสิ่งที่ยอมรับได้สำหรับคุณภาพของภาพที่ดีที่สุด

Lossless Compression
ภาพที่ปรับให้เหมาะสมแบบไม่สูญเสียนั้นมีขนาดพิกเซลต่อพิกเซลเหมือนกันกับต้นฉบับ แต่มีขนาดเล็กลงเมื่อเปรียบเทียบกับไฟล์ที่ประมวลผลแบบ Lossy หรือ Glossy หากคุณต้องการให้ภาพของคุณไม่ถูกแตะต้องให้เลือกตัวเลือกนี้

ทางเลือกในการ compress image นั้นมีหลากหลายวิธี ตัวผมเองผมใช้ tools ตัวนึง รันบน windows ชื่อว่า RIOT เป็น free tools ที่โหลดมาติดตั้งบนเครื่องใช้งานได้สะดวกดีครับ ค่อนข้างอัตโนมัติดี ส่วนอีกทางเลือกก็ต้อง online compress ซิครับ แนะนำที่นี่ ผมถือว่า ดีพอใช้ได้ https://shortpixel.com/online-image-compression ง่ายและสะดวก มีให้เลือกใช้ครับผม

ส่วนใครที่ใช้ wordpress เป็นเครื่องมือทำเว็บ ก็แนะนำ plugin ตัวนี้ครับ https://wordpress.org/plugins/shortpixel-image-optimiser/ ของเจ้าเดียวกัน

The Smallest Is The Best!.. As Long As It Serves I

The Smallest Is The Best!.. As Long As It Serves Its Purpose.

by: Decebal Scraba

It is true! In graphics optimization, seen as a part of website optimization, the smallest is the best. Of course, the element in question should still serve its purpose of being the expression of an idea. Furthermore, it should be understandable, clear, suggestive and goodlooking. Letกs see together which could be the right choices (in terms of web graphics optimization) when we decide what type of graphics we’ll use on a website.

What kinds of web graphics are present on the Internet?

When it comes to their origin, there are two types of graphic digital files: vector graphics (created with software tools like Corel DrawTM , FreehandTM etc.) and raster graphics (photographs, 3D renders and any other type of bitmap files). Most of the web sites on the World Wide Web hold as graphic elements bitmaptype graphics in three different formats: GIF (standing for Graphics Interchange Format), JPEG (Joint Photographic Experts Group) and PNG (Portable Network Graphics). All these 3 types use different compression algoritms to considerably reduce the size of the graphic file. Because PNG is not so popular, I hope that you will forgive me if I stick to GIF and JEG in my article. Probably you already know a lot about these (or you can browse the web and find plenty of information) so I’ll get directly to the choices we must make when it comes to design our web site.

How many colors should we use for our web graphics?

What type of bitmap files will hold our web graphics?

Some specialists say that we should always go with JPEG, because it supports 16 milion colors and produces quite small files. Well, this is not entirely true, I think. I can only tell you for sure that we don’t have to go with the same type all over our website. How’s that? Let’s see!

When should we go with GIF?

for graphics with fewer colors: web logos, cartoonlike drawings and lineart (pure black and white) drawings; whenever it is OK to use for our graphics the 256 colors pallette (or even the 216 “safe” colors pallette)

for grayscale pictures with less halftones (with big contrast)

for graphics with smaller screen size (even if with many colors) which rely on details; GIF format compression is lossless and keeps sharp contours and clear definition between areas filled with different colors;

when we need the “Transparency” option of GIF Format, e.g. when a graphic should have a nonrectangular shape and/or we want to discard its background

whenever an image saved in GIF format is smaller than one saved as JPEG, both images being at a comparable level of quality when displayed

generally, for vectorgenerated graphics (unless they have blending and/or gradient fills)

When to use JPEG format?

for color images with 16 milion colors and many halftones (photographs, 3D render output files, any other images with continuoustones)

for grayscale images which rely on subtle halftones

for graphics/images with big screen size where colors and shades are more important than contours, outlines and boundaries

whenever an image saved in JPEG format is smaller than one saved as GIF, both images being at a comparable level of quality when displayed

generally, for photographs and similar images

Which are the inconveniences of each format?

From my point of view, these are the main limitations for GIF and for JPEG formats:

For GIF: limited number of colors (it can show 16 milion colors, but only in dithered mode, which I do not recommend)

For JPEG: compression is done by reducing quality of the graphics (loss of sharpness, “hair filaments”, “pixelate” areas etc.)

Whatever format you choose, when it comes to graphics optimization as a part of website optimization, the SMALLEST is the BEST! Beside the format choice, keep in mind some tips when you create and optimize your web graphics:

Minimize the screen size of your graphics to the point where it is still clear and suggestive.

Try and try again saving a graphic in one of the two formats, at different quality levels (for JPEG) and different number of colors (for GIF). Do this until you find the best size / quality ratio that fits your needs.

Use vector graphics software and limit the number of colors when you create the nonphotographic graphics for your website.

Put emphasis on shape, contour, silhouette and contrast when creating / processing your graphics.

Choose carefully the resizing method in your image processor when you change the size / resolution of your graphics “antialias” is not always the best choice.

I hope that this article will help you in your work and always keep in mind that, when it comes to graphics optimization and website optimization, the smallest is the best as long as it serves its purpose.

Decebal (Dudi) Scraba

http://ewolwe.com/

About The Author

Copyright 2005 Decebal (Dudi) Scraba

Graphic Designer since 1994, Web Designer and Website Optimization Specialist

http://www.ewolwe.com/

[email protected]

This article was posted on January 09

by Decebal Scraba

Digicam File Formats

Digicam File Formats

by: Jakob Jelling

Looking at the digital camera, a person can visualize it as a combination of a camera along with a miniature computer system that stores the images as files or sets of bits, rather than a chemically treated film. Thus it comes to be a fact that there are certain file formats in which these images of the photographs captured by the camera are stored. And again, this is subject of discussion for understanding the digital camera properly. In this effort this discussion reveals the intricate but overlying to provide a brief overview to the readers regarding the file formats of the digital cameras.

Basically, strictly considering the facts, there are three file formats used by digital cameras to create images of photographs taken by them. These are JPEG, TIFF and RAW. These are the names of the formats but like their strange names their identity remains in the dark if these are not conversed in a little detail. The most vastly and commonly used file format for digital cameras is the JPEG file format. It is time and again the lone available file format on primary and some intermediate standard digital cameras. Many sophisticated digital cameras allows the users to opt for between JPEG, TIFF and RAW. However professional photographers usually prefer to shoot RAW. Yet the discretion remains with the human preference only.

It is a fact that the acronym JPEG stands for กJoint Photographic Expert Groupก after the group that developed this file type. To make things easier it must be clarified that JPEG is a compression technique that can considerably trim down the file size of a photograph and other unremitting tone images. Almost all digital cameras have a number of JPEG compression levels and quality settings to select from. The users can make use of them as per discretion and the photograph taken. Thus the jpeg images do not consume much space on a memory cards. Another specialty of this digital camera file format is that JPEGs store camera settings and scene information. All these advantages make this file format so popular and diversely accepted.

The next digital camera file format is the TIFF (Tagged Image File Format). This file format has the greater advantage that it does not lose any image file information during the compression process and moreover as a consequence it does take up a lot of space from a memory card in comparison to a JPEG image. Due to this detailed storage it also takes additional time to retrieve the information to the card. Basically the TIFF compression reduces images to about onethird their original size as per convention.

Coming to the next digital camera file format. It is defined as the RAW file! It is also sometimes referred to as an appropriate digital negative. Most advanced digital cameras allow or permit the ability to shoot RAW in professional standards. The interesting portion is that in a RAW image no alterations are made by the camera (such as sharpening or white balance). And this gives entire control to the photographer when he or she processes an image later. However this RAW file format is not used extensive due to the fact that most image editors cannot open it and computerprocessing time is also more. However the fact still remains that a RAW image has a smaller file size than a TIFF.

With all these discussions regarding the different digital camera file formats, it is clear that the three most widely accepted file formats have their own advantages and disadvantages, yet they are unique in some way or the other that makes them special in their own manner. The knowledge about these digital camera file formats of storage not only yields greater understanding of the camera; it also opens the eyes towards the fantastic results of technological advancements in our daily lives.

By Jakob Jelling

http://www.snapjunky.com

About The Author

Jakob Jelling is the founder of http://www.snapjunky.com. Visit his digital camera guide and learn how to take better pictures with your digicam.

This article was posted on October 20, 2004

by Jakob Jelling

Basic Web Design Principles

Basic Web Design Principles

by: Zoran Makrevski

Home Page

Home page should clearly indicate what the site is about. Provide top level navigation on the first page, your logo, and tell to the visitor what he can found on your web site. Your home page should be informative, and should call your visitor on action. Home page is the place where the visitor decides what he will do, click on some of your links, or leave the site. If you have a discount, or if you offer some free service in attempt to make a contact with potential customers, make sure to provide link to that service on your home page.

If you decide to implement flash intro on your first page, make sure to give the user possibility to skip the flash intro. The link ขskip introข should be outside of the flash, because you will force the visitor to wait until the Flash movie is loaded.

Navigation structure

Place the navigation on the place where the people are used too look for it. Don’t experiment with the navigation! I can’t stress enough this. Keep the navigation system same on ALL pages. Visitors are not ready to learn your site navigation system. Consistency is the most important thing here. You should focus your effort on building consistent rhythm across all pages of your site.

Font size

Your font size should be enough big so your text can be read without effort. There are many people who will not bother to read very small letters. Don’t loose your visitors because of font size. Optimal size seems to be 1213 points. Visitors should be able to read your text easy, without any effort. Broke big chunks of texts in paragraphs and make them easy to follow.

Line Length

The length of a line of type should be comfortable to read. The optimal line length for printed materials seems to be about 10 to 12 words, or 60 to 70 characters. Somewhat shorter lines of about 40 to 50 characters may be more appropriate for larger displays. If the line is too long the reader must search for the beginning of it; if it is too short it will break up words or phrases awkwardly.

Creating emphasis

Creating emphasis is an important and integral part of designing and typesetting. Handled with taste and good judgment it can help direct and inform the reader. When these qualities are lacking, or someone feels that every word is important and must be emphasized in some way then your web page starts to look like a battlefield and becomes difficult to read!

Graphics

It’s well known that one picture worth more than million words. This rule applies on Internet too. Do your best to show clear, attractive photo of your product. If you offer a service, find a photo which will best describe him. However, be careful about file size. Don’t compress your photo to that level to not be clear, but also don’t leave the photo on full quality. That will make file size too big, and will increase download time.

Gif vs. JPEG

Less experienced web designers many times use wrong format to store their picture. Here are few guidelines which will help mistakes to be avoided. If your photo has small number of colors (less then 64) GIF will be better choice. Make sure however to reduce the palette size too. That is, if your image have1015 colors only, reduce your palette on 16 or 32 colors.

Also, if your image contains text, GIF format should be your choice. JPEG use loosy compression method and will cause text and edges to become blurry.

If you are saving a photograph – save it as JPEG

JPEG images can contain over 32 million different colours. That is much more than the human eye can see.

If you want to incorporate large text into a photographic image, JPEG may be a good format to use. While the edges may still get blurred, danger of it becoming unreadable is slim. If you think your image is more important than the text, go ahead and use the JPEG format.

Speed

Do your best to reduce the download time. We live in a busy world and people are not will to wait long time. Try to reduce size of your graphics as much as possible without to destroy the image. Image must look good, but size (in KB) should be as small as possible.

Test before publishing

Do your homework, and do it well. Your visitors will not bother to send you an EMail that some of your links does not work or that some of your images does not appear. Even if someone do so, it is quite embarrassing. Perform spell and grammar checking. Remember that in many cases visitor will build his opinion about you or your company on base on your web site. When published, site should not contain any ขunder constructionข or ขcoming soonข messages.

About The Author

Zoran Makrevski is founder and CEO of SEO.Goto.gr.

Since 1998 has focused on ECommerce and attempts to bring more traffic to the customer sites bring him in the SEO industry, and he is running his own company today.

Search Engine Positioning Firm

SEO.Goto.gr

This article was posted on October 26, 2004

by Zoran Makrevski

JPEG and GIF the differences

JPEG and GIF the differences

by: Maricon Williams

JPEG and GIF image formats are both compression based formats. They are the most widely used and supported image formats for web. They take an uncompressed image such as bitmapped image and compress them to a smaller file size. A lot smaller image size is moreover the result of this conversion. It may seem that one compression may result in smaller file sizes, nevertheless that is simply not the case. Now where lays the difference?

JPEG stands for Joint Photographic Experts Group. It supports 16.7 million colors. It is ideal for photographic images and high quality images. JPEG is a lossless method of compression or in common parlance, when the program that creates a GIF squashes the original image down to ensure not to lose any data. It uses an easy substitution method of compression.

GIF on the other hand, stands for Graphic Interchange Format. It supports only a maximum of 256 colors. It is the only alternative to make an image animated unless you want to use Flash. Between GIF and JPEG, only GIF allows transparency. GIF is good for images with flat expenses of color. It can be use for logos, titles, button, etc. The maximum compression of GIF depends on the amount of repetition there is in an image. A flat color can compress well to even one tenth of the original size while a complex noncompetitive color will save approximately 20%.

GIF format is good at compressing images with a small number of colors with no gradations. In actual fact, most web graphics are saved in GIF by contrast when applied to JPEG, it usually results in images which are larger than their GIF counterparts and may appear corrupted.

Each image format has its own advantage. GIF may win out with the nondithering, fewer color images while JPEG is excellent for dithered continuous tone images. An example to this is a photograph with several colors, shadows and even gradations. All these colors and shades call for the JPEG format.

JPEGs disadvantage is that it throws away parts of an image to save space. Apparently you just can’t discard any piece of information so what JPEG does is divide the image into squares. GIF is short of colors, that’s a blatant fact. Another disadvantage is that, Unisys discovered that it owned several patents to key parts of the GIF compression technology and has started demanding fees from every company which uses the GIF code. This is the reason why progress was muffled. Now that you already know the difference, you can now pick what’s good for you.

About The Author

Maricon Williams

I love reading. Give me a book and Iกll finish it in one sitting. Reading is the chance to be transported to a different world and so is writing. Iกm more enthusiastic about writing however, since you can relay your ideas to someone else. I can only imagine that feeling when I hear a complete stranger talking about my ideas which read on an article somewhere. To relay my message to as many people is the same as touching people with music. Only mineกs less harmonic. I try to make up for it with the color I bring with words. And most of the time, it’s more than enough.

For comments and inquiries about the article visit http://www.ucreative.com

[email protected]

This article was posted on March 07

by Maricon Williams

Image FormatsGIF, JPEG, BMP

Image FormatsGIF, JPEG, BMP

by: Stephen Hames

When browsing the internet you are likely to come across many different image formats. However, the most common formats are: CompuServe GIF, JPEG, and Bitmaps.

CompuServe GIF

GIF stands for Graphic Interchange Format and was standardized by CompuServe in 1987. The very first GIF format was GIF87a and saves images at 8 pitsperpixel with a colour level of 256. Then in 1989 CompuServe updated the GIF format to include animation, transparency, and interlacing, which was called GIF89a. Apart from animation, transparency, and interlacing there is little difference between to two.

JPEG

The JPEG image format was developed by Joint Photographic Experts Group. JPEGกs best feature is the compression, you can compact the image file to make it the size smaller (bytes). The problem with this format is that there is a tradeoff details detail and size. Generally its best to save JPEGกs at 50% compression.

Bitmaps

Bitmaps was invented by Microsoft (everyoneกs favourite company). The Bitmap format saves your image pixel for pixel, in other words, what ever you see on the screen before you save is what you see when you open the image again. The only drawback is that the file sizes can be extremely large, which may result in longer download/upload times

About The Author

Stephen Hames

I run and operate a web template website called SJH Designs, http://www.sjhdesigns.co.uk

This article was posted on August 08, 2004

by Stephen Hames