Skip to main content

Speeding up web pages on the web site using Inline SVG and Progressive JPG etc

Updated a lot of the graphicxtras site to SVG / vector files and the site should be a whole lot faster for that.  http://www.graphicxtras.com 

Copying Illustrator objects to Dreamweaver
I have been adding a lot of SVG files and Illustrator has a decent enough save feature for the SVG files but it does add a lot of extra material which is saved in the SVG and has to be manually edited such as the various (it can add a lot of those). Found out that is even easier simply to copy the objects from Illustrator via the copy command into Dreamweaver - open the source and then paste. It works fine for most but not text so if you have any text, you will have to expand the text and then copy that otherwise you will just have to add the text later via the editor. Anyway, the inline SVG code generated is fine and the result is fairly clean with the odd feature of gaps between the lines as well as some additional comments etc (why Illustrator persists in putting comments baffles me - I delete them instantly). 

Slight lag if using a SVG file compared with inline SVG
If you have a slightly complicated web page with a load of images (my site is full of images) and a lot of those images are quite large and that does have a slow down on the web page rendering.
 Found that the SVG inline speeds things up nicely with a simple line of code instead of using an image etc.  Also, the code is there, no additional resources need to be brought in. Of course, the code may be complex and may cause issues perhaps with mobile phones etc ??? who knows. 


Improvements with Progressive and Interlaced
Also, been going through a lot of my site and updating the pages to include progressive JPG - in most cases the file sizes are not much greater and it has meant that I can also add additional text into my images such as my galleries. The PNG Interlaced / adaptive 8 colors also works fairly nice with most of my imagery of black and white shapes etc and that keeps the file size down and also seems to give a bit of a zip to the web pages (though ultimately the same info is still eventually downloaded). Hopefully over time all my pages will be updated to include that but it does take time especially as I can't really use a batch process and do all the pages as some of the pages are not black and white and sometimes the reduction to 8 colors will make a hash of a page - so it is a manually process with about 11,000 PNGs to clean down... just wish I had done that from the start


Scripts
Not a big fan of scripts but the web is full of them. Many web pages are snarled up with them to the point that they never appear - not really certain there is point there but I guess it is good to have ads etc and also lots of useful scripts for social stuff. I have scripts once in a while such as checking how the pages are working but I generally get rid them of once I feel I have seen enough - they are easier enough to put them back to the end of the
for a page or an entire site.

Anyway, lots more to do with the site and I am really getting more into video tutorials which can all be found on the graphicxtras channel on Youtube than a lot more updates of the site. I have updated graphicxtras now for about 15 years (on and off and with a lot of actual work in between). Certain I will have more observations and hopefully more improvements to make with my site over the next few weeks. Also added a number of new patterns sets such as 'flames'. Will be adding many new tiles / patterns sets over the next few weeks or perhaps more overlay / texture ones. Will be using them in my experimental video material

Comments

Popular posts from this blog

How to create radial speed lines in Krita (for use in Manga etc)

How to create radial speed lines in Krita painting applications (for use in Manga comics, illustrations etc). You can use the powerful assistant tool to draw lines from a particular origin point while using the freehand brush tool in Krita. All kinds of powerful radial speed lines can be created using pencils as well as ink and more by using the assistants in Krita. Here is a quick tutorial as well as a video tutorial on how to do this in Krita. You can vary the background, the origin point, distances, brushes used, the colors used, on layers and much more (as well as add effects etc) http://www.graphicxtras.com/products/krita.htm

How to use art history tool tutorial for Photoshop

Quick tutorial on how to use the art history tool in Photoshop (CC 2018 2017 2015 CS5 etc) Use the art history brush to create the most amazing brush stroke designs in seconds

Spiral custom shapes for Photoshop and modifying them

Spiral custom shapes and modifying them Created 100s of different designs of spirals for Photoshop (though they were created  in Illustrator in most cases as Photoshop is not the best app for vectors) but once you have the shapes, what can you do with them ??? You can use them as is, of course, and simply add them as a pixel fill or path or shape layer Check out the video below relating to modifying a spiral shape using the direct selection tool https://www.youtube.com/watch?v=SRLSRVc4_kA So how can you edit them using the direct selection tool. Well the key is that you use it as a shape layer and modify the anchor points as well as the segments etc and you can move them back and forth to create all kinds of variations of designs which can then be all re-selected and used to define as a custom shape via the edit menu. You can then save that selection as a CSH file and use them in future projects. http://www.graphicxtras.com/spirals.htm On the spirals page you can find a lo