Online education portals like Udacity and Coursera are really changing the world of remote learning in significant ways. By making free and high quality education accessible to a global audience, these platforms are opening up undreamt of possibilities for communities around the world to improve, grow, and prosper in the digital economy of the 21st century. Education at top tier colleges and universities has traditionally been a social and economic privilege, but now anyone can join in the learning revolution by sitting in virtual classrooms with the world’s best and brightest educators. Whether this involves learning how to code and build smart phone apps, or starting up a new business, or learning about public health literacy, the sky is the limit of what’s now possible.

Everything about Web and Network Monitoring

30 Tips to Optimize HTML/CSS/Images for Smooth Web Experience

by | Jul 16, 2011

Do you want your customers and/or employees to have a speedy, no-hassle end-user experience when they use your website or server, respectively? Of course you do – because an unsatisfied end-user means lost business – as in the case of a customer – or a really annoyed employee – as in the case of a server.

That’s why Paid Monitoring — the 100% Cloud-based, complete, and flexible IT monitoring solution that consolidates back-end monitoring, application monitoring, website monitoring, and cloud monitoring in an all-lin-one, central monitoring service (that was a mouthful) — has put together this collection of tips for optimizing HTML/CSS (Cascading Style Sheets) and images. In order to check the effect of these tips Website administrators can use Paid Monitor’ instant web page load test or use real browser full web page monitoring.

So, here are some ways to speed things up:

Tip #1 – (IMG) Compress Images

(https://www.ampsoft.net/webdesign-l/jpeg-compression.html)

By compressing all images in a website, your portal will load faster and decrease the amount of space used to store that size. Compressing an image involves decreasing the size in bytes for the file without significantly decreasing the quality of the image.

Tip #2 – (IMG) Set Image Resolution to 72dpi

(https://www.websiteoptimization.com/speed/12)

Don’t let image disasters happen to you. Set the size of all images on your website to 72dpi and the page will load faster. Plus the quality will not be diminished. If an image resolution is greater than 72dpi, it will take longer to load and will also increase the disk space used on the web server.  This is particularly important for sites with multiple pictures.

Tip #3 – (IMG) Optimize GIF, JPG, PNG files

(https://www.websiteoptimization.com/speed/tweak/png-optimization)

Optimize GIF, JPG, and PNG files so that you can increase the load speed for a website.  This can be done with a number of graphic optimization tools, for example, PunnyPNG, Web Resizer, and SuperGIF. By not optimizing images on a site, images will consume a lot of bandwith to load and you’ll drag out your total load time.

Tip #4 – (IMG) Strip meta data from JPEGs

(https://www.webdesignbooth.com/12-really-useful-image-optimization-tools-for-web-designers)

One of the ways to decrease the size of a picture is to remove the “meta data” from the files before loading them on a website.Image meta data are stored on any picture, and includes: date taken, camera model, flash used, GPS position, etc. Another good reason for removing picture meta data is for privacy purposes.

Tip #5 – (IMG) Link Thumbnails to Larger Images

(https://universalusability.com/access_by_design/images/thumbnails.html)

If you want to place large images on a website, the best option is to use “thumbnails” that link to them. This allows a user to decide whether they want to wait for the large image to load or if the thumbnail picture is sufficient enough to use. The biggest advantages in linking thumbnails to larger images is that websites load faster because most thumbnail images are a lot smaller in size.

Tip #6 – (IMG) Use Proper Image Formats

(https://www.r1ch.net/img-formats)

For website optimization, it’s really crucial to use the proper image format for all images.  Basically, there are three common formats that should be used; JPEG, PNG, and GIF.  All three formats have their own benefits, and usage. Some are great for line art, others for text and screenshots, while others for general web graphics, etc.). If you use the wrong image format, your images will be distorted and unclear, and will also slow down the speed of loading a website.

Tip #7 – (IMG) Save HTTP Requests by Combining Images

(https://www.websiteoptimization.com/speed/tweak/combine)

Pictures that are placed adjacent to each other on a website should be combined into one image in order to decrease the number of HTTP requests.  HTTP requests require going back to the server every time, and that can increase the number of delays.  This type of delay is eliminated by combing images together. The negative with combining images is that the file size for that particular image becomes larger, but with the right format and compression, loading speed is not compromised.

Tip #8 – (IMG) Use Styled Text Instead of Graphic Text

(https://www.websiteoptimization.com/speed/tweak/text)

Graphic text is text that has been converted into an image. Unfortunately, that can slow down the loading time of a website.  Using graphic text will also require additional HTTP requests and increases page weight.  By using style text, such problems are eliminated and create additional advantages, for example, better SEO rankings, lower maintenance costs, faster downloads.

Tip #9– (IMG) Don’t Scale Images

(https://developer.yahoo.com/performance/rules.html#opt_images)

It does no good, and it’s a waste of time. Setting image display size in the <img> tag will not decrease the amount of bytes transferred: a big image will still use the same bandwidth and will be scaled in the browser.

Tip #10– (IMG) The Fewer Graphics the Better

(https://www.freemarketingzone.com/website-design/web-graphics.html)

Other than sites that are used strictly as an image gallery, it is recommended to use fewer graphics in order to speed up a website.  A site should have no more than four to five, and each image should also be optimized.

Tip #11– (CSS) Don’t Group Selectors with Common Declarations

(https://www.websiteoptimization.com/secrets/css/group-selectors.html)

By merging common declarations into separate classes, CSS (a new feature being added to HTML that gives both Web site developers and users more control over how pages are displayed) can be dramatically optimized. This is possible because of the ability to assign multiple classes to one element, which is supported by a multitude of browsers. Referencing multiple classes provides better options for styling content, and allows elements that share the same styles to be grouped into one shared class.

Tip #12– (CSS) Group External CSS Files

(https://www.websiteoptimization.com/speed/7/)

In order to minimize HTTP request, grouping external CSS files can have a drastic impact on the load speed of a site. There are several methods to achieve this but it is better to include them directly in the XTML pages.

Tip #13– (CSS) Group Selectors

(https://www.websiteoptimization.com/speed/7/)

A good method to applying multiple declarations to multiple selectors is to combine the grouping of selectors that share the declarations and declarations that share the same selector. The result is a compact and more powerful set of CSS rules.

Tip #14– (CSS) Use Descendant Selectors Without Class Selectors

(https://reference.sitepoint.com/css/descendantselector)

Because the descendant selector is used to match all elements that are descendants of a specified element, it makes it more efficient to use descendants to get more specific without the use of class or ID selectors. Class selectors would only be more efficient if there is a requirement to encode styles into names and to use them in the rules.

Tip #15– (CSS) Utilize Inheritance

(https://www.websiteoptimization.com/secrets/css/inheritance.html)

By using an element to inherit the properties of its parent element, the child elements will inherit the same family from the body rules. Specifying an inherit value will cause the element to gain its parent’s computed value for the property in question.

Tip #16– (CSS) Practice the Use of Value Replication

(https://docstore.mik.ua/orelly/web2/css/ch07_03.htm)

By using value replication for borders, border colors and other graphics, you can save space needed for a site. Using one value can apply to all four sides, which enables the replication to be more efficient.

Tip #17– (CSS) Use Shorter Class and ID Names

(http https://www.websiteoptimization.com/speed/7/)

Utilizing long class names can add additional bytes to a site, and slow it down in the process. Long names are great for allowing designers to understand them more clearly, but using shorter class and ID names can be more beneficial in the long run.

Tip #18– (CSS) CSS Comments Should Be Removed

(https://www.websiteoptimization.com/speed/7/)

The best method to decrease the overall size of a site is to use PHP comments in the CSS, which once parsed correctly, will automatically remove the comments. Besides, once you become familiar with a site’s layout, you won’t need to add comments.

Tip #19– (CSS) Abbreviate Hexadecimal Colors or Names

(https://www.websiteoptimization.com/speed/7/)

Shorthand hexadecimal colors are supported by most browsers, and can be the most efficient method to specifying colors within a site to ensure it is at its minimum size possible. Unless the name of your colors is shorter than the shorthand-named hex colors (navy, purple etc.), it is better to go with the latter.

Tip #20– (HTML) Enable Standards Mode by Using a Strict DTD

(https://www.w3.org/QA/2002/04/valid-dtd-list.html)

Strict DTD (Document Type Declaration) not only tells the HTML validator which version of (X)HTML standard the web page coding is supposed to comply with, but it also tells the browser how to render the page in standards-compliant mode.

Without strict DTD, browsers can often misinterpret the markup language that the site is written in, thus slowing down the speed of loading altogether.

Tip #21– (HTML) Too Much White Space Isn’t Good

(https://www.websiteoptimization.com/speed/3/)

Removing whitespace from a site’s codes will not alter the appearance of the pages, but will make the site slightly smaller and run faster. Depending on the size of the page itself, the savings can be very beneficial to improve the site’s speed and performance.

Tip #22– (HTML) Omit Redundant Tags and Attributes

(https://www.websiteoptimization.com/speed/3/)

Redundant tags and attributes will often increase the size of a site, and will also decrease its performance. The best option is to strip away or omit any redundant tags and attributes left over by many web development programs. Your site will be leaner and faster.

Tip #23– (HTML) Use Descriptive ALT Values

(https://www.websiteoptimization.com/speed/3/)

Alt values (those messages you see when you mouse over an image) can often be worded too generically and be too long. This can cause havoc when optimizing for search engines, but can also increase the size of the page.

Tip #24– (HTML) Use Less Meta Tags

(https://www.websiteoptimization.com/speed/3/)

Using Meta Tags, other than for the purpose of a site description or keyword tags, does not add value to the site and affects the overall size of pages.  Adding conditional Meta Tags can be effective to identify pages, but it can also slow down a site’s performance.

Tip #25– (HTML) Remove All Comments

(https://webdesign.about.com/od/speed/qt/tipspeedcomment.htm)

Comments can slow down a site, although comments can make it easier to maintain a specific site. Removing comments can be done manually or by using a server-side scripting language.

Tip #26 – (HTML) Don’t Use Complex Tables

(https://www.webreference.com/authoring/languages/html/optimize/8.html)

Complicated layout tables may allow you to put a “face” to information, but they can also cause significant accessibility problems. Optimize the use of table and cells attributes.

Tip #27 – (HTML) Reduce the number of nested tables

(https://webdesign.about.com/od/layout/a/aa111102a.htm)

To speed up page display, and avoid long wait times for each table to display, it’s best to use the least number of nested tables.

Tip #28– (HTML) Use Name Colors Rather Than Hex

(https://www.webreference.com/authoring/languages/html/optimize/8.html)

As in CSS, use the name of colors rather than the corresponding Hex code — but only when shorter. This reduces the size of the page.

Tip #29– (HTML) Ensure All Tags are Closed

(https://www.webreference.com/authoring/languages/html/optimize/8.html)

For site optimization, closing all tags ensures that there is no lag in processing time. If there are errors in the code, the page will not load properly. Worse, it won’t  load at all.

Tip #30– (HTML) Pages Sizes Should Be Less Than 30K

(https://www.webreference.com/authoring/languages/html/optimize/8.html)

A well optimized page should take no longer than one second to load, and a maximum of 10 to 15 seconds. The easiest way to improve the load times is to ensure that a full page is 30 kilobytes in size or less. This can be done by avoiding unnecessary and/or unnecessarily large graphics and creating a site design that specifies reasonably sized blocks of content on each page.

Paid Monitor hopes that you can use some of these 30 tips on making your web images perform better and interact more efficiently with your site. For other handy information on making your IT infrastructure a happier place, see our 30 Tips to Improve Java Script Performance!

Like it? Click like it and Follow us on Twitter!

Post Tagged with

Category: Articles | Tagged 2 Comments.

Hovhannes Avoyan

About Hovhannes Avoyan

Paid Monitor CEO – Hovhannes is an international entrepreneur with a recognized and respected reputation in the high tech industry. His technical expertise, combined with his drive to build the best business/product, has positioned him as a visionary international extension of Silicon Valley.
  • https://www.buraq-technologies.com/ ambreen11

    Great post. Thanks for sharing these tips on optimizing images.After reading this blog I feel that I have gain a lot of good information regarding the topic which will definitely help me in future. Blogs like these should be really kept updated such as this blog.I personally thank to this blogger for doing such a great work.

  • Manuel Voss

    Sorry, but there a lot of incorrectness in this post, especially in modern times.

    1: Correct. Good Tools are JPEG Mini ore ImageOptim (and a lot of others)

    2: Doesn’t matter at all. Its the calculated resolution that counts, most browsers don’t even consider the resolution you set in the meta tags – and btw it will be removed when compressing the image with a good tool.

    3: Do so, but is more or less a duplicate of 1.

    4: Modern compression tools named in step 1 will do so automatic

    5: I would not generally recomment. Looking at todays bandwidth and the pixel density modern mobile devices get, the thumbnail often does need a picture size that would be near the original image. So, if you use thumbnails, the user has to load two images instead of one. This will nearly double the total loading time.

    6: Don’t use gif any more. The color range is too limited to get good results. Use gif only for animated images – but there’s HTML5 animations for this.

    7: Do so, but do not do it with a lot of big images. I’d recommend this for ui elements and other little graphics, but when doing this with big images, you may end up with a white page while all images are loading at once.

    8. You can try this, but keep in mind that every browser might end up with a slightly different rendering of your text. Good font resources are f.e. font squirrel or google web fonts

    9. Wrong. Do scale images. But don’t do so in html, style and content should be separated. Use css. Why? Because if you don’t give your images a scaling, the will look really ugly on any display with a higher pixel density higher than 72dpi (most mobile devices have round about 300 or more, so do retina displays).

    10. Well, the fewer graphics, the fewer graphics there are to make your page beautiful. Don’t stick to this rule for the rule’s sake.

    11. God! CSS is not a feature that has been added to html, it’s the styling language for more or less any modern website. All look things should reside in the stylesheets. If there is a reason to group selectors it’s by far better to do so instead of repeating the same style declarations for every selector that should be affected.

    12. Yes. And compress them and minify them. There are a lot of tools. “Drastic impact” may be a bit too much, but this is space you can gain for free.

    13. Erm, isn’t this the complete opposite of 11? And yes, it’s right.

    14. Yes, do so. Even better, use LESS, SASS or some other CSS preprocessor. You will save time and thoughts.

    15. This is about 1 Byte in the final file. Don’t use it, if you can think better the other way. And a good preprocessor should take car of this automatically.

    16. This is about 1 or 2 Bytes in the final file. Don’t spend time thinking about this, it won’t really affect loading times. If you care about the last ms, that (possibly) could be gained by tricks like 15, 16, 19 and some others – well do so. But if you care about the 400ms that are wasted by images and other stuff, like me, concentrate on those.

    17. Really? I prefer readable classes to cryptic nonsense. And this also is about 1 byte max.

    18. Whaaat? PHP comments in CSS? God no! Use a good preprocessor and be done.

    19. Don’t even think about it if you care about look. When using the predefined color names, you are stuck with about 250 colors which the browsers do not render the same. If you want control over your design, don’t use any other named colors than black and white.

    20. Outdated. Use HTML5, the doctype would be

    21. Removing whitespace isn’t wrong, but this also is about some bits. Use a preprocessor and be done.

    22. Yeah, use only tags and attributes you need. But what exactly are redundant tags? Most of the tags appearing multiple times (like ) are needed, so think before you omit!

    23. Don’t care about the few bits you might gain, think about SEO. Place useful content in the alt tags to make your page searchable and to make it readable for people using text-only browsers.

    24. Use as many meta tags as you need. Not more, not less. Don’t think about saving loading time by using fewer meta tags.

    25. Yes, do so. But actually, a good html preprocessor should do so automatically.

    26 & 27. Don’t use tables at all, unless you are displaying data. Use CSS.

    28. See 19 – and place them in CSS. Not in HTML.

    29. Yes. Having opened tags won’t probably break your site, but it’s always better to have clean code.

    30. B******t! There is no such thing as a 30K-limit. Most of the loading time of your HTML-code will be waiting for your server. The file size can be 10K or 68K – this will make a difference of about 10ms. It’s not measurable for a human visitor.

    Yes, of course I see that your tips are from 3 years ago – but most of them have been correct round about 2005 to 2008. And they are still online, so people still read them.