Webmaster Forum

Webmaster Forum (http://www.v7n.com/forums/index.php)
-   Digital Photography Forum (http://www.v7n.com/forums/forumdisplay.php?f=51)
-   -   What is the best optimization for pictures (http://www.v7n.com/forums/showthread.php?t=360141)

grasshoppersean 01-23-2014 07:18 AM

What is the best optimization for pictures
 
Hi

i hope i have this in the right section.i am in the process of updating my website and i am going to change the pictures on the gallery page. what picture and file size would be best and should i name the picture with relevant keywords to my site. Can i use a simple internet picture optimising program to do this. If you want to have a look at my gallery you can get to it through the sig underneath. any suggestion would be great.

ConradGoodman 01-23-2014 07:45 AM

There is no one answer to this, it all depends on the image you are optimising.

There are lots of tools that do it, any decent graphics program will do, but I use Ps for it.

When you 'save for web' you can use a slider to change the quality of the image, this is directly related to the file size and how compressed the image is.

It's a case of using your eye to reduce the image quality to whatever you perceive to be acceptable.

I don't alter it much as most of my images are relatively small (200px square).

The image size in pixels should be exactly the size you need for it to take the relevant space up on the page. Don't go modifying the image size within the HTML img tag, as this will just distort it.

HTMLBasicTutor 01-23-2014 09:41 PM

Quote:

Originally Posted by grasshoppersean (Post 2089031)
what picture and file size would be best

What ever size you decide on, make them all the same size so it looks tidy.

Compare the file size if you save as .jpg vs .png. Once might be smaller and reserve the quality of the image.

Save as progressive if .jpg. That should help keep any of the page speed testers happy.

Hint: If you make them all 200px wide and use a fluid design they will fit nicely on a phone.
Quote:

Originally Posted by grasshoppersean (Post 2089031)
and should i name the picture with relevant keywords to my site.

Descriptive and keyword(s).
Quote:

Originally Posted by grasshoppersean (Post 2089031)
Can i use a simple internet picture optimising program to do this.

You could do. Search for free online picture editor then test a few out to see which one gives you good results.

I personally like to have the software on my machine. Corel's PaintShop Pro isn't too expensive compared to Adobe's full Photoshop.

grasshoppersean 01-24-2014 03:17 AM

Thanks Conrad and html just what i wanted to know. it probably would be best to have the software on my computer. i have had ps before and found it a bit hard to use. is corel easy enough to use

msocialh 01-24-2014 07:25 AM

There is many tools that can help you optimize your images, the most valuable image optimization is of course the size of the image to make it load faster, a very good tool is smush it, if you have a WordPress blog then there is even a plugin for Smush it that will automatically optimize your newly uploaded images and can be used to even optimize your old images.

ConradGoodman 01-24-2014 10:07 AM

I take your point about Ps Sean, but optimising images in it takes seconds. Just 'save for web'

KnightMedia 01-25-2014 08:29 AM

Photoshop has a "save for web" option that does really good on getting file sizes down without loosing quality

ScriptMan 01-25-2014 12:19 PM

You can compress them a lot more that you think unless it is a photography site. For routine photo illustrations I often save them them at medium quality and 30% in PS.

But, don't take my word for it, visit some of the big boy sites and view the image info. CNN and Fox compress them a lot farther than I do.

ConradGoodman 01-26-2014 07:09 AM

Depends a lot on the content and size of the image! I think a decent monitor and doing it by eye to see where the quality drop is noticable is the best method.

grasshoppersean 01-26-2014 08:52 AM

Quote:

Originally Posted by msocialh (Post 2089306)
There is many tools that can help you optimize your images, the most valuable image optimization is of course the size of the image to make it load faster, a very good tool is smush it, if you have a WordPress blog then there is even a plugin for Smush it that will automatically optimize your newly uploaded images and can be used to even optimize your old images.

thanks for the replys. i tryed smuchit but when it reduced quality of the file and gave me the option to download it kept saying page not found.

i am going to get ps i think. i didnt realise it was that easy, just save to web.:o

ScriptMan 01-26-2014 09:47 AM

Quote:

Originally Posted by grasshoppersean (Post 2089774)
thanks for the replys. i tryed smuchit but when it reduced quality of the file and gave me the option to download it kept saying page not found.

i am going to get ps i think. i didnt realise it was that easy, just save to web.:o

Adobe Photoshop Elements will do everything for pictures that PS will do. You don't get the other tools. Gimp is free but complicated. This http://www.irfanview.com/ is free and works almost as well for simple resizing and compression. You can use it to do batches of images.

TNWallpapers 01-26-2014 12:22 PM

Size....depends on your site. Go with what looks good.

Use your keyword as the Alt. Image Text if at all possible (don't recycle keywords here though meaning don't use the same one more than once)

Make sure the file name is accurate and relevant.

If it's a picture of the Statue of Liberty in the rain....

Name the file: statue-of-liberty-rainy-day.jpeg

Or something along those lines.

You can even insert a description if you'd like to.

MattWarrell 01-26-2014 10:32 PM

Don't over optimise it but definitely optimise for sure. I would work off the dimensions of the space you're trying to fill - that way it will look the best but not bog your site down unnecessarily.

grasshoppersean 01-27-2014 04:46 AM

Quote:

Originally Posted by TNWallpapers (Post 2089826)
Size....depends on your site. Go with what looks good.

Use your keyword as the Alt. Image Text if at all possible (don't recycle keywords here though meaning don't use the same one more than once)

Make sure the file name is accurate and relevant.

If it's a picture of the Statue of Liberty in the rain....

Name the file: statue-of-liberty-rainy-day.jpeg

Or something along those lines.

You can even insert a description if you'd like to.

that you everyone for your advice.

i am just looking into what you have said. my knowledge is a bit basic (but learning)so i have to google terms like alt image text. i understand what it is now but where would i put this.i am using jamoola with a joom gallery if that revelant.

also with the file name does it have to be statue-of-liberty.jpeg or statue of liberty.jpeg with spaces. sorry if this is a bit stupid to ask.
scriptman i will have a look at the elements then, i dont want any extra programs ps might come with, wouldnt need to sue them.

thanks, i am getting there

HTMLBasicTutor 01-27-2014 05:12 PM

Quote:

Originally Posted by grasshoppersean (Post 2089980)
my knowledge is a bit basic (but learning)so i have to google terms like alt image text. i understand what it is now but where would i put this.i am using jamoola with a joom gallery if that revelant.

There is not box when uploading the image for you to fill in the alt text? (short for alternative text) Is there at least an image tilte box you can fill in? What about a caption box? It would actually be a good idea to fill all of these in with different information describing the image. You can use a keyword or two but they are not meant for keyword stuffing.
Quote:

Originally Posted by grasshoppersean (Post 2089980)
also with the file name does it have to be statue-of-liberty.jpeg or statue of liberty.jpeg with spaces. sorry if this is a bit stupid to ask.

No question is stupid and it is a good thing you asked! Many people are use to Windows and saving an image with spaces in the file name is perfectly fine but when you are working on the web - NO Spaces! Some servers and browsers can figure this out but a lot won't. If you get a big old X where the image belongs you either a) forgot to upload the actual image or b) your web hosting server is one of those that can't figure out space in file names.

grasshoppersean 01-28-2014 03:36 AM

http://s8.postimg.org/998sxqaw5/picture_menu_upload.jpg
http://s27.postimg.org/d5hxtyinn/pic...nu_upload1.jpg
http://s3.postimg.org/pc7e6a5pv/pict...nu_upload2.jpg
this is the new thing i have learnt this morning taking screen shots.haha. i have posted these because its easier for you to see the page than me explain. which sections should i be filling in for the alt text.
also when naming my photos i will but - between words instead of spaces

HTMLBasicTutor 01-28-2014 03:53 AM

Finding that example image in the code it produced:
HTML Code:

<a title="garden_1" href="/gallery/image?view=image&amp;format=raw&amp;type=orig&amp;id=30" rel="lightbox[joomgallery]" class="jg_catelem_photo jg_catelem_photo_align">
<img src="http://www.grasshoppergardenservices.co.uk/images/joomgallery/thumbnails/gallery_2/garden_1_20140128_1648752422.jpg" class="jg_photo" width="300" height="300" alt="garden_1" /></a>

Notice that the title tag and alt attribute have the same text in them.

Put what you want as the alt attribute in the title box.

Put a small description in the description box for now and see if it shows as a caption under the photo or just in the blown up version.

What were the results?

BTW: Congrats on learning how to do a screenshot.

grasshoppersean 01-29-2014 04:36 AM

Quote:

Originally Posted by ScriptMan (Post 2089786)
Adobe Photoshop Elements will do everything for pictures that PS will do. You don't get the other tools. Gimp is free but complicated. This http://www.irfanview.com/ is free and works almost as well for simple resizing and compression. You can use it to do batches of images.

i got elements yesterday and it is so easy to use, well the things i was using it for was. the save to web option is excellent. on a couple of pictures i even edited out things like leaves on the grass..:lol::)

grasshoppersean 01-29-2014 04:40 AM

Quote:

Originally Posted by HTMLBasicTutor (Post 2090280)
Finding that example image in the code it produced:
HTML Code:

<a title="garden_1" href="/gallery/image?view=image&amp;format=raw&amp;type=orig&amp;id=30" rel="lightbox[joomgallery]" class="jg_catelem_photo jg_catelem_photo_align">
<img src="http://www.grasshoppergardenservices.co.uk/images/joomgallery/thumbnails/gallery_2/garden_1_20140128_1648752422.jpg" class="jg_photo" width="300" height="300" alt="garden_1" /></a>

Notice that the title tag and alt attribute have the same text in them.

Put what you want as the alt attribute in the title box.

Put a small description in the description box for now and see if it shows as a caption under the photo or just in the blown up version.

What were the results?

BTW: Congrats on learning how to do a screenshot.

thanks for your help. i have put a description in the alt att title box but nothing came up. do i need to do something with the code you have put there.:oops:

HTMLBasicTutor 01-29-2014 04:49 AM

1 Attachment(s)
You fixed the image alt attribute and title tag.
HTML Code:

<a title="Garden Maintenance " href="/gallery/image?view=image&amp;format=raw&amp;type=orig&amp;id=52" rel="lightbox[joomgallery]" class="jg_catelem_photo jg_catelem_photo_align">
<img src="http://www.grasshoppergardenservices.co.uk/images/joomgallery/thumbnails/gallery_2/garden_maintenance__2_20140129_1548221450.jpg" class="jg_photo" width="300" height="300" alt="Garden Maintenance " /></a>

http://www.v7n.com/forums/attachment...rasshopper.gif

You might not see this if:
a ) You did not clear your browser cache
b ) Your ISP caches the net
It did work here though.

Now, in the second screenshot you had above there was a box called description. Put something in there and see if it at least shows up in the pop up when they click the image.

Looks much nicer with all the images the same size. Well done!


All times are GMT -7. The time now is 02:07 PM.

3.8.7